CSS 学习笔记 01 （动画）
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法。
根据不同的浏览器内核，css 前缀会有不同。最基本的浏览器内核有如下四种：
- Gecko 内核 前缀为 -moz- 火狐浏览器。
- Webkit 内核 前缀为 -webkit- 也叫谷歌内核，chrome 浏览器最先开发使用的，safari 浏览器也使用该内核。国内有很多浏览器也使用了 webkit 内核， 如360、猎豹等。
- Trident 内核 前缀为 -ms- 也称IE内核。
- Presto 内核 前缀 -o- 目前只有 opera 采用。
例子：
镂空效果代码：
<style>
.div {
font-size: 80px;
color: transparent;
/* 镂空效果 */
-webkit-text-stroke: 1px red;
}
</style>
<body>
<div class="div">学习CSS</div>
</body>
镂空效果运行结果：
圆角 border-radius
语法：
- border-radius: value; // 四个角
- border-radius: value value; // 左上右下 右上左下
- border-radius: value value value value; // 左上角 右上角 右下角 左下角
例子：
圆角效果代码：
<style>
.div2 {
width: 300px;
height: 200px;
border: 1px solid red;
/* 设置圆角 完整格式 2个参数 8个值 */
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
}
</style>
<body>
<div class="div"></div>
</body>
圆角效果运行结果：
圆角的形成：
- 从指定角的顶端，向内部引出垂直半径和水平半径。
- 将水平半径和垂直半径相交于元素内部的一点（圆心点）。
- 以该点为圆心，指定垂直半径和水平半径画圆或者椭圆。
- 与边框相交的部分就是圆角部分。
阴影
1. 文字阴影 text-shadow
语法： text-shadow：value value value color; // x轴偏移 y轴偏移 模糊度 颜色
例子：
文字阴影效果代码：
<style>
.div {
font-size: 100px;
text-shadow: 2px 2px 5px red;
}
</style>
<body>
<div class="div">学习CSS</div>
</body>
文字阴影运行结果：
2. 盒子阴影 box-shadow
语法：
- box-shadow: value value value color; // x轴偏移 y轴偏移 模糊度 颜色 (x 设置为0 y 设置为0 四周阴影)
- box-shadow: value value value color inset; // x轴 y轴 模糊度 颜色 内置
- box-shadow: 阴影1，阴影2..
例子： 盒子阴影效果代码：
<style>
.box {
display: flex;
}
.div1 {
width: 100px;
height: 100px;
background-color: green;
box-shadow: 2px 2px 5px red;
}
.div2 {
margin-left: 30px;
width: 100px;
height: 100px;
background-color: green;
box-shadow: 0px 0px 15px red;
}
.div3 {
margin-left: 30px;
width: 100px;
height: 100px;
background-color: green;
box-shadow: 5px 5px 5px red inset;
}
.div4 {
margin-left: 150px;
margin-top: 150px;
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 0px 0px 5px 10px red,
0px 0px 5px 20px orange ,
0px 0px 5px 30px yellow,
0px 0px 5px 40px green,
0px 0px 5px 50px cyan,
0px 0px 5px 60px blue,
0px 0px 5px 70px purple ;
}
</style>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
盒子阴影运行结果：
渐变
1. 线性渐变 linear-gradient
语法：background: linear-gradienrt(string,color,color) // 线性渐变方向 颜色 颜色
例子：
线性渐变效果代码：
<style>
.div1 {
width: 200px;
height: 200px;
background: linear-gradient(30deg,red,blue);
}
</style>
<body>
<div class="div1"></div>
</body>
线性渐变运行结果：
2. 径向渐变 radial-gradient
语法：background: radial-gradient(describe, color, color);// 描述 颜色 颜色
描述：
- 中心（at x y）从左上角为原点开始
- 大小
- 最近边 closest-side
- 最远边 farthest-side
- 最近角 closest-corner
- 最远角 farthest-corner
- 形状
- ellipse 椭圆 默认值
- circle 圆
例子：
径向渐变效果代码：
<style>
.div1 {
width: 200px;
height: 200px;
background: radial-gradient( farthest-side circle at 35% 35%,red, blue);
}
</style>
<body>
<div class="div1"></div>
</body>
径向渐变运行结果：
转换 transform
1. 2D 转化
- transform：translate() // 移动
- transform：rotate() // 旋转 （负值：逆时针旋转）
- transform：scale() // 缩放
- transform：skew() // 倾斜
例子：
2D 转化效果代码：
<style>
.box {
display: flex;
}
.box1 {
width: 200px;
height: 200px;
margin-left: 10px;
background-color: red;
transition: all 1s;
}
.box1:hover {
transform: translate(20px);
}
.box2 {
margin-top: 50px;
width: 200px;
height: 200px;
margin-left: 100px;
background-color: blue;
transition: all 1s;
}
.box2:hover {
transform: rotate(30deg);
}
.box3 {
width: 200px;
height: 200px;
margin-left: 100px;
background-color: green;
transition: all 1s;
}
.box3:hover {
transform: scale(0.8, 0.7);
}
.box4 {
margin-top: 50px;
width: 200px;
height: 200px;
margin-left: 100px;
background-color: cyan;
transition: all 1s;
}
.box4:hover {
transform: skew(20deg, 10deg);
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
2D 转化运行结果：
2. 3D 转换
- transform：translate() // 移动
- transform：rotate() // 旋转
- transform：scale() // 缩放
- perspective // 透视效果
过渡 transition
- 什么是过渡
- 使用 css 属性值在某一段时间内平滑的过渡。
- transition：过渡属性 过渡所需时间 过渡函数 过渡延迟时间
- 过渡属性：none | all | property
- 过渡时间：s | ms 默认值为 0
- 过渡函数：
- ease: 默认值 慢速开始，然后变快，慢速结束
- linear: 匀速
- ease-in: 慢速开始，加速效果
- ease-out: 慢速结束，减速效果
- ease-in-out: 慢速开始和结束，先加速后减速效果
- 过渡延迟 s | ms
动画 animation
1. @keyframes
- 作用：用于声明动画，指定关键帧
- 语法：
@keyframes name {
from | 0% { css样式 }
percent { css样式 }
to | 100% { css样式 }
}
2. animation
- 作用：用于控制动画，调用由 @ketyframes 定义的动画，设置动画属性
- 语法:
animation: name duration time-function delay ineration-count direction;
- 动画子属性：
- animation-name: ; 调用动画，与定义的 @keyframes 一致
- animation-duration: s | ms; 完成一个动画周期所需要的时间
- animation-time-function: ; 规定动画变速类型
- animation-delay: s | ms; 播放前的延迟时间
- animation-ineration-count: 数值 | infinite; 播放次数， infinite 表示无限次播放
- animation-direction: normal | alternate; 播放的方向， 正常播放 | 轮流播放
- animation-fill-mode: forwards; 动画停留在最后一帧，默认值为 none
- animation-play-state: paused | running; 规定属性是暂停还是运行，默认值 running
- @Title: CSS 学习笔记 01
- @Content: CSS
- @Autor: ling.wang
- @StudyDate: 2022-09-14、2022-09-15
- @WritingDate: 2022-09-14、2022-09-15