CSS CODE
1 body { 2 background: #ccc; 3 } 4 #cloud { 5 width: 350px; height: 120px; 6 7 background: #f2f9fe; 8 background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); 9 background: -webkit-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); 10 background: -moz-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); 11 background: -ms-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); 12 background: -o-linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%); 13 14 border-radius: 100px; 15 -webkit-border-radius: 100px; 16 -moz-border-radius: 100px; 17 18 position: relative; 19 margin: 120px auto 20px; 20 } 21 22 #cloud:after, #cloud:before { 23 content: ''; 24 position: absolute; 25 background: #f2f9fe; 26 z-index: -1 27 } 28 29 #cloud:after { 30 width: 100px; height: 100px; 31 top: -50px; left: 50px; 32 33 border-radius: 100px; 34 -webkit-border-radius: 100px; 35 -moz-border-radius: 100px; 36 } 37 38 #cloud:before { 39 width: 180px; height: 180px; 40 top: -90px; right: 50px; 41 42 border-radius: 200px; 43 -webkit-border-radius: 200px; 44 -moz-border-radius: 200px; 45 } 46 47 .shadow { 48 width: 350px; 49 position: absolute; bottom: -10px; 50 background: #000; 51 z-index: -1; 52 53 box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); 54 -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); 55 -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4); 56 57 border-radius: 50%; 58 -moz-border-radius: 50%; 59 -webkit-border-radius: 50%; 60 }
HTML CODE
1 <div id="cloud"></div>参考网站：http://thecodeplayer.com/walkthrough/make-a-simple-cloud-in-css3
转载于:https://www.cnblogs.com/Cavin/archive/2013/01/10/2855538.html
