css3渐变、转换、动画练手 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>作业</title>
  6     <style>
  7         * {
  8             margin: 0;
  9             padding: 0;
 10         }
 11 
 12         html,
 13         body {
 14             height: 100%;
 15             overflow: hidden;
 16         }
 17 
 18         .sky {
 19             position: relative;
 20             height: 60%;
 21             background: -webkit-linear-gradient(      top,rgb(196, 228, 253),#fff);
 22             background:    -moz-linear-gradient(   bottom,rgb(196, 228, 253),#fff);
 23             background:      -o-linear-gradient(   bottom,rgb(196, 228, 253),#fff);
 24             background:         linear-gradient(to bottom,rgb(196, 228, 253),#fff);
 25         }
 26 
 27         .sky .cloud {
 28             width: 40px;
 29             height: 40px;
 30             border-radius: 20px;
 31             position: absolute;
 32             background: #fff;
 33 
 34         }
 35 
 36         .sky .cloud::before {
 37             content: "";
 38             display: block;
 39             width: 80px;
 40             height: 20px;
 41             border-radius: 10px;
 42             background: #fff;
 43             -webkit-transform: translate(-31px,17px);
 44                -moz-transform: translate(-31px,17px);
 45                  -o-transform: translate(-31px,17px);
 46                     transform: translate(-31px,17px);
 47         }
 48 
 49         .sky .cloud::after {
 50             content: "";
 51             display: block;
 52             width: 35px;
 53             height: 24px;
 54             border-radius: 12px;
 55             background: #fff;
 56             -webkit-transform: rotate(45deg) translate(-18px,8px);
 57                -moz-transform: rotate(45deg) translate(-18px,8px);
 58                  -o-transform: rotate(45deg) translate(-18px,8px);
 59                     transform: rotate(45deg) translate(-18px,8px);
 60         }
 61 
 62         .sky .cloud:nth-child(1) {
 63             top: 5%;
 64             left: 40%;
 65             animation: mid1 20s linear infinite;
 66             opacity: 0.8;
 67         }
 68 
 69         .sky .cloud:nth-child(2) {
 70             top: 25%;
 71             left: 45%;
 72             animation: mid2 20s linear infinite;
 73             opacity: 0.8;
 74         }
 75 
 76         .sky .cloud:nth-child(3) {
 77             top: 15%;
 78             left: 53%;
 79             -webkit-transform: scale(1.5);
 80                -moz-transform: scale(1.5);
 81                  -o-transform: scale(1.5);
 82                     transform: scale(1.5);
 83             animation: near 20s linear infinite;
 84         }
 85 
 86         .sky .cloud:nth-child(4) {
 87             top: 20%;
 88             left: 65%;
 89             -webkit-transform: scale(0.8);
 90                -moz-transform: scale(0.8);
 91                  -o-transform: scale(0.8);
 92                     transform: scale(0.8);
 93             animation: far 20s linear infinite;
 94             opacity: 0.5;
 95         }
 96 
 97         .sky .cloud:nth-child(5) {
 98             top: 5%;
 99             left: 80%;
100             animation: mid3 20s linear infinite;
101             opacity: 0.8;
102         }
103 
104         .grass {
105             position: relative;
106             height: 40%;
107             background: -webkit-linear-gradient(bottom,rgb(148, 190, 89),#fff);
108             background:    -moz-linear-gradient(   top,rgb(148, 190, 89),#fff);
109             background:      -o-linear-gradient(   top,rgb(148, 190, 89),#fff);
110             background:         linear-gradient(to top,rgb(148, 190, 89),#fff);
111         }
112 
113         .grass img {
114             position: absolute;
115             bottom: 50px;
116             right: 200px;
117             width: 200px;
118         }
119 
120         @keyframes mid1 {
121             from{left:120%;}
122             to  {left:-20%;}
123         }
124 
125         @keyframes mid2 {
126             from{left:130%;}
127             to  {left:-10%;}
128         }
129 
130         @keyframes mid3 {
131             from{left:110%;}
132             to  {left:-30%;}
133         }
134 
135         @keyframes near {
136             from{left:150%;}
137             to  {left:-50%;}
138         }
139 
140         @keyframes far {
141             from{left:105%;}
142             to  {left:-5%;}
143         }
144     </style>
145 </head>
146 <body>
147     <div class="sky">
148         <div class="cloud"></div>
149         <div class="cloud"></div>
150         <div class="cloud"></div>
151         <div class="cloud"></div>
152         <div class="cloud"></div>
153     </div>
154     <div class="grass">
155         <img src="image/rabbit.png">
156     </div>
157 </body>
158 </html>

遇到的问题及注意事项：背景全屏显示的2个方法。

①背景为纯色或渐变时。html和body标签高度设为100%，子元素高度设为100%。

②背景为图片时，body的background-size设为cover。

posted @ 2017-07-22 12:01  oliverlht  阅读(189)  评论(0)  编辑  收藏  举报