提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 应用css3动画须要应用什么划定规矩【css教程】,css3

CSS3 @keyframes 划定规矩

标签定义及应用申明

应用@keyframes划定规矩,你能够建立动画。

建立动画是经由过程逐渐转变从一个CSS款式设定到另一个。

在动画过程当中,您能够变动CSS款式的设定屡次。

指定的变化时发作时应用%,或关键字"from"和"to",这是和0%到100%雷同。

0%是开首动画,100%是当动画完成。(引荐进修:CSS3视频教程。)

为了取得最好的浏览器支撑,您应当一直定义为0%和100%的选择器。

注重: 应用animation属性来掌握动画的表面,还应用选择器绑定动画。.

语法

@keyframes animationname {keyframes-selector {css-styles;}}
申明
animationname 必须的。定义animation的称号。
keyframes-selector

必须的。动画持续时间的百分比。

正当值:

0-100%
from (和0%雷同)
to (和100%雷同)

注重: 您能够用一个动画keyframes-selectors。

css-styles 必须的。一个或多个正当的CSS款式属性

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS3</title> 
    <style> 
        div
        {
        width:100px;
        height:100px;
        background:blue;
        position:relative;
        animation:mymove 5s infinite;
        -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
        }
        
        @keyframes mymove
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
        
        @-webkit-keyframes mymove /* Safari and Chrome */
        {
        0%   {top:0px; background:blue; width:100px;}
        100% {top:200px; background:yellow; width:300px;}
        }
    </style>
</head>
<body>

<p><strong>注重:</strong> @keyframes 划定规矩不兼容 IE 9 以及更早版本的浏览器.</p>

<div></div>

</body>
</html>

以上就是应用css3动画须要应用什么划定规矩的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"应用css3动画须要应用什么划定规矩【css教程】,css3"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线