当前位置：首页 > 闲来无事写一个css3扇形展开的效果

闲来无事写一个css3扇形展开的效果

发布于 2020-03-23 阅读 1551 次 常用小特效 

  1. <!DOCTYPE html>
  2. <!-- saved from url=(0048)http://yinjiazeng.github.io/test/dial/index.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <meta name="format-detection" content="telephone=no">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="renderer" content="webkit">
  9.     <meta name="keywords" content="">
  10.     <meta name="description" content="">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12.     <!--<base href="" target="_self">--><base href="." target="_self">
  13.     <title></title>
  14.     <style type="text/css">
  16.      /* layer */
  17.      .ui-lottery {width:258px;height:258px;position:relative;border-radius:50%;overflow:hidden;-webkit-transform:translateZ(0deg);-webkit-mask-image:-webkit-radial-gradient(circle, black, black);}
  18.      ul,li{padding:0;margin: 0;}
  19.     .ui-animate { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
  20.     .ui-lottery li {position:absolute;z-index:0; top:-12px; left:-12px; width:142px; height:142px; -webkit-transform-origin:100% 100%; transform-origin:100% 100%;}
  21.     .ui-lottery li:nth-child(1) { background-color:#11AACC; -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  22.     .ui-lottery li:nth-child(2) { background-color:#64B044; -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  23.     .ui-lottery li:nth-child(3) { background-color:#F7971E; -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  24.     .ui-lottery li:nth-child(4) { background-color:#DC4437; -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);}
  25.     .ui-lottery li:nth-child(5) { background-color:#11AACC; -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  26.     .ui-lottery li:nth-child(6) { background-color:#64B044; -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  27.     .ui-lottery li:nth-child(7) { background-color:#F7971E; -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  28.     .ui-lottery li:nth-child(8) { background-color:#DC4437; -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  29.     .ui-lottery li i { position:absolute; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(255,255,255,.7);}
  30.     .ui-lottery li.s-crt i { display:inline;}
  31.     @-webkit-keyframes rotate1 {
  32.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  33.         100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  34.     }
  35.     @keyframes rotate1 {
  36.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  37.         100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  38.     }
  39.     .ui-animate-rotate1 { -webkit-animation-name:rotate1; animation-name:rotate1;}
  41.     @-webkit-keyframes rotate2 {
  42.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  43.         100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  44.     }
  45.     @keyframes rotate2 {
  46.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  47.         100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  48.     }
  49.     .ui-animate-rotate2 { -webkit-animation-name:rotate2; animation-name:rotate2;}
  51.     @-webkit-keyframes rotate3 {
  52.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  53.         100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  54.     }
  55.     @keyframes rotate3 {
  56.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  57.         100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  58.     }
  59.     .ui-animate-rotate3 { -webkit-animation-name:rotate3; animation-name:rotate3;}
  61.     @-webkit-keyframes rotate4 {
  62.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  63.         100% { -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);}
  64.     }
  65.     @keyframes rotate4 {
  66.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  67.         100% { -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);}
  68.     }
  69.     .ui-animate-rotate4 { -webkit-animation-name:rotate4; animation-name:rotate4;}
  71.     @-webkit-keyframes rotate5 {
  72.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  73.         100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  74.     }
  75.     @keyframes rotate5 {
  76.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  77.         100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  78.     }
  79.     .ui-animate-rotate5 { -webkit-animation-name:rotate5; animation-name:rotate5;}
  81.     @-webkit-keyframes rotate6 {
  82.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  83.         100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  84.     }
  85.     @keyframes rotate6 {
  86.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  87.         100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  88.     }
  89.     .ui-animate-rotate6 { -webkit-animation-name:rotate6; animation-name:rotate6;}
  91.     @-webkit-keyframes rotate7 {
  92.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  93.         100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  94.     }
  95.     @keyframes rotate7 {
  96.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  97.         100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  98.     }
  99.     .ui-animate-rotate7 { -webkit-animation-name:rotate7; animation-name:rotate7;}
  101.     @-webkit-keyframes rotate8 {
  102.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  103.         100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  104.     }
  105.     @keyframes rotate8 {
  106.         0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  107.         100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  108.     }
  109.     .ui-animate-rotate8 { -webkit-animation-name:rotate8; animation-name:rotate8;}
  111.     @-webkit-keyframes fadein {
  112.         0% { opacity:0;}
  113.         100% { opacity:1;}
  114.     }
  115.     @keyframes fadein {
  116.         0% { opacity:0;}
  117.         100% { opacity:1;}
  118.     }
  119.     .ui-animate-fadein { -webkit-animation-name:fadein; animation-name:fadein; -webkit-animation-delay:1s; animation-delay:1s;}
  120.     </style>
  121. </head>
  123. <body class="g-box">
  124.     <!-- <div class="m-dialbox">
  125.         <div class="m-dial" > -->
  126.             <ul class="ui-lottery" lottery="rotate">
  127.                 <li class="ui-animate ui-animate-rotate1 s-crt"><i></i></li>
  128.                 <li class="ui-animate ui-animate-rotate2"><i></i></li>
  129.                 <li class="ui-animate ui-animate-rotate3"><i></i></li>
  130.                 <li class="ui-animate ui-animate-rotate4"><i></i></li>
  131.                 <li class="ui-animate ui-animate-rotate5"><i></i></li>
  132.                 <li class="ui-animate ui-animate-rotate6"><i></i></li>
  133.                 <li class="ui-animate ui-animate-rotate7"><i></i></li>
  134.                 <li class="ui-animate ui-animate-rotate8"><i></i></li>
  135.             </ul>
  136.     <!--         
  137.         </div>
  138.     </div> -->
  140. </body></html>
相关文章
京ICP备2020048062号-1
Copyright © w2le.com, All Rights Reserved