[css]我要用css画幅画(五)

[css]我要用css画幅画(五),第1张

概述接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果。github:https://github.com/bee0060/Css-Paint, 完整代码在p

接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果。

 

github:https://github.com/bee0060/Css-Paint , 完整代码在pages/sun-house-5.HTML和相关的CSS中可以找到

demo: http://bee0060.github.io/Css-Paint/pages/sun-house/sun-house-5.html

 

完整HTML如下:

 1@H_301_22@ <!@H_301_22@DOCTYPE HTML@H_301_22@>@H_301_22@ 2@H_301_22@ <@H_301_22@HTML @H_301_22@lang@H_301_22@="en"@H_301_22@ 3@H_301_22@ head@H_301_22@ 4@H_301_22@     Meta @H_301_22@charset@H_301_22@="UTF-8"@H_301_22@ 5@H_301_22@     Title@H_301_22@>@H_301_22@CSS Paint</@H_301_22@ 6@H_301_22@     link @H_301_22@rel@H_301_22@="stylesheet"@H_301_22@ type@H_301_22@="text/CSS"@H_301_22@ href@H_301_22@="../CSS/sun.CSS"@H_301_22@ />@H_301_22@ 7@H_301_22@     ="../CSS/house.CSS"@H_301_22@  8@H_301_22@     ="../CSS/human.CSS"@H_301_22@  9@H_301_22@     ="../CSS/cloud.CSS"@H_301_22@ 10@H_301_22@ 11@H_301_22@     ="../CSS/human-animate.CSS"@H_301_22@ 12@H_301_22@ 13@H_301_22@ body@H_301_22@14@H_301_22@     div @H_301_22@class@H_301_22@="sun"@H_301_22@15@H_301_22@         ="sun-body"@H_301_22@></@H_301_22@div@H_301_22@16@H_301_22@         ="sun-shine-light sun-shine-light1"@H_301_22@17@H_301_22@         ="sun-shine-light sun-shine-light2"@H_301_22@18@H_301_22@         ="sun-shine-light sun-shine-light3"@H_301_22@19@H_301_22@         ="sun-shine-light sun-shine-light4"@H_301_22@20@H_301_22@         ="sun-shine-light sun-shine-light5"@H_301_22@21@H_301_22@     22@H_301_22@ 23@H_301_22@     ="house-wIDth house"@H_301_22@24@H_301_22@         ="house-wIDth house-roof house-roof-left"@H_301_22@25@H_301_22@         ="house-wIDth house-roof house-roof-right"@H_301_22@26@H_301_22@         ="house-wIDth house-wall"@H_301_22@>@H_301_22@            27@H_301_22@             ="house-wall-door"@H_301_22@>@H_301_22@                28@H_301_22@                 ="house-wall-door-handle"@H_301_22@29@H_301_22@             30@H_301_22@         31@H_301_22@     32@H_301_22@ 33@H_301_22@     ="human human-pos-1"@H_301_22@34@H_301_22@         p @H_301_22@="lines human-speak"@H_301_22@>@H_301_22@大家好,我叫小明。p@H_301_22@35@H_301_22@         ="lines human-speak human-speak-delay-3"@H_301_22@>@H_301_22@我是一个程序员,最喜欢宅在家里Lol。36@H_301_22@         ="lines human-speak human-speak-delay-12"@H_301_22@>@H_301_22@静静,我们交个朋友好吗?我的电话是13800123456。37@H_301_22@         ="human-head-normal"@H_301_22@38@H_301_22@         ="human-body-normal"@H_301_22@39@H_301_22@         ="human-arms-normal"@H_301_22@40@H_301_22@         ="human-legs-normal"@H_301_22@41@H_301_22@     42@H_301_22@ 43@H_301_22@     ="human human-pos-2"@H_301_22@44@H_301_22@         ="lines human-speak human-speak-delay-6"@H_301_22@>@H_301_22@大家好,我叫静静45@H_301_22@         ="lines human-speak human-speak-delay-9"@H_301_22@>@H_301_22@和大家看到的一样,我热爱舞蹈。46@H_301_22@         ="lines human-speak human-speak-delay-15"@H_301_22@>@H_301_22@不要,程序员什么的最讨厌了!47@H_301_22@         48@H_301_22@         49@H_301_22@         50@H_301_22@         ="human-legs-1"@H_301_22@51@H_301_22@     52@H_301_22@ 53@H_301_22@     ="cloud cloud-pos cloud-pos-1"@H_301_22@54@H_301_22@         ="cloud-pos cloud-border cloud-bg cloud-top"@H_301_22@55@H_301_22@         ="cloud-pos cloud-border cloud-bg cloud-left"@H_301_22@56@H_301_22@         ="cloud-pos cloud-border cloud-bg cloud-right"@H_301_22@57@H_301_22@         ="cloud-pos cloud-border cloud-bg cloud-bottom"@H_301_22@58@H_301_22@     59@H_301_22@     ="cloud cloud-pos cloud-pos-2"@H_301_22@60@H_301_22@         61@H_301_22@         62@H_301_22@         63@H_301_22@         64@H_301_22@     65@H_301_22@ 66@H_301_22@ HTML@H_301_22@>@H_301_22@
