云层动画练习

2023-11-01 10:20

文章标签 练习动画云层

本文主要是介绍云层动画练习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

云层动画练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>云层动画练习</title><style>* {margin: 0;padding: 0;}/*子绝父相，让三张背景图片重叠*/ul {height: 400px;background-color: skyblue;margin-top: 100px;/*设置背景从白天到黑夜*/animation: change 5s linear 0s infinite alternate;position: relative;overflow: hidden;}ul li {list-style: none;width: 400%;height: 100%;position: absolute;left: 0;top: 0;}/*设置这三张背景图片，然后分别让他们动起来*/ul li:nth-child(1) {background-image: url("images/cloud_one.png");animation: one 30s linear 0s infinite alternate;}/*修改绝对定位，让其缓慢移动*/@keyframes one {from {margin-left: 0;}to {/*移动一个自己的长度*/margin-left: -100%;}}ul li:nth-child(2) {background-image: url("images/cloud_two.png");animation: two 30s linear 0s infinite alternate;}/*修改绝对定位，让其缓慢移动*/@keyframes two {from {margin-left: 0;}to {/*移动一个自己的长度*/margin-left: -200%;}}ul li:nth-child(3) {background-image: url("images/cloud_three.png");animation: three 30s linear 0s infinite alternate;}/*修改绝对定位，让其缓慢移动*/@keyframes three {from {margin-left: 0;}to {/*移动一个自己的长度*/margin-left: -300%;}}/*该动画是设置ul背景的*/@keyframes change {from {background-color: skyblue;}to {background-color: black;}}</style>
</head>
<body>
<ul><li></li><li></li><li></li>
</ul>
</body>
</html>

在这里插入图片描述

动图太大传不上来

总结

1.首先是背景颜色从天蓝到黑，代表晴空到黑夜，设置一个循环的动画，用ul设置

2.这个天空中肯定有动和静的云，分别设置三个li定位相互重叠，设置天空的背景图片。

3.这些云速度有快有慢，两种方式表现速度，相同时间比路程，相同路程比时间。为了方便我们可以直接设置相同的时间，改变位移的长度。

4.那么长度分别是这个屏幕的一倍，二倍和三倍。但是有一个问题，默认三个背景图片同向运动，那么最左边就空出来没有云了，肯定不行，所以我们可以设置长度统一为4倍屏幕，然后向左运动这个屏幕的一倍，二倍和三倍。这样无论如何都有云在屏幕上，不会空出来。