PURE CSS CLOUD

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

posted @ 2013-01-10 22:19  寒风、落叶  阅读(314)  评论(0)    收藏  举报
$(document).ready(function() { // 禁止右键 $(document).bind("contextmenu", function(){return false;}); // 禁止选择 $(document).bind("selectstart", function(){return false;}); // 禁止Ctrl+C 和Ctrl+A $(document).keydown(function(event) { if ((event.ctrlKey&&event.which==67) || (event.ctrlKey&&event.which==86)) { //alert("对不起,版权所有,禁止复制"); return false; } }); });