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