css3扇形及简单动画

最新推荐文章于 2024-08-29 21:33:27 发布

rogerwang@f2e

最新推荐文章于 2024-08-29 21:33:27 发布

阅读量468

点赞数

分类专栏： css 文章标签： css css3 animation

本文链接：https://blog.youkuaiyun.com/RogerWang_H5/article/details/118530629

版权

css 专栏收录该内容

5 篇文章

订阅专栏

本文将指导你如何使用CSS3创建一个动态扇形，并实现简单旋转动画。通过`perspective`属性和关键帧动画`@keyframes flap`，让你的扇形元素呈现出扇动效果。适合前端开发者学习CSS3动画技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
	}
}