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（度数）可以实现旋转元素废数的单位是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>
