十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列

HTML5 第二天

一、rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

div{transform: rotate(0deg);
}

二、三角

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {position: relative;width: 300px;height: 35px;border: 1px solid #ccc;}.box::after {position: absolute;top: 10px;right: 10px;content: '';width: 10px;height: 10px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;transform: rotate(45deg); /* 旋转45°,形成往下的箭头 */transition: all 0.3s;/* 旋转的时候产生过渡效果 */}/* 鼠标经过box盒子时,让after伪类生成的箭头进行旋转过渡,并重新定位箭头的位置 */.box:hover::after {transform: rotate(225deg);position: absolute;top: 15px;right: 10px;}</style></head><body><div class="box"></div></body>
</html>

二、设置元素旋转中心点(transform-origin)

transform-origin 基础语法

transform-origin: x y;

重要知识点

注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

三、旋转中心案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旋转中心点案例</title><style type="text/css">div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 0.4s;/* 1.设置旋转中心点 transform-origin后面可以跟方位名词 *//* transform-origin: left bottom; *//* 2.默认的旋转中心点是 50%  50% 等价于 center center *//* 3.可以是px像素 */transform-origin: 50px 50px;}div:hover {transform: rotate(360deg);}</style></head><body><div></div></body>
</html>

四、`2D` 转换之 `scale`

scale 的作用
- 用来控制元素的放大与缩小
语法
```
transform: scale(x, y)
```
知识要点
- 注意，x 与 y 之间使用逗号进行分隔
- transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
- transform: scale(2, 2): 宽和高都放大了二倍
- transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
- transform:scale(0.5, 0.5): 缩小
- scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

代码演示

   div:hover {/* 1.注意，数字是倍数的含义，1就是1倍，所以不需要加单位 。第一个参数为宽度，第二个参数为高度*//* transform: scale(2, 2) *//* 2.实现等比缩放，同时修改宽与高 *//* transform: scale(2) *//* 3.小于 1 就等于缩放*/transform: scale(0.5, 0.5)/* 4. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*//* width: 300px;height: 300px; */transform: scale(2);}

五、图片放大案例

代码演示


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {overflow: hidden;float: left;margin: 10px;}div img {transition: all .4s;vertical-align: middle; /* 必须加上这句 代码，因为img 图片默认是基线对齐，把它修改成中线对齐，才能实现放大后的图片不会超出原本的div的高度 */}div img:hover {transform: scale(1.1);}</style>
</head><body><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div><div><a href="#"><img src="media/scale.jpg" alt=""></a></div>
</body></html>

六、分页按钮案例

