css学习12：过渡、变化、动画、响应式布局

元素的动效

二十二、过渡

transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构成，分别是：过渡属性的名称，过渡需要的时间，过渡的方式和过渡的延迟时间。

1.过渡属性的名称

- `transition-property` 过渡样式

过渡一定是有变化都，在 css 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是`background-color`

- 当过渡多个样式的时候可以写 all

2.过渡需要的时间

- `transition-duration`如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。

- 过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s

3.过渡的方式

- `transition-timing-function`过渡方式,过渡方式的不同而在运动中改变速度

- 贝塞尔曲线函数是非常复杂`http://www.css3beziercurve.net/` 函数是非常复杂的，但是在

- css 中为我们封装了 5 种

- 默认值，先慢再快最后慢`transition-timing-function:ease;`

- 先慢，后越来越快`transition-timing-function:ease-in;`

- 速度在开始和结束时都很慢,中间不加速`transition-timing-function:ease-in-out;`

- 先快，后越来越慢`transition-timing-function:ease-out;`

- 匀速`transition-timing-function:linear;`

div {transition-property: all;transition-duration: 1s;/*默认值，先慢再快最后慢*/transition-timing-function: ease;/*先慢，后越来越快*/transition-timing-function: ease-in;/*速度在开始和结束时都很慢,中间不加速*/transition-timing-function: ease-in-out;/*先快，后越来越慢*/transition-timing-function: ease-out;/*匀速*/transition-timing-function: linear;
}

4.过渡的延迟时间

- 过渡的延迟时间 `transition-delay`在过渡效果开始作用之前需要等待的时间，值以秒（s）或毫秒（ms）为单位。

- 取值为正时会延迟一段时间来响应过渡效果；取值为负时会导致过渡立即开始。

5.简化写法

- 顺序是 transition：过渡时间延迟时间过渡方式过渡样式

- 注意“执行时间和延迟时间的顺序”不能改变

- 最简写法：transition：过渡时间；

CSS3 过渡动画模板、CSS3 Transition 动画模板 http://web.chacuo.net/css3transition

6.多重样式过渡

使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。

div {width: 100px;height: 100px;position: relative;background-color: red;left: 0;/* 注意第二个的延迟时间 */transition: 1s linear background-color, 1s 1s left;
}
body:hover div {left: 400px;background-color: blue;
}

二十六、变化

CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。

变换分为两种：2D（重点）和 3D，需要知道三个轴 xyz。

1.transform 变化属性

四个最常用的变化函数，分别是：

- translate 位移

- scale 缩放

- rotate 旋转

- skew 扭曲

2.translate()位移函数

translate()在变换中位移可以有 X 轴、 Y 轴、Z轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度和高度，正直或者负值均可。Z轴的位移只有在父元素具有透视的效果下才可以看到。

- `transform: translateX(x); ` 沿 X 轴方向平移正值右移负值左移

- `transform: translateY(y);` 沿 Y 轴方向平移正值下移负值上移

- `transform: translate(x, y);` 沿 X 轴和 Y 轴同时平移

- 注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局

元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要

.box div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

3.rotate()旋转函数

- rotate()函数在 2d 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。

- 参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。

- 旋转中心点，是元素最中心的点

4.scale()缩放函数

- scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小

- 1 以上的“正数”为当前大小的倍数。

- 1 以下 0 以上的“正数”为缩小的倍数。

- 0 倍为消失

- 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

5.skew()倾斜扭曲函数

- skew()在 2d 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度

- 填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。

- skew()默认为 X 轴倾斜函数

7.变换函数的执行顺序

当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个 transform 属性中，用空格分隔。但存在前后顺序问题。

用控制台改变旋转角度看效果 div:nth-child(1):hover {

transform: translateX(200px) rotate(60deg);

}

用控制台改变旋转角度看效果 div:nth-child(2):hover {

transform: rotate(60deg) translateX(200px);

}

8.基点

transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

- 在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

- transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。

- 当取值为长度值时，单位可以为 px、em 和百分比等。

9.透视效果

(1)透视

在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。

perspective 属性值越大，元素的变形就越小。

perspective 属性值越小，元素的变形就越大。

- perspective 属性定义透视距离，距离为长度单位

- 模拟人眼睛到 3D 变化元素之间的距离

- 【重点】透视距离只能定义在 3D 变化的父元素上

(2) transform-style

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

- 让盒子位于三维空间里transform-style: preserve-3d;

- 让子盒子位于此元素所在的平面内(默认)transform-style: flat;

(3)旋转函数 x 轴和 y 轴

2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。

- `transform:rotateX(deg);`x 轴旋转

- `transform:rotateY(deg);`y 轴旋转

(4)位移函数 z 轴

3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。

transform: translateZ(正值) 沿z轴向前（接近模拟视觉的距离）
transform: translateZ(负值) 沿z轴向前（远离模拟视觉的距离）

【练习】

