升级版盒子动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;}
body{
/*设置3d的环境*/
transform-style: preserve-3d;
perspective: 1400px;
}
.box{
height: 300px;
width: 300px;
background:rgba(0,0,100,0.5);
position: absolute;
top: 180px;
left:50% ;
margin-left:-150px;
transform: rotateY(60deg);
transform-style: preserve-3d;
transition:4s;
animation:move1 3s linear infinite;
}
/* .box:hover{
transform:rotateY(360deg);
}
.box:hover div:nth-child(1){
transform:rotateX(250deg);
transition:1s;
} */
.box div:nth-child(1){
animation:move2 5s linear infinite;
}
@keyframes move1{
0%{
transform:
最低0.47元/天 解锁文章
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
