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

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

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

  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">
  15. /* layer */
  16. .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);}
  17. ul,li{padding:0;margin: 0;}
  18. .ui-animate { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
  19. .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%;}
  20. .ui-lottery li:nth-child(1) { background-color:#11AACC; -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  21. .ui-lottery li:nth-child(2) { background-color:#64B044; -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  22. .ui-lottery li:nth-child(3) { background-color:#F7971E; -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  23. .ui-lottery li:nth-child(4) { background-color:#DC4437; -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);}
  24. .ui-lottery li:nth-child(5) { background-color:#11AACC; -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  25. .ui-lottery li:nth-child(6) { background-color:#64B044; -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  26. .ui-lottery li:nth-child(7) { background-color:#F7971E; -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  27. .ui-lottery li:nth-child(8) { background-color:#DC4437; -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  28. .ui-lottery li i { position:absolute; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(255,255,255,.7);}
  29. .ui-lottery li.s-crt i { display:inline;}
  30. @-webkit-keyframes rotate1 {
  31. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  32. 100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  33. }
  34. @keyframes rotate1 {
  35. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  36. 100% { -webkit-transform:rotate(45deg) skew(45deg); transform:rotate(45deg) skew(45deg);}
  37. }
  38. .ui-animate-rotate1 { -webkit-animation-name:rotate1; animation-name:rotate1;}
  39. @-webkit-keyframes rotate2 {
  40. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  41. 100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  42. }
  43. @keyframes rotate2 {
  44. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  45. 100% { -webkit-transform:rotate(90deg) skew(45deg); transform:rotate(90deg) skew(45deg);}
  46. }
  47. .ui-animate-rotate2 { -webkit-animation-name:rotate2; animation-name:rotate2;}
  48. @-webkit-keyframes rotate3 {
  49. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  50. 100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  51. }
  52. @keyframes rotate3 {
  53. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  54. 100% { -webkit-transform:rotate(135deg) skew(45deg); transform:rotate(135deg) skew(45deg);}
  55. }
  56. .ui-animate-rotate3 { -webkit-animation-name:rotate3; animation-name:rotate3;}
  57. @-webkit-keyframes rotate4 {
  58. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  59. 100% { -webkit-transform:rotate(180deg) skew(45deg); transform:rotate(180deg) skew(45deg);}
  60. }
  61. @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. .ui-animate-rotate4 { -webkit-animation-name:rotate4; animation-name:rotate4;}
  66. @-webkit-keyframes rotate5 {
  67. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  68. 100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  69. }
  70. @keyframes rotate5 {
  71. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  72. 100% { -webkit-transform:rotate(225deg) skew(45deg); transform:rotate(225deg) skew(45deg);}
  73. }
  74. .ui-animate-rotate5 { -webkit-animation-name:rotate5; animation-name:rotate5;}
  75. @-webkit-keyframes rotate6 {
  76. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  77. 100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  78. }
  79. @keyframes rotate6 {
  80. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  81. 100% { -webkit-transform:rotate(270deg) skew(45deg); transform:rotate(270deg) skew(45deg);}
  82. }
  83. .ui-animate-rotate6 { -webkit-animation-name:rotate6; animation-name:rotate6;}
  84. @-webkit-keyframes rotate7 {
  85. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  86. 100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  87. }
  88. @keyframes rotate7 {
  89. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  90. 100% { -webkit-transform:rotate(315deg) skew(45deg); transform:rotate(315deg) skew(45deg);}
  91. }
  92. .ui-animate-rotate7 { -webkit-animation-name:rotate7; animation-name:rotate7;}
  93. @-webkit-keyframes rotate8 {
  94. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  95. 100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  96. }
  97. @keyframes rotate8 {
  98. 0% { -webkit-transform:rotate(70deg) skew(45deg); transform:rotate(70deg) skew(45deg);}
  99. 100% { -webkit-transform:rotate(360deg) skew(45deg); transform:rotate(360deg) skew(45deg);}
  100. }
  101. .ui-animate-rotate8 { -webkit-animation-name:rotate8; animation-name:rotate8;}
  102. @-webkit-keyframes fadein {
  103. 0% { opacity:0;}
  104. 100% { opacity:1;}
  105. }
  106. @keyframes fadein {
  107. 0% { opacity:0;}
  108. 100% { opacity:1;}
  109. }
  110. .ui-animate-fadein { -webkit-animation-name:fadein; animation-name:fadein; -webkit-animation-delay:1s; animation-delay:1s;}
  111. </style>
  112. </head>
  113. <body class="g-box">
  114. <!-- <div class="m-dialbox">
  115. <div class="m-dial" > -->
  116. <ul class="ui-lottery" lottery="rotate">
  117. <li class="ui-animate ui-animate-rotate1 s-crt"><i></i></li>
  118. <li class="ui-animate ui-animate-rotate2"><i></i></li>
  119. <li class="ui-animate ui-animate-rotate3"><i></i></li>
  120. <li class="ui-animate ui-animate-rotate4"><i></i></li>
  121. <li class="ui-animate ui-animate-rotate5"><i></i></li>
  122. <li class="ui-animate ui-animate-rotate6"><i></i></li>
  123. <li class="ui-animate ui-animate-rotate7"><i></i></li>
  124. <li class="ui-animate ui-animate-rotate8"><i></i></li>
  125. </ul>
  126. <!--
  127. </div>
  128. </div> -->
  129. </body></html>
相关文章