[wm_blue]效果示例[/wm_blue]

CSS攀爬倒影发光方块案例_HTML插图

[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、本站所有源码都来源于网络收集修改或者交换!如果侵犯了您的权益,请及时告知我们,我们即刻处理！