0基础学web前端第15天：HTML5CSS3第二天(2D转换、三角、缩放及动画)
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、绽放等效果。
转换（transform）你歌可以简单的理解为变形。
一、2d转移之移动translate
translate语法：X就是X轴上水平移动，Y就是Y轴上的水平移动。
transform: translate(x, y) transform: translateX(n) transfrom: translateY(n)
2D的移动主要是指 水平、垂直方向上的移动。translate最大的优点就是不影响其他元素的位置。translate中的100%单位，是相对于本身的宽度和高度来进行计算的。行内标签没有效果。
代码演示：
div {
background-color: lightseagreen;
width: 200px;
height: 100px;
/* 平移 */
/* 水平垂直移动 100px */
/* transform: translate(100px, 100px); */
/* 水平移动 100px */
/* transform: translate(100px, 0) */
/* 垂直移动 100px */
/* transform: translate(0, 100px) */
/* 水平移动 100px */
/* transform: translateX(100px); */
/* 垂直移动 100px */
transform: translateY(100px)
}
二、2D转换之旋转 rotate
2D旋转指的是让元素在二维平面内顺时针或逆时针旋转。
rotate语法：
/* 单位是：deg */ transform: rotate(度数)
rotate 里面跟度数，单位是deg；角度为正时，顺时针，角度为负数是，逆时针。默认旋转的中心点是元素的中心点。
代码演示：
img:hover {
transform: rotate(360deg)
}
三角形旋转案例：
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
设置元素旋转中心点（transform-origin）
transform-origin: x y;
注意后面的参数x和y用空格隔开， x y默认旋转的中心点是元素的中心点（50% 50%）等价于能发er center ，还可以给x y设置像素或者方位名词（top bottom left right center ）
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s;
/* 1.可以跟方位名词 */
/* transform-origin: left bottom; */
/* 2. 默认的是 50% 50% 等价于 center center */
/* 3. 可以是px 像素 */
transform-origin: 50px 50px;
}
div:hover {
transform: rotate(360deg);
}
</style>
三、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 {
/* 注意，数字是倍数的含义，所以不需要加单位 */
/* transform: scale(2, 2) */
/* 实现等比缩放，同时修改宽与高 */
/* transform: scale(2) */
/* 小于 1 就等于缩放*/
transform: scale(0.5, 0.5)
}
图片缩放案例代码演示：
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
分页按钮案例代码演示：
<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>
2D转换综合写法以及顺序问题
div:hover {
transform: translate(200px, 0) rotate(360deg) scale(1.2)
}
四、动画（animation）
CSS3
语法格式（定义动画）：
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px
}
}
语法格式（使用动画）：
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
动画序列：0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列。在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果。动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数。from 和 to
代码演示：
<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: move 2s linear 1s infinite alternate forwards;
速度曲线细节：
: 规定动画的速度曲线，默认是
| 属性值 | 说明 |
|---|---|
| linear | 动画从头到尾的速度是相同的。匀速 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始。 |
| ease-out | 动画以低速结束。 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量（步长） |
代码演示：
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(images/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>
评论