码迷，mamicode.com
首页 > Web开发 > 详细

CSS知识总结（九）

时间：2016-08-16 11:47:55      阅读：182      评论：0      收藏：0      [点我收藏+]

标签：

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:0;}
    100% {left:800px;} 
}
@-moz-keyframes FromLeftToRight{    /* Firefox */
    0% {left:0;}
    100% {left:800px;} 
}
@-o-keyframes FromLeftToRight{      /* Opera */
    0% {left:0;}
    100% {left:800px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:800px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;} 
}
@-o-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100%{left:500px;}
}
@-moz-keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}
@keyframes FormLeftToRight{
    0%{left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    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:0;
    margin:0;
}
.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>

 　　效果：

菜单栏

 

　　

 

 

 

　　　　

CSS知识总结（九）

标签：

原文地址：http://www.cnblogs.com/mossbaoo/p/5775804.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！