让扑克牌旋转起来具有正反两个面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><style>.box {width: 300px;height: 300px;border: 1px solid black;margin: auto;perspective: 300px;}.box:hover .pk {transform: rotateY(360deg);}.pk {border: 1px solid blue;width: 205px;height: 289px;margin: auto; position: relative;transition: 3s;transform-style: preserve-3d;}.pk>div {width: 205px;height: 289px;position: absolute;}.a {background-image: url(./扑克a.jpg);}.b {background-image: url(./扑克b.jpg);transform: translateZ(-1px) scaleY(-1);}</style>
</head>
<body><!-- 205*289 --><div class="box"><div class="pk"><div class="a"></div><div class="b"></div></div></div>
</body>
</html>

二十四、动画

动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js 来体现动画效果，因为动画是渲染式的。

1.关键帧

`@keyframes` 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

@keyframes move {

0% {transform: translate(0);}

100% {transform: translate(600px);}

}

2.动画名称

`animation-name`属性就是指定动画要使用哪一个关键帧。

div {width: 100px;height: 100px;background-color: red;/*这个元素使用关键帧*/animation-name: move;
}
@keyframes move {0% {transform: translate(0);}100% {transform: translate(600px);}
}

3.动画持续时间

`animation-duration`属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。

div {/*这个元素使用关键帧*/animation-name: move;/* 动画时长 */animation-duration: 1s;
}
@keyframes move {0% {transform: translate(0);}100% {transform: translate(600px);}
}

4.动画的运动方式

`animation-timing-function`属性跟`transition-timing-function`属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。

- ease;默认

- ease-in;

- ease-out;

- ease-in-out;

- linear;

- steps(数值, 定位) 定位：start/end 默认 end 指逐步运动

【练习】

> 使用 steps()函数完成，逐帧完成动画效果

> loding 图标分为四段和八段完成帧动画

