CSS知识总结(九)

时间:2022-02-27 03:25:37

CSS常用样式

10.自定义动画

  1)关键帧keyframes

    被称为关键帧,其类似于Flash中的关键帧。

    在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

    语法:@keyframes animationname {keyframes-selector {css-styles;}}

    animationname:定义动画的名称。

    keyframes-selector:以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。建议定义百分比选择器。

    css-styles:通过 @keyframes 规则,您能够创建动画,就是将一套 CSS 样式逐渐变化为另一套样式,并且能够多次改变这套 CSS 样式。

    兼容性:目前浏览器都不支持@keyframes规则,需要加上前缀"-moz-","-o-","-webkit-"。

    例子:

@-webkit-keyframes FromLeftToRight{   /* Safari 和 Chrome */
0% {left:;}
100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{ /* Firefox */
0% {left:;}
100% {left:800px;}
}
@-o-keyframes FromLeftToRight{ /* Opera */
0% {left:;}
100% {left:800px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}

  2)动画名称animation-name

    元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。

    animation-name :none | <identifier>

    <identifier>:定义一个或多个动画名称,如果是多个,用逗号分隔。

    例子:

div{
-webkit-animation-name:FromLeftToRight;
-moz-animation-name:FromLeftToRight;
-o-animation-name:FromLeftToRight;
animation-name:FromLeftToRight;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@-o-keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:800px;}
}

  3)动画时间animation-duration

    指定对象动画的持续时间

    animation-duration:<time>

  例子 源代码:

/* CSS代码 */
.duration{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
animation-name:FromLeftToRight;
animation-duration:3s;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画(矩形用3秒向右移动500px)</p>
<div class="duration"></div>
</body>

  效果:

请按F5刷新动画(矩形用3秒向右移动500px)

 

  4)动画的过渡速度animation-timing-function

    animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

    ①ease : 默认值,逐渐变慢(等于 cubic-bezier(0.25,0.1,0.25,1))

    ②linear : 匀速过渡效果(等于 cubic-bezier(0,0,1,1))

    ③ease-in : 加速的过渡效果(等于 cubic-bezier(0.42,0,1,1))

    ④ease-out : 减速的过渡效果(等于 cubic-bezier(0,0,0.58,1))

    ⑤ease-in-out : 加速然后减速(等于cubic-bezier (0.42, 0, 0.58, 1))

    ⑥cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值,可能的值是 0 至 1 之间的数值。

  例子 源代码:

/* CSS代码 */
.function{
width:100px;
height:100px;
background:#ccc;
position:relative;
margin:5px;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
animation-name:FromLeftToRight;
animation-duration:3s;
}
.ease-in{
-webkit-animation-timing-function:ease-in;
-moz-animation-timing-function:ease-in;
animation-timing-function:ease-in;
}
.ease-out{
-webkit-animation-timing-function:ease-out;
-moz-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画(两个矩形同样在3秒用不同的速率向右移动500px)</p>
<div class="function ease-in">ease-in</div>
<div class="function ease-out">ease-out</div>
</body>

  效果:

请按F5刷新动画(两个矩形同样在3秒用不同的速率向右移动500px)

ease-in
ease-out

  5)动画延迟时间animation-delay

    指定对象动画延迟的时间

    animation-delay:<time>

  例子 源代码:

/* CSS代码 */
.delay{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-delay:2s;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-delay:2s;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-delay:2s;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画(刷新后请等待2秒启动动画)</p>
<div class="delay"></div>
</body>

  效果:

请按F5刷新动画(刷新后请等待2秒启动动画)

 

  6)动画执行次数animation-iteration-count

    animation-iteration-count:infinite | <number>

    infinite表示无限次数,number指定循环次数。

  例子 源代码:

/* CSS代码 */
.infinite{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-iteration-count:infinite;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>动画全自动无限循环播放</p>
<div class="infinite"></div>
</body>

  效果:

动画全自动无限循环播放

 

  7)动画的顺序animation-direction

    设置对象动画在循环中是否反向运动

    animation-direction : normal | reverse | alternate | alternate-reverse

    normal:正常方向

    reverse:反方向运行

    alternate:动画先正常运行再反方向运行,并持续交替运行

    alternate-reverse:动画先反运行再正方向运行,并持续交替运行

  例子 源代码:

