您现在的位置是：网站首页> 编程资料编程资料

使用CSS3来绘制一个月食图案纯css3绘制的小黄人头像动画特效源码纯css3绘制的QQ企鹅动画特效源码纯css3绘制的精美购物优惠券样式效果源码纯css3绘制的哆啦a梦机器猫头像效果源码HTML5+CSS3绘制锯齿状的矩形CSS3绘制不规则图形的一些方法示例使用HTML和CSS3绘制基本卡通图案的示例分享CSS3绘制圆角矩形的简单示例用CSS3绘制三角形的简单方法纯CSS3绘制打火机动画火焰效果

2023-10-24 140人已围观

简介 这篇文章主要介绍了使用CSS3来绘制一个月食图案,其中用到了不少CSS3中基本的绘图方法,是一个良好的学习示例,需要的朋友可以参考下

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

CSS Code复制内容到剪贴板
  1. .moonback{   
  2.     width: 600px;   
  3.     height: 600px;   
  4.     background-color: #000;   
  5.     margin: 0 auto;   
  6.   
  7.     position: relative;   
  8.   
  9.   }   
  10.   .moonback::before{   
  11.     content: ",";   
  12.     display: block;   
  13.     position: absolute;   
  14.     left: 200px;   
  15.     top: 100px;   
  16.   
  17.     width: 200px;   
  18.     height: 200px;   
  19.     background-color: #ff0;   
  20.     border-radius: 100px;   
  21.   }   
  22.   .moonback::after{   
  23.     content: " ";   
  24.     display: block;   
  25.     position: absolute;   
  26.     left: 26px;   
  27.     top: 0px;   
  28.   
  29.     width: 200px;   
  30.     height: 200px;   
  31.     background-color: #000;   
  32.     border-radius: 100px;   
  33.   
  34.     -webkit-animation: 8s dog linear infinite;   
  35.     -moz-animation: 8s dog linear infinite;   
  36.     animation: 8s dog linear infinite;   
  37.   }   
  38.   
  39.   @-webkit-keyframes dog {   
  40.     0% {    
  41.       left:27px;   
  42.       top: 0px;   
  43.     }   
  44.     100% {    
  45.       left: 399px;   
  46.       top: 216px;   
  47.     }   
  48.   }   
  49.   @-moz-keyframes dog {   
  50.     0% {    
  51.       left:27px;   
  52.       top: 0px;   
  53.     }   
  54.     100% {    
  55.       left: 399px;   
  56.       top: 216px;   
  57.     }   
  58.   }   
  59.   @keyframes dog {   
  60.     0% {    
  61.       left:27px;   
  62.       top: 0px;   
  63.     }   
  64.     100% {    
  65.       left: 399px;   
  66.       top: 216px;   
  67.     }   
  68.   }  

最好body也设成背景黑，那就更好了~

等等，看不到星星的天空，缺少了幸福感。
正好偷师一下，一个div里的美队盾做法，直接用★
也给个动画效果，放大缩小~

CSS Code复制内容到剪贴板
  1. .star{   
  2.     position: absolute;   
  3.   }   
  4.   .star::before{   
  5.     content: "★";   
  6.     display: block;   
  7.     position: absolute;   
  8.     left

    上一篇：举例详解CSS的z-index属性的使用css3的transform造成z-index无效解决方案css z-index层重叠顺序使用介绍CSS教程 彻底掌握Z-index属性

    下一篇：CSS元素居中布局的简单方法css 不定宽高的元素居中布局解决方案CSS实现元素居中原理解析浅谈css元素居中CSS实现定位元素居中的方法html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法css控制div中元素居中的示例css实现元素居中的N种方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网