当前位置：网站首页>攀爬倒影发光方块

攀爬倒影发光方块

2022-08-09 02:30:00 【JiuMeilove】

效果示例
在这里插入图片描述
代码示例

<!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-color: #000; overflow: hidden; } .container {
       position: relative; width: 100%; transform: rotate(-35deg); } .container .box {
       position: absolute; top: 250px; left: -400px; display: flex; justify-content: center; align-items: center; width: calc(100% + 400px); height: 200px; transform: translate(-300px); -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); animation: animateSurface 1.5s ease-in-out infinite; } @keyframes animateSurface {
       from {
       transform: translate(0); } to {
       transform: translate(-200px); } } .container .box .cube {
       position: relative; width: 200px; height: 200px; background-color: #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, .5), 0 0 300px rgba(3, 233, 244, .5); transform-origin: right bottom; 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>
原网站

版权声明
本文为[JiuMeilove]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_44368963/article/details/126205302

边栏推荐

猜你喜欢

随机推荐