环形文字loading动画特效(复制粘贴运行就可出效果)

灰太狼 2020-05-19 02:36 1285阅读 1赞

css3属性绘制环形文字loading，文字3D环形动画特效。
使用方法很简单，漂亮又好用的html代码：
在桌面上创建一个txt文件把代码复制进去。

然后选择文件另存为：

注意：保存类型一定是所有类型！（当然也可以直接保存，然后在修改txt后缀为html后缀）

双击运行，demo.html见效果图：

完整代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>文本环加载动画-蒲公英云</title>
  8. </head>
  9. <body>
  11. <div class="preloader">
  12.   <div class="preloader__ring">
  13.     <div class="preloader__sector">d</div>
  14.     <div class="preloader__sector">a</div>
  15.     <div class="preloader__sector">n</div>
  16.     <div class="preloader__sector">d</div>
  17.     <div class="preloader__sector">e</div>
  18.     <div class="preloader__sector">l</div>
  19.     <div class="preloader__sector">i</div>
  20.     <div class="preloader__sector">o</div>
  21.     <div class="preloader__sector">n</div>
  22.     <div class="preloader__sector">c</div>
  23.     <div class="preloader__sector">l</div>
  24.     <div class="preloader__sector">o</div>
  25.     <div class="preloader__sector">u</div>
  26.     <div class="preloader__sector">d</div>
  27.     <div class="preloader__sector">.</div>
  28.     <div class="preloader__sector">.</div>
  29.     <div class="preloader__sector">.</div>
  30.     <div class="preloader__sector"></div>
  31.     <div class="preloader__sector"></div>
  32.     <div class="preloader__sector"></div>
  33.     <div class="preloader__sector"></div>
  34.     <div class="preloader__sector"></div>
  35.     <div class="preloader__sector"></div>
  36.     <div class="preloader__sector"></div>
  37.     <div class="preloader__sector"></div>
  38.     <div class="preloader__sector"></div>
  39.     <div class="preloader__sector"></div>
  40.     <div class="preloader__sector"></div>
  41.     <div class="preloader__sector"></div>
  42.     <div class="preloader__sector"></div>
  43.   </div>
  44.   <div class="preloader__ring">
  45.     <div class="preloader__sector">蒲</div>
  46.     <div class="preloader__sector">公</div>
  47.     <div class="preloader__sector">英</div>
  48.     <div class="preloader__sector">云</div>
  49.     <div class="preloader__sector">d</div>
  50.     <div class="preloader__sector">a</div>
  51.     <div class="preloader__sector">n</div>
  52.     <div class="preloader__sector">d</div>
  53.     <div class="preloader__sector">e</div>
  54.     <div class="preloader__sector">l</div>
  55.     <div class="preloader__sector">i</div>
  56.     <div class="preloader__sector">o</div>
  57.     <div class="preloader__sector">n</div>
  58.     <div class="preloader__sector">c</div>
  59.     <div class="preloader__sector">l</div>
  60.     <div class="preloader__sector">o</div>
  61.     <div class="preloader__sector">u</div>
  62.     <div class="preloader__sector">d</div>
  63.     <div class="preloader__sector">.</div>
  64.     <div class="preloader__sector">.</div>
  65.     <div class="preloader__sector">.</div>
  66.     <div class="preloader__sector"></div>
  67.     <div class="preloader__sector"></div>
  68.     <div class="preloader__sector"></div>
  69.     <div class="preloader__sector"></div>
  70.     <div class="preloader__sector"></div>
  71.     <div class="preloader__sector"></div>
  72.     <div class="preloader__sector"></div>
  73.     <div class="preloader__sector"></div>
  74.     <div class="preloader__sector"></div>
  75.   </div>
  76. </div>
  77. <style type="text/css">
  78. @charset "utf-8";
  79. * {
  80.   border: 0;
  81.   box-sizing: border-box;
  82.   margin: 0;
  83.   padding: 0;
  84. }
  86. :root {
  87.   font-size: calc(16px + (24 - 16)*(100vw - 320px)/ (1280 - 320));
  88. }
  90. body, .preloader {
  91.   display: flex;
  92. }
  94. body {
  95.   background: #000;
  96.   color: #3df1f1;
  97.   font: 1em Dosis, sans-serif;
  98.   height: 100vh;
  99.   line-height: 1.5;
  100.   perspective: 40em;
  101. }
  103. .preloader {
  104.   animation: tiltSpin 8s linear infinite;
  105.   flex-direction: column;
  106.   justify-content: center;
  107.   align-items: center;
  108.   margin: auto;
  109.   width: 17em;
  110.   height: 17em;
  111. }
  112. .preloader, .preloader__ring {
  113.   transform-style: preserve-3d;
  114. }
  115. .preloader__ring {
  116.   animation-name: spin;
  117.   animation-duration: 4s;
  118.   animation-timing-function: inherit;
  119.   animation-iteration-count: inherit;
  120.   font-size: 2em;
  121.   position: relative;
  122.   height: 3rem;
  123.   width: 1.5rem;
  124. }
  125. .preloader__ring:nth-child(even) {
  126.   animation-direction: reverse;
  127. }
  128. .preloader__sector {
  129.   font-weight: 600;
  130.   position: absolute;
  131.   top: 0;
  132.   left: 0;
  133.   text-align: center;
  134.   text-transform: uppercase;
  135.   transform: translateZ(7rem);
  136. }
  137. .preloader__sector, .preloader__sector:empty:before {
  138.   display: inline-block;
  139.   width: 100%;
  140.   height: 100%;
  141. }
  142. .preloader__sector:empty:before {
  143.   background: linear-gradient(transparent 45%, currentColor 45% 55%, transparent 55%);
  144.   content: "";
  145. }
  146. .preloader__sector:nth-child(2) {
  147.   transform: rotateY(12deg) translateZ(7rem);
  148. }
  149. .preloader__sector:nth-child(3) {
  150.   transform: rotateY(24deg) translateZ(7rem);
  151. }
  152. .preloader__sector:nth-child(4) {
  153.   transform: rotateY(36deg) translateZ(7rem);
  154. }
  155. .preloader__sector:nth-child(5) {
  156.   transform: rotateY(48deg) translateZ(7rem);
  157. }
  158. .preloader__sector:nth-child(6) {
  159.   transform: rotateY(60deg) translateZ(7rem);
  160. }
  161. .preloader__sector:nth-child(7) {
  162.   transform: rotateY(72deg) translateZ(7rem);
  163. }
  164. .preloader__sector:nth-child(8) {
  165.   transform: rotateY(84deg) translateZ(7rem);
  166. }
  167. .preloader__sector:nth-child(9) {
  168.   transform: rotateY(96deg) translateZ(7rem);
  169. }
  170. .preloader__sector:nth-child(10) {
  171.   transform: rotateY(108deg) translateZ(7rem);
  172. }
  173. .preloader__sector:nth-child(11) {
  174.   transform: rotateY(120deg) translateZ(7rem);
  175. }
  176. .preloader__sector:nth-child(12) {
  177.   transform: rotateY(132deg) translateZ(7rem);
  178. }
  179. .preloader__sector:nth-child(13) {
  180.   transform: rotateY(144deg) translateZ(7rem);
  181. }
  182. .preloader__sector:nth-child(14) {
  183.   transform: rotateY(156deg) translateZ(7rem);
  184. }
  185. .preloader__sector:nth-child(15) {
  186.   transform: rotateY(168deg) translateZ(7rem);
  187. }
  188. .preloader__sector:nth-child(16) {
  189.   transform: rotateY(180deg) translateZ(7rem);
  190. }
  191. .preloader__sector:nth-child(17) {
  192.   transform: rotateY(192deg) translateZ(7rem);
  193. }
  194. .preloader__sector:nth-child(18) {
  195.   transform: rotateY(204deg) translateZ(7rem);
  196. }
  197. .preloader__sector:nth-child(19) {
  198.   transform: rotateY(216deg) translateZ(7rem);
  199. }
  200. .preloader__sector:nth-child(20) {
  201.   transform: rotateY(228deg) translateZ(7rem);
  202. }
  203. .preloader__sector:nth-child(21) {
  204.   transform: rotateY(240deg) translateZ(7rem);
  205. }
  206. .preloader__sector:nth-child(22) {
  207.   transform: rotateY(252deg) translateZ(7rem);
  208. }
  209. .preloader__sector:nth-child(23) {
  210.   transform: rotateY(264deg) translateZ(7rem);
  211. }
  212. .preloader__sector:nth-child(24) {
  213.   transform: rotateY(276deg) translateZ(7rem);
  214. }
  215. .preloader__sector:nth-child(25) {
  216.   transform: rotateY(288deg) translateZ(7rem);
  217. }
  218. .preloader__sector:nth-child(26) {
  219.   transform: rotateY(300deg) translateZ(7rem);
  220. }
  221. .preloader__sector:nth-child(27) {
  222.   transform: rotateY(312deg) translateZ(7rem);
  223. }
  224. .preloader__sector:nth-child(28) {
  225.   transform: rotateY(324deg) translateZ(7rem);
  226. }
  227. .preloader__sector:nth-child(29) {
  228.   transform: rotateY(336deg) translateZ(7rem);
  229. }
  230. .preloader__sector:nth-child(30) {
  231.   transform: rotateY(348deg) translateZ(7rem);
  232. }
  234. /* Animations */
  235. @keyframes tiltSpin {
  236.   from {
  237.     transform: rotateY(0) rotateX(30deg);
  238.   }
  239.   to {
  240.     transform: rotateY(1turn) rotateX(30deg);
  241.   }
  242. }
  243. @keyframes spin {
  244.   from {
  245.     transform: rotateY(0);
  246.   }
  247.   to {
  248.     transform: rotateY(1turn);
  249.   }
  250. }
  251. </style>
  252. </body>
  253. </html>

发表评论

表情：
评论列表 （有 0 条评论，1285人围观）

还没有评论，来说两句吧...

相关阅读