[作业]NO14.代码动画

admin 2人参与 0 次点击

http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201801/jiaoben5672

实现页面中的小猫动画

1:通过学到的知识,首先绘制出小猫

2:然后利用动画知识,做成动画效果

    1 讨论 | 直到 2018-06-29 9:19:46
  • 郭郭
    1
    <style>
    * { padding:0; margin:0; list-style:none;}
    body { background:#66C;}
    .user { width:500px; height:500px; margin:20px auto; background:#FFF; position:relative;}
    /*小猫*/
    .user .lian { width:250px; height:200px; border-radius:50%; background:#29a69c; position: absolute; z-index:3; top:50%; left:50%; margin-top:-100px; margin-left:-125px;}
    .user .yan { width:60px; height:60px; border-radius:50%; background:#FFF; position: absolute; z-index:6;}
    .user .l { top:40%; left:35%;}
    .user .r { top:40%; right:35%;}
    .user .er { width:60px; height:60px; border-radius:50% 35% 50% 50%; background:#228b7f; position: absolute; z-index:2;}
    .user .ll { top:30%; left:30%; transform:rotate(20deg);}
    .user .rr { top:30%; right:30%; transform:rotate(70deg);}
    .user .zui { width:15px; height:30px; border-radius:100% 0 0 100%/50%; border: solid 3px #228b7f; border-right: none; transform:rotate(-90deg); position: absolute; z-index:7;}
    .user .lll { top:58%; left:45%;}
    .user .rrr { top:58%; right:45%;}
    /*大圈*/
    .user li { margin:5px;}
    .user li:nth-child(1) { width:14px; height:14px; border-radius:50%; background:#228b7f;}
    .user li:nth-child(2) { width:12px; height:12px; border-radius:50%; background:#228b7f; opacity:.7;}
    .user li:nth-child(3) { width:9px; height:9px; border-radius:50%; background:#228b7f; opacity:.5;}
    .user .ani2 {position: absolute; z-index:1; top:15%; left:15%; transform-origin:170px 170px;}
    /*眼睛圈*/
    .user .ani { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:37%; transform-origin:19px 19px;}
    .user .ani { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:37%; transform-origin:19px 19px;}
    .user .ani1 { width:6px; height:6px; border-radius:50%; background:#000; position: absolute; z-index:9; top:42%; left:55%; transform-origin:19px 19px;}
    /*动画*/
    .user .ani,.ani1,.ani2 {animation:zhuan ease 1.5s infinite;}
    @keyframes zhuan{
    	0%  {transform:rotate(0deg);}
    	12.5%  {transform:rotate(45deg);}
    	25%  {transform:rotate(90deg);}
    	37.5%  {transform:rotate(135deg);}
    	50% {transform:rotate(180deg);}
    	62.5% {transform:rotate(225eg);}
    	75%  {transform:rotate(270deg);}
    	87.5%  {transform:rotate(315deg);}	
    	100% {transform:rotate(360deg);}
    	}
    </style>
    
    <body>
    <div class="user">
    	<div class="lian"></div>
      <div class="yan l"></div>
      <div class="yan r"></div>
      <div class="er ll"></div>
      <div class="er rr"></div>
      <div class="er rr"></div>
      <div class="zui lll"></div>
      <div class="zui rrr"></div>
      <div class="ani"></div>
      <div class="ani1"></div>
      <div class="ani2"><ol>
      					 <li></li>
                 <li></li>
                 <li></li>
      				 </ol></div>
    </div>
    </body>
    

    图片预览

    [作业]NO14.代码动画