欢迎光临散文网 会员登陆 & 注册

简单有趣的CSS动画效果，翻滚的发光方块～

2023-06-23 18:38 作者:嘿大喵喵  | 我要投稿
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <title>Document</title>  
  8.     <style>  
  9.         * {  
  10.             margin: 0;  
  11.             padding: 0;  
  12.             box-sizing: border-box;  
  13.         }  
  14.   
  15.         body {  
  16.             min-height: 100vh;  
  17.             display: flex;  
  18.             justify-content: center;  
  19.             align-items: center;  
  20.             background-color: #000;  
  21.             overflow: hidden;  
  22.         }  
  23.   
  24.         .container {  
  25.             width: 100%;  
  26.             transform: rotate(-35deg);  
  27.         }  
  28.   
  29.         .box {  
  30.             display: flex;  
  31.             justify-content: center;  
  32.             align-items: center;  
  33.             width: 100%;  
  34.             height: 200px;  
  35.             -webkit-box-reflect:  
  36.                 below 1px linear-gradient(transparent, #0004);  
  37.             animation: translate 1.5s ease-in-out infinite;  
  38.         }  
  39.   
  40.         @keyframes translate {  
  41.             0% {  
  42.                 transform: translateX(0px);  
  43.             }  
  44.   
  45.             100% {  
  46.                 transform: translateX(-200px);  
  47.             }  
  48.         }  
  49.   
  50.         .cube {  
  51.             width: 200px;  
  52.             height: 200px;  
  53.             border-radius: 10px;  
  54.             background-color: #03e9f4;  
  55.             box-shadow: 0 0 5px rgba(3, 233, 244, 1),  
  56.                 0 0 25px rgba(3, 233, 244, 1),  
  57.                 0 0 50px rgba(3, 233, 244, 1),  
  58.                 0 0 100px rgba(3, 233, 244, 1),  
  59.                 0 0 200px rgba(3, 233, 244, .5),  
  60.                 0 0 300px rgba(3, 233, 244, .5);  
  61.             transform-origin: bottom right;  
  62.             animation: rotate 1.5s ease-in-out infinite;  
  63.         }  
  64.   
  65.         @keyframes rotate {  
  66.             0% {  
  67.                 transform: rotate(0deg);  
  68.             }  
  69.   
  70.             60% {  
  71.                 transform: rotate(90deg);  
  72.             }  
  73.   
  74.             65% {  
  75.                 transform: rotate(85deg);  
  76.             }  
  77.   
  78.             70% {  
  79.                 transform: rotate(90deg);  
  80.             }  
  81.   
  82.             75% {  
  83.                 transform: rotate(87.5deg);  
  84.             }  
  85.   
  86.             100% {  
  87.                 transform: rotate(90deg);  
  88.             }  
  89.   
  90.         }  
  91.     </style>  
  92. </head>  
  93.   
  94. <body>  
  95.     <div class="container">  
  96.         <div class="box">  
  97.             <div class="cube"></div>  
  98.         </div>  
  99.     </div>  
  100. </body>  
  101.   
  102. </html>  


标签：

简单有趣的CSS动画效果，翻滚的发光方块～的评论 (共 条)

分享到微博请遵守国家法律