[css]我要用css画幅画(五)_html/css_WEB-ITnose
github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-4.html和相关的css中可以找到
demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-5.html
完整html如下:
1 2 3 4 5Css Paint 6 7 8 9 10 11 12 13 1415 16 17 18 19 20 2122 2324 25 2632 33273128 29303442 43大家好,我叫小明。
35我是一个程序员,最喜欢宅在家里LOL。
36静静,我们交个朋友好吗?我的电话是13800123456。
37 38 39 40 414452 53大家好,我叫静静
45和大家看到的一样,我热爱舞蹈。
46不要,程序员什么的最讨厌了!
47 48 49 50 5154 55 56 57 585960 61 62 63 6465 66
我将所需的动画css放在独立的文件中:
1 .human-speak { 2 color: #fff; 3 float: left; 4 -webkit-animation-duration: 3s; 5 -webkit-animation-name: humanLineAppear; 6 } 7 8 .human-speak-delay-3 { 9 -webkit-animation-delay: 3s10 }11 12 .human-speak-delay-6 {13 -webkit-animation-delay: 6s14 }15 16 .human-speak-delay-9 {17 -webkit-animation-delay: 9s18 }19 20 .human-speak-delay-12 {21 -webkit-animation-delay: 12s22 }23 24 .human-speak-delay-15 {25 -webkit-animation-delay: 15s26 }27 28 @-webkit-keyframes humanLineAppear{29 from{30 top: -50px;31 color: #fff;32 }33 20%{34 top: -40px;35 color: #000;36 z-index:10;37 }38 80%{39 top: -40px;40 color: #000;41 z-index:10;42 }43 to{44 top: -50px;45 color: #fff;46 z-index:1;47 }48 }
这里用到的陌生的css属性或关键字包括:
1. -webkit-animation-duration
2.-webkit-animation-delay
3. -webkit-animation-name
4.@-webkit-keyframes
照例先上MDN文档地址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
动画系(animation属性及其子属性)的css在chrome中都需要加上浏览器前缀(-webkit-), 本以为前卫的chrome中不需要加前缀了,小小的遗憾了一把。下面的说明都把前缀省略。
以上1-3都是css属性,可以添加在css选择器中,或以内联属性的方式直接添加在标签的style属性中。
而第4个keyframes不同,下面再说。
1.animation-duration: 指定整个动画执行所需的时间, 接受time格式的值,即必须是数字+单位的格式, 单位可以是s(秒)或ms(毫秒),默认值为0s。
2.animation-delay: 指动画延迟执行的时间,即对象加载完毕到开始执行动画之间的时间,接受的时间格式也是时间,默认值为0s。
3.animation-name: 用于指定使用的动画规则名称。 默认值为none。
4.@keyframes:这是一个关键字, 中文翻译是“关键帧”。 开头的“@”符号是必须的,加上浏览器前缀时应该写成: @-webkit-keyframes yourKeyframesName, 其中yourKeyframesName是你的关键帧名称。
该关键字用于声明动画规则,也可以看作一个特殊的选择器。 有点类似js中用于声明函数的function关键字。 语法类似如下:(示例中增加了-wekit-前缀)
1 @-webkit-keyframes humanLineAppear{ 2 from{ 3 top: -50px; 4 color: #fff; 5 } 6 20%{ 7 top: -40px; 8 color: #000; 9 z-index:10;10 }11 80%{12 top: -40px;13 color: #000;14 z-index:10;15 }16 to{17 top: -50px;18 color: #fff;19 z-index:1;20 }21 }
关键帧的语法如上,关键帧内部以类似选择器的方式书写css属性,但是“选择器” 名字不再是id、className, 而是帧的描述, 或叫时间节点的描述,接受from,to或百分比数值。
其中from等同于0%, to等同于100%,
0%表示动画开始时刻, 100%表示结束时刻。 如果动画执行时间(animation-duration属性的值)是10s,那么50%表示第5秒这个时刻。
里面的每个百分比数值,都代表动画执行过程中的一个时间节点,我们暂称为: “帧”, 而帧的CSS属性集合,暂称为“帧选择器”。
帧选择器用于设置动画运行中某时间节点的css样式。
不同帧之间如果设置了相同的css属性名和不同的属性值,
浏览器会按照帧的时间顺序,针对这个CSS属性,找到属性值不同的最相邻的帧的组合(可能有多个帧的组合),以示例中的代码为例, 对于top属性会找到如下组合:
1. from(0%) --> 20% : top从-50px 变为-40px
2. 80% --> to(100%) : top从-40px 变为-50px
上面的帧组合都有开始和结束帧,且其中都包含至少一个CSS属性的改变,我们暂时称其为: “帧区间”。
浏览器在动画执行时, CSS属性会在帧区间内匀速的变化,即从开始帧指定的属性值匀速增加或减少至结束帧指定的属性值。
--------------------------------------------------------------------------- 我是突兀的分割线 ---------------------------------------------------------------------------
要让一个动画生效, 以下3个条件必须满足:
1. animation-name需要指向一个有效的用@keyframes声明的关键帧 , 表示动画有一个有效的动画规则。
2. animation-duration大于0s, 表示动画会有大于0秒的执行时间。
3. animation-iteration-count大于0, 表示动画至少会执行1次。(该属性默认值是1,所以一般不用设置就可以)
好了,现在你应该也可以写一个属于自己的简单动画了。
今天就到这里, 谢谢观看。 如有错误,欢迎指正。
上一篇: 完全css弹出菜单
下一篇: php静态文件生成类实例分析_php技巧
推荐阅读
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
谁用html5 canvas画过五角星啊_html/css_WEB-ITnose
-
为什么我的div与父div之间有距离?_html/css_WEB-ITnose
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
我的 Webpack 套装_html/css_WEB-ITnose
-
我的第一个html计算器_html/css_WEB-ITnose
-
帮我看一下我的网站字符编码设置的对吗_html/css_WEB-ITnose
-
【紧急】我想问一下HTML的TITLE标签,里面的内容能填写多少个?有限制吗_html/css_WEB-ITnose
-
帮我看一下我的网站字符编码设置的对吗_html/css_WEB-ITnose