div {width: 30px;height: 30px;margin: 20px auto;animation-name: zhuan;animation-duration: 1s;
}
@keyframes zhuan {0% { transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
.a1 {animation-timing-function: linear;
} /*平滑的旋转*/
.b1 {animation-timing-function: linear;
} /*平滑的旋转*/
.a2 {animation-timing-function: steps(4);
} /*断续旋转分4段*/
.b2 {animation-timing-function: steps(8);
} /*断续旋转分8段*/

5.动画的延迟时间

`animation-delay`属性动画的延迟时间和之前过渡的延迟时间一样使用

div {/*这个元素使用关键帧*/animation-name: move;/* 动画时长 */animation-duration: 1s;/* 运动方式 */animation-timing-function: linear;/* 动画延迟时间 */animation-delay: 2s;
}

6.结束状态

在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置

- `animation-fill-mode`:设置动画结束时盒子的状态

- 属性值：`forwards`保持动画结束后的状态

- 属性值：`backwards`动画结束后回到最初的状态

7.动画化执行顺序

animation-direction 属性是动画的执行顺序

- 属性值：normal 正向，默认值

- 属性值：reverse 反向

8.动画循环次数

- `animation-iteration-count`属性主要用来定义动画的播放次数。

- 其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。

- 如果取值为`infinite`，动画将会无限次的播放。

9.简写方式

- animation: 动画执行时间延迟时间执行关键帧名称运动方式运动次数结束状态;

- 最简方式 animation: 动画执行时间执行关键帧名称;

- 执行时间和延迟时间顺序不可调整

- `animation: 2s 3s move linear 1 forwards reverse;`

10.动画停止

- animation-play-state 属性规定动画是否正在运行或暂停。

- 属性值：running 运动的，默认值

- 属性值：paused 暂停的

.box:hover .hsl {

animation-play-state: running;

animation-play-state: paused;

background-color: blue;

}

【练习】

> 商城滚动态

> 使用商城的图片，文字尽量写两行以内，保持一致行数

> 鼠标移入滚动区域是停止滚动，移开恢复滚动

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>animation</title><style>@keyframes move{0%{transform: translateX(0);}100%{transform: translateX(-1000px);}}*{margin: 0;padding: 0;}ul{list-style: none;}.wai{width: 1000px;margin: auto;background-color: rgb(37, 202, 243);overflow: hidden;}.nei{width: 200%;display: flex;flex-wrap: wrap;animation:move 10s infinite linear;}.nei:hover{/* 鼠标移入让动画暂停 */animation-play-state: paused;}.nei li{width: 12.5%;text-align: center;}.nei li img{width: 60%;}</style>
</head>
<body><div class="wai"><ul class="nei"><li><img src="./img/recommend/recommend_img1.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img2.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img3.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img4.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img1.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img2.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img3.png" alt=""><p>联想xzp9886</p></li><li><img src="./img/recommend/recommend_img4.png" alt=""><p>联想xzp9886</p></li></ul></div>
</body>
</html>

11.开源 CSS 动画库

- animate.css 下载下载:http://www.animate.net.cn/

- 元素加入需要的类名

- 当前元素使用 animate 属性，属性值为类名和运行时间

- 需要在元素先加上 `animate__animated` 类，之后在加入其他类

<head><link rel="stylesheet" href="./animate.min.css" /><style>div {width: 200px;height: 100px;background-color: red;animation: 1s animate__rubberBand;}</style>
</head>
<body><div class="animate__rubberBand">元素</div><div class="animate__animated animate__shakeX" id="div2">自动调用</div>
</body>

二十五、响应式布局

1.多终端开发

- 现今需求从 pc 增加到移动端，移动端的发展迅速

- 多种规格的终端产生 pad，各种手机，手表，三维立体影像

- 用户在操作时的便捷，比如手机很小按钮的大小比例

2.响应式布局的产生

意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在多种终端上有更好的浏览阅读体验。（参考站长素材 https://sc.chinaz.com/moban/）

- 响应式也叫自适应网页，可以根据“浏览设备”的不同改变布局样式和文本及图片的效果。

- 同时要考虑，设备的屏幕横置等因素。

3.视口的设置

- 视口（viewport）可以理解为浏览器窗口，不包含浏览器的内容。使用视口约束浏览器大小，让内容区域完全展示在用户面前。

- 响应式和移动端页面必须设置视口，pc 看不出效果

`<meta name="viewport" content="属性名=属性值">`视口的设置通过 content 属性设置需要的值，如果 content 后面有多个属性，则属性与属性之间用英文逗号隔开

- width=device-width 视口宽度为设备宽度（device 设备）

- initial-scale=1.0 初始化视口不缩放

- maximum-scale=1.0 最大是缩放倍率（不缩放）

- user-scalable=0 用户不能缩放

- 简写方式`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

4.注意事项

- 多用流式布局（文档流+浮动）和弹性布局，少用定位

- 文本，图片，尺寸尽量写相对单位，少用绝对单位

- 复杂页面不适和使用适应响应式

5.媒体查询

- media 媒体类型，浏览网页的设备

- screen：pc/pad/phone

- TV

- print：打印机，部分手表，冰箱的显示屏等

- all：所有设别

- 屏幕尺寸（从 bootstrap 中遍历出来的，min-width）

- 超小屏幕 (max-width:576px)

- 小屏幕 (min-width: 576px) and (max-width: 768px)

- 中屏幕 (min-width: 768px) and (max-width: 992px)

- 大屏幕 (min-width: 992px) and (max-width: 1200px)

- 超大屏幕 (min-width: 1200px)

总结语法：

```css

@media 媒体类型 and (尺寸范围) {

样式列表1

样式列表2

样式列表n

样式列表……

}

或者

@media (尺寸范围) {

样式列表1

样式列表2

样式列表n

样式列表……

}

```

根据以上的屏幕尺寸，改变 body 的颜色

/* 注意空格注意and */

@media screen and (min-width: 576px) and (max-width: 768px) {

body {

background-color: red;

}

6.Viewport Width 和 Viewport Height

(1)vw 和 vh

- vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位。

- “视区”所指为浏览器内部的可视区域大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

- vw:1vw 等于视口宽度的 1%

- vh:1vh 等于视口高度的 1%

(2)兼容性

- chrome 20

- firefox 19

- IE 9.0

- opera 20.0

- safari 6.0

(3)优势

- % 是相对于父元素的大小设定的比率， vw、 vh 是视窗大小决定的。

- vw、 vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

- 元素会根据视口的大小设定宽高,切换手机型号查看效果

css学习12：过渡、变化、动画、响应式布局相关推荐

12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
css+全屏视频背景+响应式布局
记录自己做网页的过程,便于以后忘记回来学习. 视频背景用一个视频作为网页的背景,视频大小会随窗口大小变化(响应式布局) html代码: <div class="bg-video&qu ...
html页面高度设为自动,html – CSS：响应式布局中的高度自动问题
没有固定的正确高度.如果我在css中设置固定高度,则在响应式布局中,图像将不会以正确的宽高比调整大小. 主要问题是css根据src-attribute设置的图像计算自动高度和宽高比,而不是width- ...
总是听别人说响应式布局，原来这么简单
总听别人说响应式布局,觉得是一个很高大上的东西,近日做的一个项目需要适配不同的屏幕尺寸,于是就简单研究了一下 Web响应式布局,其实原理很简单,下面就简单整理了一下分享给大家. 什么是响应式布局如图 ...
html5/css3响应式布局介绍
转载链接:http://www.51xuediannao.com/html+css/htmlcssjq/694.html html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流 ...
html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为 ...
浅谈html5 响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联 ...
CCS3的过渡、变换、动画以及响应式布局、弹性布局
CSS3 过渡 .变换.动画在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...
前端学习笔记7：响应式布局和简单动画效果
一.响应式布局当我们在利用浏览器的放大缩小的时候,经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度,这时候我们就引入一个概念叫做响应式布局(Responsive layout).它 ...

css学习12：过渡、变化、动画、响应式布局

元素的动效

css学习12：过渡、变化、动画、响应式布局相关推荐

最新文章

热门文章