现在网站建设尺寸一般多少,制作一个教育网站,泊头哪里建网站呢,内网建设网站大家好#xff0c;欢迎来到雄雄的小课堂#xff0c;前面#xff0c;我们将CSS的变形和过渡都整理了#xff0c;有需要的可以移步这里看#xff1a;CSS3中的动画示例CSS3的几个变形案例……今天#xff0c;我们来看看CSS3的动画。CSS3使用动画分为两个步骤#xff1a;1.通… 大家好欢迎来到雄雄的小课堂前面我们将CSS的变形和过渡都整理了有需要的可以移步这里看CSS3中的动画示例CSS3的几个变形案例……今天我们来看看CSS3的动画。CSS3使用动画分为两个步骤1.通过类似flash动画的关键帧来声明一个动画。2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果。接下来我们具体来看看CSS3是如何实现动画的01设置关键帧在CSS3中把keyfreams成为关键帧这个关键帧可以设置多段属性其语法为keyfreams name{from{//CSS代码}percentage{//CSS 代码}to{//CSS 代码}}也可以将from、percentage和to换成百分比如下keyfreams name{0%{//CSS代码}50%{//CSS 代码}100%{//CSS 代码}
}语法解析name:动画的名称通过该名称来调用该动画percentage50%是一个百分比主要用来定义某个时段的动画效果。下面我们来看一段代码Html代码div stylebackground: darkgoldenrod; iddiv7CSS样式代码/*声明一个动画*/keyframes name{0%{width: 200px;height: 200px;background: yellow;}50%{width: 400px;height: 400px;background: green;}75%{width: 500px;background: black;}100%{width:600px ;height: 600px;background: cornflowerblue;}}02调用动画keyfreams只是用来声明动画效果的但是如果不调用它的话它就不会起什么效果下面我们来看看怎么通过animation来调用动画。语法animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode语法好长下面来解释一下吧。animation-name调用的动画名称animation-duration animation-timing-function animation-delay分别是过渡时间过渡方式延迟时间。animation-iteration-count动画的播放次数可以是整数如果是infine的话则是无限循环。animation-direction动画播放的方向normal表示向前播放alternate表示一前一后播放次数偶数向前播放奇数则反方向播放。animation-play-state动画的播放状态running和paused.下面我们来看看调用动画的代码#div7:hover{animation:name 1s infinite alternate ease-in-out;}效果如图所示 往期精彩CSS3中的动画示例2020-11-19 CSS3的几个变形案例……2020-11-18 jsp中使用cookie时报错……2020-11-17 Java中的TreeSet集合会自动将元素升序排序2020-11-16 “老师请您多关注一下我吧”2020-11-15 晨读难道只是为了完成任务而读的吗2020-11-14 点分享点点赞点在看
