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%)，等价于centercenter还可以给 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（度数）可以实现旋转元素废数的单位是deg2D缩放 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>
