[wm_blue]效果示例[/wm_blue]
[wm_blue]代码展示[/wm_blue]
<!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>
1、本站资源均存储在云盘,如发现链接失效,请联系我们我们会第一时间更新;
2、根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:
为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,
可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
3、本站资源仅供学习和研究,大家请在下载后24小时内删除, 请勿进行商业交易、运营等行为;
4、本站所有源码都来源于网络收集修改或者交换!如果侵犯了您的权益,请及时告知我们,我们即刻处理!
2、根据2013年1月30日《计算机软件保护条例》2次修订第17条规定:
为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,
可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
3、本站资源仅供学习和研究,大家请在下载后24小时内删除, 请勿进行商业交易、运营等行为;
4、本站所有源码都来源于网络收集修改或者交换!如果侵犯了您的权益,请及时告知我们,我们即刻处理!