css3。0水草浮动动画

CSS3.0是一种强大的样式语言，它允许我们通过CSS代码为网页添加各种各样的动画效果。其中，水草浮动动画是一个非常有趣的效果，可以为您的网页增添一些生气勃勃的气息。

.water-grass {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    background: url("water-grass.png") no-repeat center;
    animation: sway 5s infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center bottom;
}
@keyframes sway {
0% {
    transform: translateX(-50%) rotate(5deg);
}
50% {
    transform: translateX(-50%) rotate(-5deg);
}
100% {
    transform: translateX(-50%) rotate(5deg);
}
}
    

上面的代码使用了CSS3.0的@keyframes和animation属性来实现这个水草浮动的动画效果。我们先定义了一个.water-grass类来设置水草的样式，然后设置animation属性的值为sway 5s infinite，表示使用sway规则来执行动画，每个周期时长为5s，无限循环执行。

接着，定义了一个@keyframes规则，它包含三个状态：0%、50%和100%，我们在这里使用了transform属性来设置水草的旋转值，使它在动画中产生晃动的效果。

最后，我们将这个.water-grass类应用到一个位置固定的元素中，使它出现在屏幕底部并水平居中。当页面加载完毕后，水草就会自动开始浮动了。

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