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

css3扇形及简单动画相关推荐

css3实现带有简单动画按钮导航
用css3实现的带有简单动画的按钮导航,主要运用了transition技术源代码下载地址:http://download.csdn.net/my点击打开链接 transition 语法: trans ...
用css3做一个模拟火箭飞行的简单动画。
用css3做一个模拟火箭飞行的简单动画,图片我特意上传到了图床,你也可以试试. 效果大概是这样: 需要的知识点: 知道css的transform,transition,animation属性和定义动画 ...
css3 keyframes 取消动画,CSS3 @keyframes简单动画实现
CSS3 @keyframes简单动画实现定义: 通过 @keyframes 规则,能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,可以多次改变这套 CS ...
教大家写几个可能用得上的css3简单动画
例子1:菊花状的Loading效果第一步画出静态的小菊花. sk-fading-circle {width: 40px;height: 40px;position: relative; } .sk- ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
2款不同样式的CSS3 Loading加载动画附源码
原文:2款不同样式的CSS3 Loading加载动画附源码我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
android窗帘拉开动画,H5+CSS3窗帘拉开收起动画特效源码
效果图今天给大家带来了一个简单的特效源码 H5+CSS3窗帘拉开收起动画特效源码废话不多说,上源码! html { box-sizing: border-box; } *, *::after, * ...
html+div+动画效果,html+css3太阳系行星运转动画效果的实现代码
原标题:html+css3太阳系行星运转动画效果的实现代码做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星 ...

css3扇形及简单动画

css3扇形及简单动画

html

css

效果

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

css3扇形及简单动画相关推荐

最新文章

热门文章