css3扇形及简单动画

css3扇形及简单动画

html

<div class="sector"></div>

css

.sector {
	display: inline-block;
	border-left: 100px solid #F0A548;
	border-top: 80px solid transparent;
	border-bottom: 80px solid transparent;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
}

效果

让扇子动起来，加个简单的扇动动画

<div class="sector rotate"></div>

.rotate {
	perspective: 500px;
	animation: flap 2s infinite;
	animation-fill-mode: forwards;
	transform-origin: right center;
}

@keyframes flap{
	0% {
		transform: skewX(8deg) rotateY(-80deg);
	}
	50% {
		transform: skewX(8deg) rotateY(80deg);
	}
	100% {
		transform: skewX(8deg) rotateY(-80deg);
	}
}