css动画灯笼来回飘

CSS动画灯笼来回飘

/* css代码 */.lantern {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 100px;
}
.string {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 2px;
    height: 40px;
    background-color: black;
}
.lantern-top {
    position: absolute;
    top: 0;
    left: 10px;
    width: 60px;
    height: 60px;
    border-radius: 50% 50% 0 0;
    background-color: #fff;
}
.lantern-top:before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ccc;
}
.lantern-middle {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 40px;
    height: 20px;
    background-color: #fff;
}
.lantern-bottom {
    position: absolute;
    bottom: 0;
    left: 10px;
    width: 60px;
    height: 40px;
    border-radius: 0 0 50% 50%;
    background-color: #fff;
    animation: lanternMove 2s ease-in-out infinite alternate;
}
@keyframes lanternMove {
from {
    transform: translate(-10%, 0);
}
to {
    transform: translate(10%, 0);
}
}
    

以上是CSS代码，实现的效果是一个灯笼来回飘动的动画。首先定义了一个灯笼容器，包含灯笼的不同部分，包括上面的灯盖、中间的灯体和下面的灯笼架，并使用position和transform属性使其在页面中水平和垂直居中。同时，定义了一个灯笼的线，即灯笼顶部向上的线条，使用position、top和left属性使其与灯笼顶部对齐，使用transform将其水平居中并使用background-color设置为黑色。接下来定义了灯笼的不同部分，包括灯盖、灯体和灯笼架，使用position和transform属性使其相对于灯笼容器定位，并设置width、height、background-color、border-radius等属性。最后，使用animation属性为灯笼的灯笼架部分添加来回移动的动画，使用@keyframes关键字定义动画效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！