首页 > 开发 > CSS > 正文

使用CSS3来绘制一个月食图案

2024-07-11 08:29:58
字体:
来源:转载
供稿:网友

css3的animation是个好东西,之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想,应该在很多应节场合用css玩点有意思的。
突然想到上次的月食,那就玩玩。
看了一个div的炫技网站.
画个月亮嘛,还是尝试用一个div来实现,主div做背景黑夜,before做月亮,after做挡住月亮的黑影。
用position控制位置,用animation控制动画。

CSS Code复制内容到剪贴板
  1. .moonback{        width: 600px;   
  2.     height: 600px;        background-color: #000;   
  3.     margin: 0 auto;      
  4.     position: relative;      
  5.   }      .moonback::before{   
  6.     content: ",";        display: block;   
  7.     position: absolute;        left: 200px;   
  8.     top: 100px;      
  9.     width: 200px;        height: 200px;   
  10.     background-color: #ff0;        border-radius: 100px;   
  11.   }      .moonback::after{   
  12.     content: " ";        display: block;   
  13.     position: absolute;        left: 26px;   
  14.     top: 0px;      
  15.     width: 200px;        height: 200px;   
  16.     background-color: #000;        border-radius: 100px;   
  17.        -webkit-animation: 8s dog linear infinite;   
  18.     -moz-animation: 8s dog linear infinite;        animation: 8s dog linear infinite;   
  19.   }      
  20.   @-webkit-keyframes dog {        0% {    
  21.       left:27px;          top: 0px;   
  22.     }        100% {    
  23.       left: 399px;          top: 216px;   
  24.     }      }   
  25.   @-moz-keyframes dog {        0% {    
  26.       left:27px;          top: 0px;   
  27.     }        100% {    
  28.       left: 399px;          top: 216px;   
  29.     }      }   
  30.   @keyframes dog {        0% {    
  31.       left:27px;          top: 0px;   
  32.     }        100% {    
  33.       left: 399px;          top: 216px;   
  34.     }      }  
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表