<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="try.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="cube"></div>
</div>
</div>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
background: black;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container
{
position: relative;
width: 100%;
animation: animateSurface 1.5s ease-in-out infinite;
}
@keyframes animateSurface
{
0%
{
transform: translateX(0px);
}
100%
{
transform: translateX(-200px);
}
}
/* 如果不设置 container 的 width 为 100% 的话，正方形的阴影只会有下半部分，而没有左右部分 */
.container .box
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
.container .box .cube
{
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);
}
70%
{
transform: rotate(87.5deg);
}
80%
{
transform: rotate(90deg);
}
90%
{
transform: rotate(88.75deg);
}
100%
{
transform: rotate(90deg);
}
}
标签：box,rotate,效果,transform,攀爬,244,rgba,233 From： https://www.cnblogs.com/daxiangcai/p/17030504.html