CSS教程

简单的Css动画---方块攀爬

本文主要是介绍简单的Css动画---方块攀爬，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>攀爬效果</title>     <style>         *{             margin: 0;             padding: 0;             box-sizing: border-box;
        }         body{             display: flex;             justify-content: center;             align-items: center;             min-height: 100vh;             background: #000;             overflow: hidden;         }         .container{             position: relative;             width: 100%;             transform: rotate(-35deg);         }         .container .box{             position: relative;             left: -200px;             display: flex;             justify-content: center;             align-items: center;             width: calc(100% + 400px);            -webkit-box-reflect: below 1px linear-gradient(transparent,#0004);             animation: animateSurface 1.5s ease-in-out infinite;         }         @keyframes  animateSurface{             0%{                 transform: translateX(0px);             }             100%{                 transform: translateX(-200px);             }         }         .container .box .cube{             position: relative;             width: 200px;             height: 200px;             background: #03e9f4;             box-shadow: 0 0 5px rgba(3, 233 ,244, 1),                         0 0 25px rgba(3, 233 ,244, 1),                         0 0 50px rgba(3, 233 ,244, 1),                         0 0 100px rgba(3, 233 ,244, 1),                         0 0 200px rgba(3, 233 ,244, 0.5),                         0 0 300px rgba(3, 233 ,244, 0.5);             transform-origin: bottom right;             animation: animate 1.5s ease-in-out infinite;         }         @keyframes  animate{             0%{                 transform: rotate(0deg);             }             60%{                 transform: rotate(90deg);             }             65%{                 transform: rotate(85deg);             }             70%{                 transform: rotate(90deg);             }             75%{                 transform: rotate(87.5deg);             }             80%,100%{                 transform: rotate(90deg);             }         }     </style> </head> <body>     <div class="container">         <div class="box">             <div class="cube"></div>         </div>     </div> </body> </html> 结果：

 

 

这篇关于简单的Css动画---方块攀爬的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航