用CSS3實現風車動畫效果

本文轉載自查看原文 2017-08-03 09:39 1630 css/css3


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: purple;
		}
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			position: relative;
			width: 100px;
			height: 100px;
			top:200px;
			left:50%;
			margin-left: -50px;
			transform-style: preserve-3d;
			animation: sport 18s linear 0s infinite normal;
		}
　　　　　　　　　　/*旋轉動畫*/
		@keyframes sport{
			form{
				transform: rotateZ(0deg);
			}to{
				transform: rotateZ(360deg);
			}
		}
		ul li{
			position: absolute;
			top: 0;
			left:0;
			border:50px solid transparent;
			list-style: none;
		}
　　　　　　　　　　/*每個風車葉子旋轉角度和距離差值*/
		li.li_1st{
			border-bottom:50px solid #ECF0F1;
			transform:translateY(-80px) rotateZ(45deg) ;
		}
		li.li_2nd{
			border-bottom:50px solid #95A5A5;
			transform:translateX(80px) rotateZ(135deg);

		}
		li.li_3th{
			border-bottom:50px solid #ECF0F1;
			transform:translateY(80px) rotateZ(225deg);

		}
		li.li_4th{
			border-bottom:50px solid #95A5A5;
			transform:translateX(-80px) rotateZ(315deg);

		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li class="li_1st"></li>
			<li class="li_2nd"></li>
			<li class="li_3th"></li>
			<li class="li_4th"></li>
		</ul>
	</div>
</body>
</html>

　　預覽效果: https://happyn6j.github.io/winnower.com/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用CSS3動畫特效實現彈窗效果 2d旋轉（css3實現過度效果和動畫效果） CSS3動畫效果之transition 實用CSS3的transform實現多種動畫效果使用 CSS3 實現超炫的 Loading（加載）動畫效果 css3動畫實現類菊花loading效果用css3實現摩天輪旋轉的動畫效果 CSS3動畫結合偽元素實現邊框滾動效果 CSS3懸浮動畫效果 JavaScript - 基於CSS3動畫的實現