[css]我要用css画幅画(五)
接着之前的[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如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Paint</title>
<link rel="stylesheet" type="text/css" href="../css/sun.css" />
<link rel="stylesheet" type="text/css" href="../css/house.css" />
<link rel="stylesheet" type="text/css" href="../css/human.css" />
<link rel="stylesheet" type="text/css" href="../css/cloud.css" /> <link rel="stylesheet" type="text/css" href="../css/human-animate.css" />
</head>
<body>
<div class="sun">
<div class="sun-body"></div>
<div class="sun-shine-light sun-shine-light1"></div>
<div class="sun-shine-light sun-shine-light2"></div>
<div class="sun-shine-light sun-shine-light3"></div>
<div class="sun-shine-light sun-shine-light4"></div>
<div class="sun-shine-light sun-shine-light5"></div>
</div> <div class="house-width house">
<div class="house-width house-roof house-roof-left"></div>
<div class="house-width house-roof house-roof-right"></div>
<div class="house-width house-wall">
<div class="house-wall-door">
<div class="house-wall-door-handle"></div>
</div>
</div>
</div> <div class="human human-pos-1">
<p class="lines human-speak">大家好，我叫小明。</p>
<p class="lines human-speak human-speak-delay-3">我是一个程序员，最喜欢宅在家里LOL。</p>
<p class="lines human-speak human-speak-delay-12">静静，我们交个朋友好吗？我的电话是13800123456。</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-normal"></div>
</div> <div class="human human-pos-2">
<p class="lines human-speak human-speak-delay-6">大家好，我叫静静</p>
<p class="lines human-speak human-speak-delay-9">和大家看到的一样，我热爱舞蹈。</p>
<p class="lines human-speak human-speak-delay-15">不要，程序员什么的最讨厌了！</p>
<div class="human-head-normal"></div>
<div class="human-body-normal"></div>
<div class="human-arms-normal"></div>
<div class="human-legs-1"></div>
</div> <div class="cloud cloud-pos cloud-pos-1">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div>
<div class="cloud cloud-pos cloud-pos-2">
<div class="cloud-pos cloud-border cloud-bg cloud-top"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-left"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-right"></div>
<div class="cloud-pos cloud-border cloud-bg cloud-bottom"></div>
</div>
</body>
</html>
我将所需的动画css放在独立的文件中：
.human-speak {
color: #fff;
float: left;
-webkit-animation-duration: 3s;
-webkit-animation-name: humanLineAppear;
}
.human-speak-delay-3 {
-webkit-animation-delay: 3s
}
.human-speak-delay-6 {
-webkit-animation-delay: 6s
}
.human-speak-delay-9 {
-webkit-animation-delay: 9s
}
.human-speak-delay-12 {
-webkit-animation-delay: 12s
}
.human-speak-delay-15 {
-webkit-animation-delay: 15s
}
@-webkit-keyframes humanLineAppear{
from{
top: -50px;
color: #fff;
}
20%{
top: -40px;
color: #000;
z-index:;
}
80%{
top: -40px;
color: #000;
z-index:;
}
to{
top: -50px;
color: #fff;
z-index:;
}
}
human-animate.css
这里用到的陌生的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： 用于指定使用的动画规则名称（用@keyframes声明的规则）。 默认值为none。可以设置多个规则，以逗号分隔。
4.@keyframes：这是一个关键字， 中文翻译是“关键帧”。 开头的“@”符号是必须的，加上浏览器前缀时应该写成： @-webkit-keyframes yourKeyframesName， 其中yourKeyframesName是你的关键帧名称。
该关键字用于声明动画规则，也可以看作一个特殊的选择器。 有点类似js中用于声明函数的function关键字。 语法类似如下：（示例中增加了-wekit-前缀）
@-webkit-keyframes humanLineAppear{
from{
top: -50px;
color: #fff;
}
20%{
top: -40px;
color: #000;
z-index:;
}
80%{
top: -40px;
color: #000;
z-index:;
}
to{
top: -50px;
color: #fff;
z-index:;
}
}
关键帧的语法如上，关键帧内部以类似选择器的方式书写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设置的缓动函数进行变化，这个属性还没研究过，以后有机会再讨论。
--------------------------------------------------------------------------- 我是突兀的分割线 ---------------------------------------------------------------------------
要让一个动画生效， 以下3个条件必须满足：
1. animation-name需要指向一个有效的用@keyframes声明的关键帧 ， 表示动画有一个有效的动画规则。
2. animation-duration大于0s， 表示动画会有大于0秒的执行时间。
3. animation-iteration-count大于0， 表示动画至少会执行1次。（该属性默认值是1，所以一般不用设置就可以）
好了，现在你应该也可以写一个属于自己的简单动画了。
今天就到这里， 谢谢观看。 如有错误，欢迎指正。
[css]我要用css画幅画(五)的更多相关文章
- [css]我要用css画幅画(六)
接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- [css]我要用css画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- [css]我要用css画幅画(二)
接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...
- [css]我要用css画幅画(一)
几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
随机推荐
- SQL Server 隐式转换引发的躺枪死锁-程序员需知
在SQL Server的应用开发过程(尤其是二次开发)中可能由于开发人员对表的结构不够了解,造成开发过程中使用了不合理的方式造成数据库引擎未按预定执行,以致影响业务.这是非常值得注意的.这次为大家介绍 ...
- 关于IE6的PNG图像透明使用AlphaImageLoader的缺点
PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景.而目前的解决方案就是 IE提供的滤镜.需要注意的是滤镜并不是对原图片进行修改,而是对相应的html元素进行 修改.所以在一个html ...
- opendaylight的Beryllium安装
1.首先安装jdk #sudo apt-get install openjdk-7-jdk 2.安装vim编辑工具 #sudo apt-get install vim 3.编辑~/.bashrc ...
- web前端学习随笔
为什么是随笔 好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随 ...
- Extjs4.0以上版本 Ext.Ajax.request请求的返回问题
Ext.Ajax.request({ url: posturl, method: 'POST', params: { ClassName: 'XXXX', FuncName: 'XXXX', para ...
- iOS-重回block小白之路
在我刚刚接触iOS开发的时候,是通过MJ老师讲的OC基础入门的,iOS圈的人应该基本都知道MJ大神吧,即便如此大神,讲解完block之后我依然感觉晕晕乎乎的,直到后来真正进公司做项目,依然感觉这是自己 ...
- Matches正则使用提取内容
用VS新建WinForm程序,窗体上是三个文本框和一个按钮.可以自己构造正则表达式,自己修改匹配内容 正则表达是要提取的部分为hewenqitext 代码如下: using System; using ...
- Web 上传图片加水印
上传图片加水印 需要使用控件FileUpload 上传按钮Image控件展示上传的图片,页面中拖入三个控件 <form id="form1" runat="serv ...
- 【C#进阶系列】30 学习总结
前面学起来还是很顺的,毕竟很多都接触过. 后面学起来只能用“磨”来形容,以至于八章用了2个月.(当然也有相当一些原因是这两个月中发生了一些个人生活上的问题) 总的来说收获超大,这种感觉就像大一的时候学 ...
- 使用AOP+Annotation实现操作日志记录
先创建注解 OperInfo @Target({ElementType.TYPE, ElementType.METHOD}) @Retention(RetentionPolicy.RUNTIME) @ ...