📜  如何使用 HTML 和 CSS 创建摆动的 Image Hanger?

📅  最后修改于: 2021-11-09 09:27:04             🧑  作者: Mango

在本文中,我们将学习如何使用 HTML 和 CSS 创建一种经历摆动运动的 Image Hanger。这可用于为页面添加交互性或突出显示图像以引起注意。

方法:

  • 我们将首先创建一个 HTML 文件,我们将在其中为我们的图像挂架添加一个图像。
  • 然后我们将创建一个 CSS 样式来为包含图像的元素提供动画效果。

我们将首先定义页面的 HTML 和 CSS 部分,如下所示。

HTML 部分:在此部分中,定义了页面的结构。

  • 我们将首先创建一个 HTML 文件。
  • 然后我们将写出 HTML 页面所需的样板代码。
  • 我们接下来将链接 CSS 文件或直接添加提供所有动画效果所需的 CSS。
  • 在正文部分,我们将添加一个图像源,以便我们可以显示我们的图像。
index.html


    


    
             


style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* In this part, we will define the characteristics
  of the body of the page and align the content */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }
  
  /* In this part, we will position and set the image
  in the page */
  .main_box {
    margin-top: 15em;
    margin-left: 15em;
    width: 22em;
    position: relative;
    transform: center -5em;
  
    /* We will the animation defined below to
       this element */
    animation: move infinite 0.5s alternate ease-in-out;
  }
  
  
  .main_box::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    position: absolute;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    border: 0.125em solid rgb(6, 108, 9);
    border-radius: 50%;
    background-color: #ff7a00;
  }
  
  .main_box::after {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 5em;
    border-radius: 0.75em;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    border: 0.125em solid rgb(6, 108, 9);
    position: fixed;
  
    /* The z-index of -2 is set to keep the object of 
      ::after pseudo-class to beneath the other objects
    */
    z-index: -2;
  }
  
  /* @keyframes is used to add the swinging
     animation to our code! */
  
  @keyframes move {
    from {
      transform: rotate(-6deg);
    }
    to {
      transform: rotate(6deg);
    }
  }


CSS 部分:在本部分中,我们将定义页面的 CSS。使用 CSS,我们将为 HTML 页面提供不同类型的动画和效果,使其看起来对所有用户都是交互的。

  • 我们将首先重置所有浏览器效果,以便所有浏览器上的一切都保持一致。
  • 然后我们将定义要赋予元素的样式,包括大小和位置。
  • 我们将使用@keyframe 和伪类为特定类添加动画效果。

代码:

样式文件

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* In this part, we will define the characteristics
  of the body of the page and align the content */
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }
  
  /* In this part, we will position and set the image
  in the page */
  .main_box {
    margin-top: 15em;
    margin-left: 15em;
    width: 22em;
    position: relative;
    transform: center -5em;
  
    /* We will the animation defined below to
       this element */
    animation: move infinite 0.5s alternate ease-in-out;
  }
  
  
  .main_box::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    position: absolute;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    border: 0.125em solid rgb(6, 108, 9);
    border-radius: 50%;
    background-color: #ff7a00;
  }
  
  .main_box::after {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 5em;
    border-radius: 0.75em;
    left: 50%;
    top: -20%;
    transform: translateX(-50%);
    border: 0.125em solid rgb(6, 108, 9);
    position: fixed;
  
    /* The z-index of -2 is set to keep the object of 
      ::after pseudo-class to beneath the other objects
    */
    z-index: -2;
  }
  
  /* @keyframes is used to add the swinging
     animation to our code! */
  
  @keyframes move {
    from {
      transform: rotate(-6deg);
    }
    to {
      transform: rotate(6deg);
    }
  }

输出: