目录
🆙【前文回顾】👉 定位—相对定位，绝对定位，固定定位_06
❣️ 转换
1.什么是转换
改变元素在页面中的位置，大小，角度，形状
2D转换，只在x和y轴上进行转换
3D转换，添加了z轴
2.转换的属性
语法：transform: none|transform-functions; 默认值none 定义不进行转换。
transform:转换函数1 转换函数2 转换函数3......;
2D，学习4个转换函数，3个要背
3D，学习1个转换函数
3.2D转换
(1) 位移
改变元素在页面中的位置 —— x、y不区分大小写
transform: translate(v1); 在x轴上向右水平位移。(y轴省略的话，默认是0，这跟scale(v1)不一样)
translateX(v1); 在x轴上向右水平位移，即定义转换，只是用 X 轴的值。
translateY(v1); 在y轴上向下垂直位移，即定义转换，只是用 Y 轴的值。
translate(v1,v2); 分别设置x和y轴的位移，即定义 2D 转换。
(2) 缩放
改变图片在页面中的尺寸
transform: scale(v1); 同时设置x轴和y轴的缩放倍数
v1>=1 放大
0<v1<1 缩小
-1<v1<0 缩小并翻转
v1<-1 放大并翻转
scaleX(v1) 单独设置x轴缩放，即通过设置 X 轴的值来定义缩放转换。
scaleY(v1) 单独设置y轴缩放，即通过设置 Y 轴的值来定义缩放转换。
scale(x,y) 分别设置x和y轴的缩放，即定义 2D 缩放转换。
(3) 旋转
设置元素在页面上的角度
transform: rotate(45deg); +顺时针，-逆时针 定义 2D 旋转
旋转的问题
① 通过设置转换原点，来设置旋转的圆心，圆心不同，旋转效果不同
transform-origin: x y; 取值：1.px为单位的数字 （默认值0 0）——元素左上角
2.% （默认值50% 50%）——元素的中心点旋转
3.关键字 x:left/center/right y:top/center/bottom
② 旋转会带着坐标轴一起旋转，会影响旋转之后的位移方向
(4) 倾斜
skewX(ndeg)和skewY(ndeg)
skewX(ndeg) 定义沿着 X 轴的 2D 倾斜转换。
skewY(ndeg) 定义沿着 Y 轴的 2D 倾斜转换。
skew(x,y) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
🔹 示例：01_transform.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1,#d2{
width: 200px;height: 200px;
font:24px jokerman;
position: absolute;
top:50px;left: 50px;
}
#d1{background-color: #0ff;
/* transform:translate(300px) rotate(45deg); */
}
#d2{
background-color: rgba(255,255,0,0.5);
/* 位移 */
/* transform: translatey(150px); */
/* 缩放 */
/* transform: scale(1.5,0.5); */
/* 旋转 */
/* transform:rotate(45deg); */
/* 设置转换原点 */
/* transform-origin: 200px 0px; */
/* 倾斜 */
transform: skew(45deg,45deg);
}
</style>
</head>
<body>
<div id="d1">参考元素</div>
<div id="d2">转换元素</div>
</body>
</html>
🔹 示例：ex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 100px;
height: 100px;
background: url(253.jpg) no-repeat center;
background-size: 100%;
border-radius: 50%;
transition: 5s;
margin: 800px auto;
}
#d1:hover{
transform:rotate(360deg) translate(200px) skew(135deg,135deg);
box-shadow: 0px 0px 5px 3px #ff0;
}
</style>
</head>
<body>
<!-- 翻滚吧，猫咪 -->
<div id="d1"></div>
</body>
</html>
4.3D旋转
页面中的3D都是模拟的
透视距离，会影响人看这个3D转换的效果不同
设置透视距离，一定要写在3D转换元素的父元素上
perspective: 200px; ——给3D 转换元素定义透视视图。
transform:① 定义沿着 X 轴的 3D 旋转。
rotateX(xdeg); 元素围绕x轴进行旋转 就像：单杠，烤羊腿
② 定义沿着 Y 轴的 3D 旋转。
rotateY(ydeg); 元素围绕y轴进行旋转 就像：土耳其烤肉，旋转门
③ 定义沿着 Z 轴的 3D 旋转。
rotateZ(zdeg); 元素围绕Z轴进行旋转 就像：风车，电风扇，摩天轮
④ 定义 3D 旋转。
rotate3d(x,y,z,ndeg); x,y,z>0 参与旋转，等于0不参与，具体取值是旋转的倍数
🔹 示例：02_3d.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parent{
width: 400px;height: 400px;
border: 2px solid #f00;
margin: 100px auto;
/* 透视距离 */
perspective: 200px;
}
#d1{
width: 200px;height: 200px;
background-color: #0ff;
margin: 100px auto;
/* 3d旋转 */
transform: rotate3d(1,10,5,45deg);
}
</style>
</head>
<body>
<div id="parent">
<div id="d1">3D转换</div>
</div>
</body>
</html>
❣️ 过渡
定义：css值在两个状态间，在一段时间内平缓的变化过程
1. 指定参与过渡的css属性
transition-property:css属性1 css属性2 css属性3...... ——各属性之间可以空格，也可以加逗号
all; 支持过渡的属性，都参与过渡
哪些属性是支持过渡
(1) 颜色属性
(2) 阴影
(3) 转换
(4) 大多数取值为具体数字的属性
2.设置过渡的出持续时长
transition-duration: s/ms;
3.设置过渡的时间曲线函数（设置过渡的速度）
transition-timing-function: （贝塞尔曲线）
(1) ease 默认值，慢速开始，先加速，在减速，慢速结束
(2) linear 匀速运动
(3) ease-in 慢慢开始，一直提速
(4) ease-out 急速开始，一直减速
(5) ease-in-out 慢速开始，疯狂加速，疯狂减速，慢速结束
4.过渡的延迟
transition-delay:2s;
5.过渡代码的编写位置
过渡代码写在原来的样式中，过渡效果，有去有回；写在伪类中，过渡效果，有去无回
6.过渡的简写方式
transition:property duration timing -function delay ;
最简方式：transition: duration; 相当于 transition:all duration ease 0s
💥 记住过渡的使用口诀：谁做过渡给谁加 💥
🔽 小结
① transition-property 指定CSS属性的name，transition效果
② transition-duration transition效果需要指定多少秒或毫秒才能完成
③ transition-timing-function 指定transition效果的转速曲线
④ transition-delay 定义transition效果开始的时间
🔹 示例：03_transition.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
width: 100px;height: 100px;
background-color: #00F;
/* 指定参与过渡的css属性 */
/* transition-property: all; */
/* 设置过渡的出持续时长 */
/* transition-duration: 3s; */
/* 设置过渡的时间曲线函数 */
/* transition-timing-function: ease; */
/* 过渡的延迟 */
/* transition-delay: 0s; */
/* 过渡的简写方式 */
transition:3s;
}
#d1:hover{
background-color: #f00;
border-radius: 50%;
transform: translate(800px);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
🔹 示例： 如果没有过渡效果，鼠标经过盒子时盒子会立马变宽，就会显得很突兀，此时就可以用过渡属性来设置的更好看些
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS3过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费的时间 运动曲线 何时开始 */
/* transition: width .5s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 当然你也可以直接使用all，设置所有支持过渡的属性，在hover里参与过渡 */
transition: all 2s;
}
/* 添加过渡属性后，鼠标再次经过盒子，盒子就会慢慢变宽、变高、背景色变为aquamarine */
div:hover {
width: 400px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
🔹 示例：使用过渡，实现鼠标经过时进度条会被慢慢拉满
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS3过渡小练习-进度条</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
border-radius: 7px;
/* 谁做过渡给谁加 */
transition: all 0.7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
❣️ 动画
| 过渡 | 动画 |
|---|---|
| 两个css之间的变化 | 两个，两个以上css的变化 |
| 伪类激活过渡 | F5(刷新网页)和伪类激活动画 |
1.关键帧
关键帧，某一个时间点执行的样式
来控制动画的每一个状态
2.使用
(1) 创建动画
① 定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
② 语法
@keyframes animationname {keyframes-selector {css-styles;}}
| 值 | 描述 |
|---|---|
| animationname | 必需。定义动画的名称。 |
| keyframes-selector | 必需。动画时长的百分比。 合法的值：
|
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
@keyframes 动画名称 {
0% | from{样式....} // 0%或者from 0%等同于from
.....
100% | to{样式....}
}
🔹 示例1：animation
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* 实现水平和垂直方向居中 */
margin:auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* div内部文本水平居中 */
text-align: center;
/* div内部文本垂直居中 */
line-height: 100px;
font-weight:bold;
animation: testanimations 5s infinite;
}
@keyframes testanimations {
from {
transform: translate(0px, 0px);
}
20% {
transform: translate(20px,20px);
}
40% {
transform: translate(40px, 0px);
}
60% {
transform: translate(60px, 20px);
}
80% {
transform: translate(80px, 0px);
}
to {
transform: translate(100, 20);
}
}
</style>
</head>
<body>
<div>我是一个div</div>
</body>
</html>
🔹 示例2：animation
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
/* Firefox */
-moz-animation: mymove 5s infinite;
/* Safari and Chrome */
-webkit-animation: mymove 5s infinite;
/* Opera */
-o-animation: mymove 5s infinite;
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
/* Firefox */
@-moz-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
/* Safari and Chrome */
@-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
/* Opera */
@-o-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
(2) 调用动画
/* 指定调用的动画名称 */
animation-name: change;
/* 设置持续时间 */
animation-duration: 5s;
/* 设置时间曲线函数 */
animation-timing-function: ease;
/* 设置延迟 */
animation-delay: 0s;
3.动画的专有属性
(1) 动画的播放次数
animation-iteration-count:
① 具体的数字
② infinite;
(2) 动画的播放顺序
animation-direction:
normal; 0%~~100%
reverse; 100%~0%
(3) 动画的简写方式
animation:name duration timing-function delay count direction;
最简方式——animation:name duration
(4) 动画的填充状态
animation-fill-mode:
backwards 在动画延迟时间内，填充动画的第一帧
forwards 在动画播放结束之后，填充动画的最后一帧
both 前后都填充
🔹 示例：04_animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 定义动画 */
@keyframes change{
from{background: #f00;border-radius: 0%;
transform: rotate(0deg);
}
25%{background: #ff0;border-radius: 50%;
transform: rotate(1800deg);
}
50%{background: #f0f;border-radius: 0%;
transform: rotate(0deg);
}
75%{background: #0ff;border-radius: 50%;
transform: rotate(1800deg);
}
to{background: #00f;border-radius: 0%;
transform: rotate(0deg);
}
}
/* 定义动画 */
@keyframes eyes{
0%{background-image: url(22.jpg);transform: rotate(360deg);}
25%{background-image: url(11.jpg);transform: rotate(0deg);}
50%{background-image: url(22.jpg);transform: rotate(360deg);}
75%{background-image: url(11.jpg);transform: rotate(0deg);}
100%{background-image: url(22.jpg);transform: rotate(360deg);}
}
/* 定义动画 */
@keyframes eyess{
0%{background-image: url(22.jpg);transform: rotate(360deg);}
25%{background:#0000FF;transform: rotate(0deg);}
50%{background-size: 100%;background-image: url(mao.jpg);transform: rotate(360deg);}
75%{background:#0000FF;transform: rotate(0deg);}
100%{background-image: url(11.jpg);transform: rotate(360deg);}
}
#d1{
width: 100px;height: 100px;
background-size: 100%;
border-radius: 50%;
background-repeat: no-repeat;
/* 指定调用的动画名称 */
/* animation-name: eyes; */
/* 设置持续时间 */
/* animation-duration: 5s; */
/* 设置时间曲线函数 */
/* animation-timing-function: ease; */
/* 设置延迟 */
/* animation-delay: 0s; */
/* 设置动画的执行次数 */
/* animation-iteration-count: infinite; */
/* 设置动画的播放顺序 */
/* animation-direction: reverse; */
/* 动画的简写方式 */
animation: eyess 3s 2s; /* 执行哪个动画，就写哪个动画名称 */
/* 设置动画的填充状态 */
animation-fill-mode: both;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
素材：22.jpg、11.jpg、mao.jpg
4.animate.css的使用
animate.css是全世界程序员共用的动画库
https://animate.style/
只要把css文件导入，就可以直接使用动画名称了
🔹 示例：05_animate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
#d1{
width: 130px;height: 40px;
background-color: #afa;
margin: 50px;
animation: rubberBand 1s;
}
#d2,#d3,#d4{
width: 20px;height: 20px;
border: 2px solid #f00;
background-image: url(Sprites.jpg);
background-size: 2000%;
}
#d2{background-position: 2px -38px; }
#d3{background-position: -59px -38px;}
#d4{background-position: -59px -79px;}
</style>
</head>
<body>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<br>
<hr>
<br>
<div id="d1"></div>
</body>
</html>
素材：Sprites.jpg
🔹 示例：css动画时钟
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#clock{
width:400px;
height:400px;
border:6px solid blue;
border-radius:50%;
position:relative;
}
#minute{
width:10px;
height:100px;
background:purple;
position:absolute;
top:100px;
left:195px;
transform-origin:center bottom;
animation:turn 3600s linear infinite;
}
#second{
width:6px;
height:150px;
background:blue;
position:absolute;
top:50px;
left:197px;
transform-origin:center bottom;
animation:turn 60s linear infinite;
}
/*声明动画*/
@keyframes turn{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="clock">
<div id="minute"></div>
<div id="second"></div>
</div>
</body>
</html>
❣️ CSS优化
1.优化的目的
(1) 减少服务器的压力
(2) 提升用户体验
2.CSS优化的原则
(1) 尽量减少请求的个数------缓存（精灵图的使用，雪碧图）
(2) 在页面的顶部引入css文件
(3) 将css和js写在独立的文件中
3.CSS代码的优化
(1) 尽量合并样式（能群组就群组，能简写就简写）
(2) 避免出现空的href和src
(3) 代码压缩，压缩之后代码在名称中会添加min
❣️ css reset
HTML的标签在不同浏览器中，有不同的默认样式
一般情况下，我们在开发之前，会把这些不同的默认样式，进行统一
① 都清除
② 给统一值
1.css reset
样式重置，没有规则，只要适合你的项目，怎么写怎么对
css reset很霸道，把html语义中的样式，都清除了。这种霸道的统一，有人追捧，有人抵触
2.normalize.css
normalize.css是一种温和的解决浏览器兼容性和bug的css文件。
是一个非常小的css文件，保留了默认语义样式，只为不同浏览器的兼容性，和bug做了修改，非常温和
🔹 示例：06_cssreset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="normalize.css"/>
</head>
<body>
<div>我是一个div</div>
<p>我是一个p</p>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