代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>li {float: left;width: 30px;height: 30px;border: 1px solid pink;margin: 10px;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</body></html>

七、 `2D` 转换综合写法以及顺序问题

知识要点
同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
但我们同时有位置或者其他属性的时候，要将位移放到最前面
代码演示

div:hover {transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

2D转换总结：

转换transform我们简单理解就是变形有2D和3D之分 .我们暂且学了三个分别足位移旋转和缩放
2D移动translate（x，y）最大的优势足不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的
可以分开写比如translateX（x）和translateY（y）
·2D旋转rotate（度数）可以实现旋转元素废数的单位是deg
2D缩放 sacle（x，y）里面参数是数字不跟单位，可以是小数，最大的优势不影响其他盒子
设置转换中心点traisform-origin:xy；参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

八、动画(animation)

什么是动画
- 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
动画的基本使用
- 先定义动画
- 在调用定义好的动画

语法格式(定义动画)

写法一：
@keyframes 动画名称 {0% {width: 100px;}100% {width: 200px}
}

写法二：
```html@keyframes move{from {transform: translate(0px,0px);}to {transform: translate(200px,200px);}}


4.  语法格式(使用动画)

div {
/* 调用动画 /
animation-name: 动画名称;
/ 持续时间 */
animation-duration: 持续时间；
}

5. 动画序列- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用 `from` 和 `to`，等同于 0% 和 100%6. 代码演示```css
<style>div {width: 100px;height: 100px;background-color: aquamarine;animation-name: move;animation-duration: 0.5s;}@keyframes move{0% {transform: translate(0px)}100% {transform: translate(500px, 0)}}</style>

九、动画序列

代码演示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* from to 等价于  0% 和  100% *//* @keyframes move {from {transform: translate(0, 0);}to {transform: translate(1000px, 0);}} *//* 动画序列 *//* 1. 可以做多个状态的变化 keyframe 关键帧 *//* 2. 里面的百分比要是整数 *//* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0)}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;animation-name: move;animation-duration: 10s;}</style>
</head><body><div></div>
</body></html>

十、动画常见属性

常见的属性

代码演示

div {width: 100px;height: 100px;background-color: aquamarine;/* 动画名称 */animation-name: move;/* 动画花费时长 */animation-duration: 2s;/* 动画速度曲线 */animation-timing-function: ease-in-out;/* 动画等待多长时间执行 */animation-delay: 2s;/* 规定动画播放次数 infinite: 无限循环 */animation-iteration-count: infinite;/* 是否逆行播放 */animation-direction: alternate;/* 动画结束之后的状态 */animation-fill-mode: forwards;
}div:hover {/* 规定动画是否暂停或者播放 */animation-play-state: paused;
}

十一、动画简写方式

动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

知识要点

简写属性里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

代码演示

animation: move 2s linear 1s infinite alternate forwards;

十二、速度曲线细节

速度曲线细节
- animation-timing-function: 规定动画的速度曲线，默认是ease

代码演示

div {width: 0px;height: 50px;line-height: 50px;white-space: nowrap;overflow: hidden;background-color: aquamarine;animation: move 4s steps(24) forwards;
}@keyframes move {0% {width: 0px;}100% {width: 480px;}
}

十三、奔跑的熊大

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {background-color: #ccc;}      div {position: absolute;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;/* 我们元素可以添加多个动画， 用逗号分隔 */animation: bear .4s steps(8) infinite, move 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; */transform: translateX(-50%);}}</style>
</head><body><div></div>
</body></html>

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列相关推荐

CSS3新特性详解(二)：CSS3 字体@font-face详解、如何创建和修改woff字体文件及text-shadow等文本效果
关于CSS3新特性,在上篇博文中"CSS3新特性详解(一):CSS3选择器.边框.背景使用细节及案例演示",讨论了CSS3选择器.边框和背景,本文讨论字体@font-face使 ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 – 注意:y 轴下面是正 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
《Android群英传》读书笔记 (5) 第十一章搭建云端服务器 + 第十二章 Android 5.X新特性详解 + 第十三章 Android实例提高...
第十一章搭建云端服务器该章主要介绍了移动后端服务的概念以及Bmob的使用,比较简单,所以略过不总结. 第十三章 Android实例提高该章主要介绍了拼图游戏和2048的小项目实例,主要是代码,所 ...
Java基础学习总结（33）——Java8 十大新特性详解
Java8 十大新特性详解本教程将Java8的新特新逐一列出,并将使用简单的代码示例来指导你如何使用默认接口方法,lambda表达式,方法引用以及多重Annotation,之后你将会学到最新的API ...
Android群英传笔记——第十二章：Android5.X 新特性详解，Material Design UI的新体验
Android群英传笔记--第十二章:Android5.X 新特性详解,Material Design UI的新体验第十一章为什么不写,因为我很早之前就已经写过了,有需要的可以去看 Android高 ...
JAVA8 十大新特性详解
JAVA8 十大新特性详解 http://www.jb51.net/article/48304.htm java7和java6比较有什么不同转载于:https://www.cnblogs.com/y ...
Redis系列(十四)、Redis6新特性之RESP3与客户端缓存(Client side caching)
Redis6引入新的RESP3协议,并以此为基础加入了客户端缓存的新特性,在此特性下,大大提高了应用程序的响应速度,并降低了数据库的压力,本篇就带大家来看一下Redis6的新特性:客户端缓存. 目录 ...

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列

HTML5 第二天

一、rotate

二、三角

二、设置元素旋转中心点(transform-origin)

三、旋转中心案例

四、`2D` 转换之 `scale`

五、图片放大案例

六、分页按钮案例

七、 `2D` 转换综合写法以及顺序问题

2D转换总结：

八、动画(animation)

九、动画序列

十、动画常见属性

十一、动画简写方式

十二、速度曲线细节

十三、奔跑的熊大

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列相关推荐

最新文章

热门文章

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列

HTML5 第二天

一、rotate

二、三角

二、设置元素旋转中心点(transform-origin)

三、旋转中心案例

四、2D 转换之 scale

五、图片放大案例

六、分页按钮案例

七、 2D 转换综合写法以及顺序问题

2D转换总结：

八、 动画(animation)

九、动画序列

十、动画常见属性

十一、 动画简写方式

十二、速度曲线细节

十三、奔跑的熊大

十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列相关推荐

最新文章

热门文章

四、`2D` 转换之 `scale`

七、 `2D` 转换综合写法以及顺序问题

八、动画(animation)

十一、动画简写方式