/* CSS代码 */
.box{
width:100px;
height:50px;
background:#ccc;
margin:5px;
position:relative;
-webkit-animation-name:FormLeftToRight;
-moz-animation-name:FormLeftToRight;
animation-name:FormLeftToRight;
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
animation-duration:5s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-iteration-count:infinite;
}
.reverse{
-webkit-animation-direction:reverse;
-moz-animation-direction:reverse;
animation-direction:reverse;
}
.alternate{
-webkit-animation-direction:alternate;
-moz-animation-direction:alternate;
animation-direction:alternate;
}
.alternate-reverse{
-webkit-animation-direction:alternate-reverse;
-moz-animation-direction:alternate-reverse;
animation-direction:alternate-reverse;
}
@-webkit-keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
@-moz-keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
@keyframes FormLeftToRight{
0%{left:;}
100%{left:500px;}
}
 <!-- HTML代码 -->
<body>
<p>四种不同的顺序</p>
<div class="box">normal</div>
<div class="box reverse">reverse</div>
<div class="box alternate">alternate</div>
<div class="box alternate-reverse">alternate-reverse</div>
</body>

  效果:

四种不同的顺序

normal
reverse
alternate
alternate-reverse

  8)动画的状态animation-play-state

    设置对象动画的状态

    animation-play-state:running | paused

    running:运动

    paused:暂停

  例子 源代码:

/* CSS代码 */
.state{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-iteration-count:infinite;
}
.state:hover{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>鼠标移动到矩形上可以暂停动画</p>
<div class="state"></div>
</body>

  效果:

鼠标移动到矩形上可以暂停动画

 

  9)动画时间之外的状态animation-fill-mode

    设置对象动画时间之外的状态

    animation-fill-mode : none | forwards | backwards | both

    none:默认值。不设置对象动画之外的状态

    forwards:设置对象状态为动画结束时的状态

    backwards:设置对象状态为动画开始时的状态

    both:设置对象状态为动画结束或开始的状态

  例子 源代码:

/* CSS代码 */
.mode{
width:100px;
height:100px;
background:#000;
position:relative;
-webkit-animation-name:FromLeftToRight;
-webkit-animation-duration:3s;
-webkit-animation-fill-mode:forwards;
-moz-animation-name:FromLeftToRight;
-moz-animation-duration:3s;
-moz-animation-fill-mode:forwards;
animation-name:FromLeftToRight;
animation-duration:3s;
animation-fill-mode:forwards;
}
@-webkit-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@-moz-keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
@keyframes FromLeftToRight{
0% {left:;}
100% {left:500px;}
}
<!-- HTML代码 -->
<body>
<p>请按F5刷新动画(动画结束后停在结束位置)</p>
<div class="mode"></div>
</body>

  效果:

请按F5刷新动画(动画结束后停在结束位置)

 

  10)动画复合属性animation

    通过 animation ,我们能够创建自定义动画,这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript。

    animation:<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> [ ,*]

    

  利用学过的动画样式,制作一个下滑菜单栏

  源代码:

/* CSS代码 */
.dropmenu{
width:100px;
height:30px;
line-height:30px;
text-align:center;
background:green;
border-radius:10px;
overflow:hidden;
}
.dropmenu a{
font-family:"微软雅黑";
font-size:18px;
color:#fff;
text-decoration:none;
}
.dropmenu ul{
list-style-type:none;
padding:;
margin:;
}
.dropmenu ul li{
background:#808080;
}
.dropmenu:hover{
-webkit-animation-name:SlideDown;
-moz-animation-name:SlideDown;
animation-name:SlideDown;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
@-moz-keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
@keyframes SlideDown{
0% {height:30px;}
100% {height:155px;}
}
<!-- HTML代码 -->
<body>
<div class="dropmenu">
<a href="###">菜单栏</a>
<ul>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
<li><a href="###">AAA</a></li>
</ul>
</div>
</body>

  效果: