2018-11-27第九天总结
一、 动画
网页动画可以通过以下几种方式实现（gif、flash 除外），
css3 动画
SVG 动画
JS 动画（包括 css、SVG 的属性修改实现的动画）
最早 JS 通过 setTimeout() 或者 setInterval() 方法设置一个时间，
来控制帧与帧之间的时间间隔。
setTimeout() 直接用跳出来终止下一帧。
setInterval() 使用 clearInterval() 来取消周期执行。
但是这样效果可能不够流畅，且会占用额外的资源。
后来，有了一个requestAnimationFrame()，让浏览器决定最优帧速率、选择绘制下一帧的最佳时机。
requestAnimationFrame() 用 cancelAnimationFrame() 来结束。
css3 动画
能够执行补间状态的条件是，属性值能够转换成数值，这样就能参与运算。如：
颜色（color,background-color,border-color…）
长度/大小（width,height,font-size,border-width,border-radius…）
透明度（opacity）
堆叠顺序（z-index）你吖补间它有毛用
而不能参与运算就意味着不能拿来补间状态，也就是没有中间状态，如：
position（absolute、fixed、relative…）
background-image（一个确定的 url）
…
一拍脑门就能想到，创建一个补间动画的条件有：
开始状态
结束状态
执行时间
补间效果
假如有个方块，宽度从 10px 变成 100px。
开始状态呢，在原 css 里就可以定义了 width: 10px。
结束状态呢，我们可以通过用 JS 直接修改 width 值，或者增加一个 class 选择器的方式，
或者是 :hover 等其他表示状态的伪类，让 width: 100px。
而这时，你需要一个补间动画属性来声明 执行时间 和 补间效果，
它就是 transition，中文译作 过渡，就是我所说的补间的意思。
transition 为以下属性的简写
transition-property 规定哪个属性应用过渡
transition-duration 执行时间
transition-timing-function 补间效果，默认为 ease
transition-delay 延迟多少时间开始
css3 还提供了一个 animation 属性来创建更丰富的自定义动画，而减少 JS 的介入。
比如：
你想一个动画中拥有多个状态
每个状态修改的属性值较多
循环播放
逆向播放
可自动开始，可中途暂停
animation 和 @keyframes 配合使用。
@keyframes 用来定义动画，animation 则可以多处应用，他们通过一个 name 来连接彼此，
因此 @keyframes 必须要起个名字，而 animation 则有个 animation-name。
animation 在应用时，你可以自定义它：
animation-duration 执行时间
animation-time-function 补间效果，默认是 ease
animation-delay 延迟多少时间开始
animation-iteration-count 循环播放次数
animation-direction 是否在下一周期逆向播放
animation-play-state 动画是否暂停，通过它，可以实现是否自动播放。要中途暂停的话，就要修改值，通过伪类或 JS 实现
animation-fill-mode 这个属性倒是有点出乎意料之外，请自行研究使用场景
可见 w3c 规范制定者们考虑到我们要用起来简单呢，基本上和我们思维方式一致。
实现动画的多个状态是在 @keyframes 定义时完成的。
采用 0%~100% 的分割方式，我们就不用在 执行时间 之外考虑时间问题了。
SVG 动画
css3 动画属性只管得住自己的 css 属性，SVG 绘制的图形，还得 SVG 自己解决。而对于 SVG 的 css 样式，一般两种皆可。
SVG 大大们的思维方式就有点绕了，竟然提供了 5 种动画 标签让我选择：
set 相当于 animate 的 calcMode="discrete"，忽略
animate
animateColor 相当于 animate 的 attributeName="color"，忽略
animateTransform
animateMotion
我们先来看看和 css3 最像的 animate 标签，拥有的属性有
attributeName 规定哪个属性应用过渡
from 开始状态
to/by 结束状态，至少出现一个
values 多个状态时，忽略 from/to/by
begin 延迟多少时间开始
dur 执行时间
calcMode,keyTimes,keySplines 自定义补间效果
repeatCount,repeatDur 循环播放次数/持续时间
…
animateTransform 主要是为了 attributeName="transform"，
跟 css3 动画结合 transform 变换类似，多了一个 type="scale" 属性用来区分相关参数。
animateMotion 是 SVG 甩 css3 动画一条街的强大技能，可以让SVG各种图形沿着特定的 path 路径运动。
SVG 动画比 css 动画更强大，所以也更复杂。
细分成这 5 类标签，大概是性能考虑，人工简单区分一下数值、颜色、变换，可以为计算机省去大量的无用运算。
CSS3动画的实现
1.transform 变形
.div{
transform:translate(x,y);
}
.div{
transform:scale(x,y);//xy方向倍数
}
.div{
transform:rptate(-30deg);//角度
}
.div{
transform:skew(x,y);//xy方向倾斜角度
}
2.transition 过渡
transition: width 3s ease(快-慢-快)/linear(线性匀速)/ease in(慢-快)/ease out(快-慢)
3.animation 动画
@keyframes 自定义名称{
from/to/百分百{
样式属性：样式；
}
}
二、圆角
CSS3 使用border-radius属性设置圆角效果
该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为：
none，默认值，表示元素没有圆角效果
length，由浮点数字和单位标识组成的长度值
%，由百分比设置的圆角值
该属性可以分别设置元素的四个圆角效果，采用下列格式来实现。
格式：border-radius: 左上角 右上角 右下角 左下角;
通常，四个方向的角半径均采用length取值来实现，该取值必须为浮点数字和单位标识共同组成。同时规定，该取值不得取负数。
例1：利用整数来实现圆角取值。
div{
width: 200px; height: 150px;
border: solid 1px #aaaaaa;
border-radius: 10px 5px 10px 5px;
background-color: #ff5857;
}
上述实例设置了一个div块级元素，其宽度为200px，高度为150px。为了能够看到其圆角效果，增加了颜色为#ff5857的背景颜色，并且添加了1px大小的边框，其边框为实线，边框颜色为#aaaaaa。最后设置其圆角效果，左上角和右下角均为10px，右上角和左下角均为5px。
三、图片文字遮罩
1.给图片动态添加半透明遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
width:425px;
height:283px;
position: relative;
overflow:hidden;
}
demo img{
width:100%;
}
.demo i{
position:absolute;
top:0;
width:100%;
height:100%;
background-color: rgba(251,251,251,0);
transition: background-color 0.5s;
}
.demo:hover i{
background-color: rgba(251,251,251,0.3);
}
</style>
</head>
<body>
<p class="demo">
<img src="2.jpg">
<i></i>
</p>
</body>
</html>
2.文字遮罩效果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="share.css">
</head>
<body>
<div class="dark"> <h1>IMAGES</h1> </div>
</body>
</html>
css代码
.dark h1 {
margin: 0;
font-size: 18vw;
text-transform: uppercase;
font-family: Montserrat, sans-serif;
line-height: 2.5;
color: #000000;
background: #ffffff;
}
.dark {
text-align: center;
background-size: cover;
background-image: url(timg3.jpg);
}
.dark h1 { mix-blend-mode: lighten; }
