在本文中,我们将学习如何使用 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);
}
}
输出: