纯CSS制作3D旋转风车动画效果

最新推荐文章于 2021-11-04 10:50:59 发布

何兮&

最新推荐文章于 2021-11-04 10:50:59 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/weixin_45659878/article/details/105059397

版权

效果图展示

在这里插入图片描述

HTML源码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS制作3D旋转风车动画效果</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
	<div class="box">
		<div>
 			<span></span>
            		<span></span>
            		<span></span>
            		<span></span>
		<div/>
	<div/>
<body>
</body>
</html>

CSS源码：

/* CSS Document */
body{
	margin:0;
	padding:0;
	background:#607d8b;
}
.box{
	position:absolute;
	top:calc(50% - 150px);
	left:calc(50% - 100px);
	transform:perspective(1000px) rotateY(-45deg);
	width:200px;
	height:300px;
	transform-style:preserve-3d;
}
.box:before{
	content:'';
	position:absolute;
	bottom:-100px;
	width:100%;
	left:0;
	background:#000;
	filter:blur(40px);
	opacity:0.5;
	transform: rotateX(90deg);
}
.box div{
	position:absolute;
	top:0;
	lef:0;
	width:100%;
	height:100%;
	transform-style:preserve-3d;
	animation: animate 5s linear infinite;
}
.box div span{
	position:absolute;
	top:0;
	lef:0;
	display:block;
	width:100%;
	height:100%;
	background: linear-gradient(0deg,#f1f1f1,#bbb,#f1f1f1);
	border-radius: 20px;
}
.box div span:nth-child(1){
	transform: rotateX(0deg);
}
.box div span:nth-child(2){
	transform: rotateX(45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
.box div span:nth-child(3){
	transform: rotateX(-45deg);
}
@keyframes animate{
	0%{
		transform:perspective(1000px) rotateX(0deg);
	}
}
@keyframes animate{
	100%{
		transform:perspective(1000px) rotateX(359deg);
	}
}