20190404-transition、transform转换、animation、媒体查询
目录
1、transition过渡
1.1简写：transiton：transition-property | transition-duration | transition-timing-function | transition-delay
1.2transition-poperty(过渡属性)：all | none | property；
1.3transition-duration(过渡持续时间)：0 | time；
1.4transition-timing-function(过渡时间函数)：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（Bézier curve）；
1.5transition-delay(过渡延迟)：0 | time；
2、transform转换
2.1transform(转换)：none | transform-functions；
2.2translate(平移)：translate（x，y）| translate3d（x，y，z）；
2.3scale(缩放)：scale（x，y）| scale3d（x，y，z）；
2.4rotate(旋转)：rotate（angle）| rotate3d（x，y，z，angle）；
2.5skew(倾斜)：skew（x-angle | y-angle）；
2.6perspective(n)(景深)：代表眼睛与元素原点的距离，用于确定元素透视灭点位置。其属性值越大，元素的变形越小，灭点与元素的距离越大
3、animation动画
3.1简写：animation：animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode；
3.2animation-name(动画名称)：keyframesname | none；
3.3animation-duration(动画持续时间)：0 | time；
3.4animation-timing-funtion(动画时间函数)：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（Bézier curve）| steps（count | start | end）；
3.5animation-delay(动画延迟时间)：0 | time；
3.6animation-iteration-count(动画重复次数)：n | infinite；
3.7animation-direction(轮流反向播放)：normal | alternate；
3.8animation-paly-state(动画正在运行或暂停)：paused | running；
3.9animation-fill-mode(动画最后一帧)：none | forwards | backwards | both；
4、媒体查询
4.1概念：用于实现响应式设计，针对不同的媒体类型定义不同的样式
4.2引入方法
4.2.1link元素：<link rel="stylesheet" media="mediatype logical operator(media feature)" href="index.css"/>(增加页面http的请求次数)
4.2.2css样式表：@media mediatype logical operator(media feature) {CSS Code }
4.3媒体类型（mediatype）
4.4逻辑操作符（logical operator）
4.5媒体属性（media feature）
内容
1、transition过渡
1.1简写：transiton：transition-property | transition-duration | transition-timing-function | transition-delay
1.2transition-poperty(过渡属性)：all | none | property；
1.3transition-duration(过渡持续时间)：0 | time；
1.4transition-timing-function(过渡时间函数)：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(Bézier curve)；
1.5transition-delay(过渡延迟)：0 | time；
2、transform转换
2.1transform(转换)：none | transform-functions；
2.2matrix(矩阵)：matrix(n,n,n,n,n,n) | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)；
2.3translate(平移)：translate（x，y）| translate3d（x，y，z）；
CSS Code
div.box{ width: 100px; height: 100px; background: olive; transform: translateX(50px); }
HTML Code
<div class="box">这是一个测试box</div>
Result
2.4scale(缩放)：scale（x，y）| scale3d（x，y，z）；
CSS Code
div.box{ margin: 300px; width: 100px; height: 100px; background: olive; transform: scale(1.5);
transform:scale(0.5); }
HTML Code不变
Result
2.5rotate(旋转)：rotate（angle）| rotate3d（x，y，z，angle）；
CSS Code
transform: rotate(45deg);
HTML Code不变
Result
2.6skew(倾斜)：skew（x-angle | y-angle）；
CSS Code
transform: skewX(45deg);
HTML Code不变
Result
2.7perspective(n)(景深、透视)：代表眼睛与元素原点的距离，用于确定元素透视灭点位置。其属性值越大，元素的变形越小，灭点与元素的距离越大
2.7.1透视：分单点透视、两点透视、三点透视
2.7.2灭点：指立体图形各条边的延伸线所产生的相交点，透视点的消失点
如：一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！！
2.7.3translateZ帮忙理解透视
对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。
https://www.zhangxinxu.com/study/201209/transform-perspective-translateZ.html
2.7.4perspective的两种写法
一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。
.stage {
perspective: 600px;
}
以及：
#stage .box {
transform: perspective(600px) rotateY(45deg);
}
多个元素下两种书写的对比
2.7.5perspective-origin：默认就是所看舞台或元素的中心
perspective-origin：25% 75%;
2.8transform-style(开启3d舞台)：flat | preserve-3d；
2.9backface-visibility(隐藏透视后元素，如上图橘黄色)：visible | hidden；
2.0各种demo：
参考文献：https://www.cnblogs.com/yangyang63963/p/5859913.html?utm_source=itdadao&utm_medium=referral
3、animation动画
3.1简写：animation：animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode；
可以使用多个动画，用逗号隔开，用于同个元素使用不同属性进行不同帧的动画
3.2animation-name(动画名称)：keyframesname | none；
3.3animation-duration(动画持续时间)：0 | time；
3.4animation-timing-funtion(动画时间函数)：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier（Bézier curve）| steps（count | start | end）；
3.4.1贝塞尔曲线可视化
3.4.2帧动画steps
3.4.2.1除了steps之外的过渡函数会为其插入补间，但有些效果只需要关键帧之间的跳跃，类似于手翻书动画，则可使用steps（）
3.4.2.2steps函数指定一个阶跃函数，第一个参数指定了时间函数中的间隔数量（必须是正整数），第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end
3.4.2.3step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；
3.4.2.4step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end
3.4.2.5steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，而不是keyframes写的变化次数，其工作机制如下图
如：steps(5，start）中的5，是0%-25%之间变化五次，而不是指的keyframes中的0% 25% 50% 75% 100% 分成5个间隔等分
3.4.2.6在使用定位平移背景图使其水平运动时，需正向即从左到右进行平移，而不能倒置从右到左，否则会产生类似跳频的效果。
参考文献：http://www.cnblogs.com/aaronjs/p/4642015.html#undefined
3.5animation-delay(动画延迟时间)：0 | time；
3.6animation-iteration-count(动画重复次数)：n | infinite；
3.7animation-direction(轮流反向播放)：normal | alternate；
要求animation-iteration-count大于2
3.8animation-paly-state(动画正在运行或暂停)：paused | running；
3.9animation-fill-mode(动画最后一帧)：none | forwards | backwards | both；
案例demo
3-1丝带导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ background: olive; } nav{ position: relative; display: flex; margin: 30px auto; width: 380px; height: 48px; /*background: olive;*/ } nav:before,nav:after{ content: ""; display: inline-block; width: 0px; height: 0px; border-top: 24px solid #fff; border-bottom: 24px solid #fff; } nav:before{ position: absolute; left: -48px; border-left: 24px solid olive; border-right: 24px solid #fff; } nav:after{ position: absolute; right: -48px; border-right: 24px solid olive; border-left: 24px solid #fff; } nav a span{ position: relative; display: inline-block; width: 95px; height: 48px; vertical-align: 48px; text-decoration: none; color: #000; background: #fff; text-align: center; line-height: 48px; } nav a span:before,nav a span:after{ display: none; position: absolute; bottom: -8px; content: ""; width: 0px; height: 0px; border-top: 4px solid #9B8651; border-bottom: 4px solid #fff; } nav a span:before{ left: 0px; border-right: 4px solid #9B8651; border-left: 4px solid #fff; } nav a span:after{ right: 0px; border-right: 4px solid #fff; border-left: 4px solid #9B8651; } nav a:hover > span{ transform: translateY(-8px); background: #FFD204; transform: all 2s linear; } nav a:hover > span:before,nav a:hover > span:after{ display: block; } </style> </head> <body> <nav> <a href="#" class="navlist"><span>HTML</span></a> <a href="#" class="navlist"><span>CSS</span></a> <a href="#" class="navlist"><span>JavaScript</span></a> <a href="#" class="navlist"><span>Ajax</span></a> </nav> </body> </html>
3-2闪过效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flicker</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body{ margin: 100px; background: olive; } div.flicker,div.flicker-words{ position: relative; overflow: hidden; width: 300px; height: 100px; background: repeating-linear-gradient(to bottom right,#3B50D0,#32436A 20%,#3B50D0 50%); border-radius: 10px; text-align: center; line-height: 100px; } div.flicker:before{ position: absolute; left: -330px; content: ""; display: inline-block; width: 300px; height: 100px; background: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); transform: skewX(25deg); } div.flicker-words span{ text-align: center; /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变，也可以用下面的那种写法。left top，right top指的是渐变方向，左上到右上 */ /* color-stop函数，第一个表示渐变的位置，0为起点，0.5为中点，1为结束点；第二个表示该点的颜色。所以本次渐变为两边灰色，中间渐白色 */ background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); /* 新式写法 */ /* background: -webkit-linear-gradient(left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, white), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d)); */ /* 设置为text，意思是把文本内容之外的背景给裁剪掉 */ -webkit-background-clip: text; /* 设置对象中的文字填充颜色 这里设置为透明 */ -webkit-text-fill-color: transparent; /* 每隔2秒调用下面的CSS3动画 infinite属性为循环执行animate */ -webkit-animation: animate 1.5s infinite; } @-webkit-keyframes animate { /* 背景从-100px的水平位置，移动到+100px的水平位置。如果要移动Y轴的，设置第二个数值 */ from {background-position: -100px;} to {background-position: 100px;} } @keyframes animate { from {background-position: -100px;} to {background-position: 100px;} } div.flicker:hover:before{ left: 600px; transition: 1s; } div.flicker-img{ position: relative; width: 198px; overflow: hidden; } div.flicker-img:before{ position: absolute; left: -198px; content: ""; display: inline-block; width: 198px; height: 170px; background: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); } div.flicker-img:hover:before{ left: 400px; transition: 1s; } </style> </head> <body> <!-- img --> <div class="flicker-img"> <img src="images/flicker.jpg" alt=""></div> <!-- div --> <div class="flicker"></div> <!-- words --> <div class="flicker-words"><span>我是一闪而过的Flicker</span></div> </body> </html>
3-3小米悬停及评论上浮
4、媒体查询
4.1概念：用于实现响应式设计，针对不同的媒体类型定义不同的样式
4.2引入方法
4.2.1link元素：<link rel="stylesheet" media="mediatype logical operator(media feature)" href="index.css"/>(增加页面http的请求次数)
4.2.2css样式表：@media mediatype logical operator(media feature) {CSS Code }
4.3媒体类型（mediatype）
4.3.1all：用于所有设备
4.3.2print：用于打印机和打印预览
4.3.3screen：用于电脑屏幕、平板电脑、智能手机等
4.3.4speech：用于屏幕阅读器等发声设备
4.4逻辑操作符（logical operator）
4.4.1and：多个媒体属性组合成一条媒体查询，只有当每个属性都为真时，则生效（常用）
4.4.2or或，：任一媒体查询返回真，则生效
4.4.3not：应用于整个媒体查询，在其为假时生效，在逗号媒体查询列表中not仅否定它应用到的媒体查询
4.4.4only：仅在媒体查询匹配成功时生效
4.5媒体属性（media feature）
4.5.1"min-"与"max-"，用于表达"小于等于"和"大于等于"，避免了使用html的"<"与">"冲突
4.5.2必须用括号（）包起来，否则无效
