小白刚入门,可能还有地方需要改进。
云朵的效果是用阴影来做的,,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #1483D8;
padding-top: 50px;
}
ul {
list-style: none;
width: 200%;
animation: move 5s linear infinite;
}
.move {
width: 1344px;
height: 150px;
overflow: hidden;
white-space: nowrap;
clear: both;
}
ul li {
width: 448px;
height: 80px;
float: left;
}
.clound1 {
margin-top: 25px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
box-shadow: #fff 65px -15px 0 -5px, #fff 25px -25px, #fff 30px 10px,#fff 60px 15px 0 -10px, #fff 85px 5px 0 -5px;
}
.clound2 {
margin-top: 90px;
width: 36px;
height: 20px;
border-radius: 50%;