VIEw Code@H_301_22@

 

我将所需的动画CSS放在独立的文件中:

 1@H_301_22@ .human-speak @H_301_22@{ 2@H_301_22@     color@H_301_22@: #fff@H_301_22@; 3@H_301_22@     float@H_301_22@: left@H_301_22@; 4@H_301_22@     -webkit-animation-duration@H_301_22@: 3s@H_301_22@; 5@H_301_22@       -webkit-animation-name@H_301_22@: humanlineAppear@H_301_22@; 6@H_301_22@ }  7@H_301_22@  8@H_301_22@ .human-speak-delay-3 @H_301_22@{ 9@H_301_22@     -webkit-animation-delay@H_301_22@: 3s@H_301_22@10@H_301_22@ }11@H_301_22@ 12@H_301_22@ .human-speak-delay-6 @H_301_22@{13@H_301_22@  6s@H_301_22@14@H_301_22@ }15@H_301_22@ 16@H_301_22@ .human-speak-delay-9 @H_301_22@{17@H_301_22@  9s@H_301_22@18@H_301_22@ }19@H_301_22@ 20@H_301_22@ .human-speak-delay-12 @H_301_22@{21@H_301_22@  12s@H_301_22@22@H_301_22@ }23@H_301_22@ 24@H_301_22@ .human-speak-delay-15 @H_301_22@{25@H_301_22@  15s@H_301_22@26@H_301_22@ }27@H_301_22@ 28@H_301_22@ @-webkit-keyframes humanlineAppear@H_301_22@{29@H_301_22@     from{@H_301_22@30@H_301_22@         top@H_301_22@: -50px@H_301_22@;31@H_301_22@         color@H_301_22@:32@H_301_22@     }33@H_301_22@     20%@H_301_22@{34@H_301_22@  -40px@H_301_22@;35@H_301_22@  #000@H_301_22@;36@H_301_22@         z-index@H_301_22@:10@H_301_22@;37@H_301_22@     }38@H_301_22@     80%@H_301_22@{39@H_301_22@ 40@H_301_22@ 41@H_301_22@ 42@H_301_22@     }43@H_301_22@     to@H_301_22@{44@H_301_22@ 45@H_301_22@ 46@H_301_22@ 1@H_301_22@;47@H_301_22@     }48@H_301_22@ }@H_301_22@
human-animate.CSS@H_301_22@

 

这里用到的陌生的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不同,下面再说。

 @H_301_22@

1.animation-duration: 指定整个动画执行所需的时间, 接受time格式的值,即必须是数字+单位的格式, 单位可以是s(秒)或ms(毫秒),默认值为0s。

2.animation-delay: 指动画延迟执行的时间,即对象加载完毕到开始执行动画之间的时间,接受的时间格式也是时间,默认值为0s。

3.animation-name: 用于指定使用的动画规则名称(用@keyframes声明的规则)。 默认值为none。可以设置多个规则,以逗号分隔。

4.@keyframes:这是一个关键字, 中文翻译是“关键帧”。 开头的“@”符号是必须的,加上浏览器前缀时应该写成: @-webkit-keyframes yourKeyframesname, 其中yourKeyframesname是你的关键帧名称。

        该关键字用于声明动画规则,也可以看作一个特殊的选择器。 有点类似Js中用于声明函数的function关键字。 语法类似如下:(示例中增加了-wekit-前缀)

 5@H_301_22@     } 6@H_301_22@  7@H_301_22@  8@H_301_22@ 10@H_301_22@     }11@H_301_22@ 12@H_301_22@ 14@H_301_22@ 15@H_301_22@     }18@H_301_22@ 19@H_301_22@ 20@H_301_22@     }21@H_301_22@ }@H_301_22@

关键帧的语法如上,关键帧内部以类似选择器的方式书写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属性会在帧区间内,从开始帧指定的属性值增加或减少至结束帧指定的属性值, 改变速度根据animation-timing-function设置的缓动函数进行@H_301_22@变化,这个属性还没研究过,以后有机会再讨论。

 

---------------------------------------------------------------------------  我是突兀的分割线  ---------------------------------------------------------------------------

 

要让一个动画生效, 以下3个条件必须满足:@H_301_22@

1. animation-name需要指向一个有效的用@keyframes声明的关键帧 , 表示动画有一个有效的动画规则。

2. animation-duration大于0s, 表示动画会有大于0秒的执行时间。

3. animation-iteration-count大于0, 表示动画至少会执行1次。(该属性默认值是1,所以一般不用设置就可以) 

 

好了,现在你应该也可以写一个属于自己的简单动画了。

 

今天就到这里, 谢谢观看。 如有错误,欢迎指正。

 

总结

以上是内存溢出为你收集整理的[css]我要用css画幅画(五)全部内容,希望文章能够帮你解决[css]我要用css画幅画(五)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1015450.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存