1. transition 过渡
2. transform 变形
3. animation 关键帧动画
1. 语法:
1. transition: property duration timing-function delay
1. transition: 属性是个复合属性
2. transition-property: 规定设置过渡效果的 css 属性名称
3. transition-duration: 规定完成过渡效果需要多少秒或毫秒
4. transition-timing-function: 指定过渡函数, 规定速度效果的速度曲线
5. transition-delay: 指定开始出现的延迟时间
2. 默认值分别为: all 0 ease 0;
1. 注: transition-duration 时长为 0, 不会产生过渡效果
3. 改变多个 css 属性的过渡效果时, 代码示例:
1. a {
transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s;
}
4. 子属性:
1. transition-property
1. transition-property: none |all |property;
1. 值为 none 时, 没有属性会获得过渡效果
2. 值为 all 时, 所有属性都将获得过渡效果
3. 值为指定的 css 属性应用过渡效果, 多个属性用逗号隔开
2. color : background-color, border-color, color, outline-color ;
3. length : 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,
4. integer : 离散步骤（整个数字）, 在真实的数字空间, 以及使用 floor()转换为整数时发生 如: outline-offset,z-index
5. number : 真实的（浮点型）数值, 如:zoom,opacity,font-weight
6. rectangle : 通过x, y, width 和 height（转为数值）变换，如: crop
7. visibility : 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
8. shadow : 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
9. background-image : 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画。
2. transition-duration
1. transition-duration: time;
1. 该属性主要用来设置一个属性过渡到另一个属性所需的时间, 也就是从旧属性过渡到新属性花费的时间长度, 俗称持续时间
3. transition-timing-function
1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);
1. 该属性指的是过渡的 “缓动函数” 。 主要用来指定浏览器的过渡速度, 以及过渡期间的操作进展情况, 解释下:
2. 注意: 值 cubic-bezier(n,n,n,n) 可以定义自己的值, 如 cubic-bezier(0.42,0,0.58,1)
4. transition-delay
1. 这个属性没什么说的了, 就是过渡效果开始前的延迟时间, 单位秒或者毫秒
1. 可以利用 transform 功能来实现文字或图像的 旋转、缩放、倾斜、移动 这四种类型的变形处理
1. 旋转 rotate
1. 用法: transform: rotate(45deg);
2. 共一个参数 “角度”, 单位 deg 为度的意思, 正数为顺时针旋转, 负数为逆时针旋转, 上述代码作用是顺时针旋转45度
2. 缩放 scale
1. 用法: transform: scale(0.5) 或者 transform: scale(0.5, 2);
2. 一个参数时: 表示水平和垂直同时缩放该倍率
3. 两个参数时: 第一个参数指定水平方向的缩放倍率, 第二个参数指定垂直方向的缩放倍率 。
3. 倾斜 skew
1. 用法: transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
2. 一个参数时: 表示水平方向的倾斜角度 。
3. 两个参数时: 第一个参数表示水平方向的倾斜角度, 第二个参数表示垂直方向的倾斜角度 。
4. skew 的默认原点 transform-origin 是这个物件的中心点
4. 移动 translate
1. 用法: transform: translate(45px) 或者 transform: translate(45px, 150px);
2. 一个参数时: 表示水平方向的移动距离;
3. 两个参数时: 第一个参数表示水平方向的移动距离, 第二个参数表示垂直方向的移动距离 。
2. 基准点 transform-origin
1. 在使用 transform 方法进行文字或图像的变形时, 是以元素的中心点为基准点进行的 。 使用 transform-origin 属性, 可以改变变形的基准点 。
2. 用法: transform-origin: 10px 10px;
3. 表示相对左上角原点的距离, 单位 px, 第一个参数表示相对左上角原点水平方向的距离, 第二个参数表示相对左上角原点垂直方向的距离;
4. 两个参数除了可以设置为具体的像素值, 其中第一个参数可以指定为 left、center、right, 第二个参数可以指定为 top、center、bottom。
3. 多方法组合变形
1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);
2. 这四种变形方法顺序可以随意, 但不同的顺序导致变形结果不同, 原因是变形的顺序是从左到右依次进行
1. 在 CSS3 中创建动画, 您需要学习 @keyframes 规则 。
2. @keyframes 规则用于创建动画 。 在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果 。
3. 必须定义动画的名称和时长 。 如果忽略时长, 则动画不会允许, 因为默认值是 0。
4. 请用百分比来规定变化发生的时间, 或用关键词 "from" 和 "to", 等同于 0% 和 100% 。
5. 语法
1. animation: name duration timing-function delay iteration-count direction;
1. animation-name 规定需要绑定到选择器的 keyframe 名称
2. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3. animation-timing-function 规定动画的速度曲线。 默认是 "ease"。
4. animation-delay 规定动画何时开始 。 默认是 0。
5. animation-iteration-count 规定动画被播放的次数 。 默认是 1。
6. animation-direction 规定动画是否在下一周期逆向地播放 。 默认是 "normal"; alternate (轮流),。
1. alternate (轮流): 动画播放在第偶数次向前播放, 第奇数次向反方向播放 (animation-iteration-count 取值大于1时设置有效
2. 语法: animation-direction: alternate;
2. animation-play-state 规定动画是否正在运行或暂停 。 默认是 "running" 播放; paused 暂停播放 。
1. 语法: animation-play-state: paused;
3. animation-fill-mode 属性规定动画在播放之前或之后, 其动画效果是否可见; 规定对象动画时间之外的状态; none | forwards | backwards | both 。
1. none: 不改变默认行为 (默认, 回到动画没开始时的状态) 。
2. forwards: 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义) (动画结束后动画停留在结束状态) 。
3. backwards: 在 animation-delay 所指定的一段时间内, 在动画显示之前, 应用开始属性值 (在第一个关键帧中定义) （动画回到第一帧的状态）。
4. both: 向前和向后填充模式都被应用 （根据 animation-direction 轮流应用 forwards 和 backwords 规则）。
5. 语法: animation-fill-mode: forwards
1. 0% 是动画的开始, 100% 是动画的完成。
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画- transition </title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* CSS实现示例 */
.w_tran-css {
width: 350px;
height: 350px;
background: url('./images/1-2-https原理.jpg') no-repeat center;
transition: all 1s ease-in-out;
background-size: 110%;
border: 5px solid slateblue;
}
.w_tran-css:hover {
background-size: 120%;
border: 5px solid skyblue;
}
</style>
<body>
<div class="w_tran-css">
<p>transition 动画 --- 测试背景图中的动画效果</p>
</div>
</body>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 - transition</title>
</head>
<style>
* {
margin: 0;
}
.w_outer {
display: flex;
justify-content: center;
background-color: skyblue;
height: 100vh;
}
nav {
display: flex;
width: 80%;
height: 40px;
gap: 40px;
}
a {
flex: 1;
background-color: #333;
color: #fff;
border: 1px solid;
padding: 8px;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-out;
}
a:hover, a:focus {
background-color: steelblue;
color: #333;
}
</style>
<body>
<div class="w_outer">
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact Us</a>
<a href="#">Links</a>
</nav>
</div>
</body>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 - transform</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
/* 简单示例-1 */
.w_outer {
width: 300px;
border: 120px solid red;
}
#btn {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid blue;
position: relative;
cursor: pointer;
}
.ball {
border-radius: 25px;
width: 50px;
height: 50px;
background: rgb(17, 8, 8);
position: absolute;
top: 0;
left: 0;
transition: transform 1s;
}
/* 简单示例-1 */
.w_img {
width: 300px;
/* transform 设置动画时, 需要配合 transition 来设置过渡时间*/
transition: 1s;
}
.w_img:hover {
transform: rotate(90deg);
transform-origin: 0, 0 ;
}
/* 简单示例-3 */
.w_trans-3 {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}
</style>
<body>
<!-- 示例一 -->
<div class="w_outer">
<div id="btn">
<p>transform --- 动画 Click anywhere to move the ball</p>
<div id="foo" class="ball"></div>
</div>
</div>
<!-- 示例二 -->
<img class="w_img" src="./images/1-https-注释.png" alt="">
<!-- 示例三 -->
<div class="w_trans-3">transform - 设置变形</div>
</body>
<script>
var f = document.getElementById('foo');
var far = document.getElementById('btn')
far.onclick = function(ev, obj){
f.style.transform = 'translateY(' (ev.clientY - 25 - this.offsetLeft) 'px)';
f.style.transform = 'translateX(' (ev.clientX - 25 - this.offsetTop) 'px)';
};
</script>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 - transform -- 经典旋转正方体</title>
</head>
<style>
ul{
position: relative;
height: 500px;
width: 500px;
list-style: none;
margin: 100px auto;
transform-style: preserve-3d;
animation: ani 4s linear 0s infinite;
}
li{
position:absolute;
height: 500px;
width: 500px;
font-size: 32px;
text-align: center;
line-height: 500px;
backface-visibility: hidden;
}
.w_noodle-1 {
background-color: green;
transform: translateZ(250px);
}
.w_noodle-2 {
background-color: yellow;
transform: rotateY(90deg) translateZ(250px);
}
.w_noodle-3 {
background-color: orange;
transform: rotateX(90deg) translateZ(250px);
}
.w_noodle-4 {
background-color: red;
transform: rotateX(-90deg) translateZ(250px);
}
.w_noodle-5 {
background-color:blue;
transform: rotateY(-90deg) translateZ(250px);
}
.w_noodle-6 {
background-color:purple;
transform: rotateX(180deg) translateZ(250px);
}
@keyframes ani{
100%{
transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
<body>
<ul>
<li class="w_noodle-1">1</li>
<li class="w_noodle-2">2</li>
<li class="w_noodle-3">3</li>
<li class="w_noodle-4">4</li>
<li class="w_noodle-5">5</li>
<li class="w_noodle-6">6</li>
</ul>
</body>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 - transform -- 时钟</title>
</head>
<style id="css">
li{
list-style: none;
}
#w_outer{
width: 400px;
height: 400px;
position: absolute;
top:calc(50% - 200px);
left:calc(50% - 200px);
border: 2px solid palegoldenrod;
}
#w_cont{
width: 200px;
height: 200px;
position: absolute;
top:calc(50% - 100px);
left:calc(50% - 100px);
border: 2px solid cyan;
border-radius: 50%;
}
.w_h-item{
width: 4px;
height: 12px;
position: absolute;
top: 0;
left: calc(50% - 2px);
background-color: gray;
transform-origin: 2px 100px;
}
.angle30{transform : rotate(30deg);}
.angle60{transform : rotate(60deg);}
.angle90{transform : rotate(90deg);}
.angle120{transform : rotate(120deg);}
.angle150{transform : rotate(150deg);}
.angle180{transform : rotate(180deg);}
.angle210{transform : rotate(210deg);}
.angle240{transform : rotate(240deg);}
.angle270{transform : rotate(270deg);}
.angle300{transform : rotate(300deg);}
.angle330{transform : rotate(330deg);}
#fixPoint{
width: 10px;
height: 10px;
position: absolute;
top:calc(50% - 5px);
left:calc(50% - 5px);
background-color: cadetblue;
border-radius: 50%;
}
#hour{
width: 6px;
height: 70px;
position:absolute;
top: 40px;
left: calc(50% - 3px);
background-color: darkblue;
transform-origin: 50% 60px;
}
#minute{
width: 4px;
height: 75px;
position:absolute;
top: 35px;
left: calc(50% - 2px);
background-color: yellow;
transform-origin: 50% 65px;
}
#second{
width: 2px;
height: 90px;
position:absolute;
top: 20px;
left: calc(50% - 1px);
background-color: red;
transform-origin: 50% 80px;
}
</style>
<body>
<div id = "w_outer">
<div id = 'w_cont'>
<ul id = "w_hour-line">
<li class = "w_h-item"></li>
<li class = "w_h-item angle30"></li>
<li class = "w_h-item angle60"></li>
<li class = "w_h-item angle90"></li>
<li class = "w_h-item angle120"></li>
<li class = "w_h-item angle150"></li>
<li class = "w_h-item angle180"></li>
<li class = "w_h-item angle210"></li>
<li class = "w_h-item angle240"></li>
<li class = "w_h-item angle270"></li>
<li class = "w_h-item angle300"></li>
<li class = "w_h-item angle330"></li>
</ul>
<div id = "fixPoint"></div>
<!-- 时针 -->
<div id = "hour" class="min"></div>
<!-- 分针 -->
<div id = "minute" class="sec"></div>
<!-- 秒针 -->
<div id = "second" class="circle"></div>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
var hourHand = document.getElementById('hour');
var minuteHand = document.getElementById('minute');
var secondHand = document.getElementById('second');
// 初始化(细节知识点: 如果这里不执行初始化, 在页面显示的内容会有一个闪屏的问题: 分针、时针、秒针，重叠在12点这个位置)
initTime()
// 执行定时器
setInterval(initTime, 1000)
function initTime() {
var nowTime = new Date();
// 求取时针角度(这里 -12 在显示上是正确的)
var hourVal = nowTime.getHours() - 12;
var hourDeg = hourVal / 12 * 360 'deg';
// 求取分针角度
var minuteVal = nowTime.getMinutes();
var minuteDeg = minuteVal / 60 * 360 'deg';
// 求取秒针角度
var secondVal = nowTime.getSeconds();
var seconDeg = secondVal / 60 * 360 'deg';
// 原生方法: 利用 DOM 元素的 style 属性设置
hourHand.style.transform = 'rotate(' hourDeg ')';
minuteHand.style.transform = 'rotate(' minuteDeg ')';
secondHand.style.transform = 'rotate(' seconDeg ')';
}
}
</script>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
p {
width:300px;
height:300px;
background:red;
animation:myfirst 3s infinite alternate;
/* //Firefox */
-moz-animation:myfirst 3s infinite alternate;
/* // Safari and Chrome */
-webkit-animation:myfirst 3s infinite alternate;
/* // Opera */
-o-animation:myfirst 3s infinite alternate;
}
@keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
/* // Firefox */
@-moz-keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
/* // Safari and Chrome */
@-webkit-keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
/* // Opera */
@-o-keyframes myfirst {
from {background:red;}
to {background:yellow;}
}
</style>
<body>
<p>无限循环播放动画效果</p>
</body>
</html>
展示效果如图所示:
<!DOCTYPE html>
<html lang="en">
<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>CSS 动画 -- animation 关键帧动画</title>
</head>
<style>
p {
background-color: skyblue;
font: 96px "Microsoft Yahei";
font-weight: 500;
text-align: center;
color: #f35626;
cursor: pointer;
}
p:hover {
animation:rubberBand 1.5s;
}
@-webkit-keyframes rubberBand{
0%{
-webkit-transform:scale(1);
transform:scale(1)
}
30%{
-webkit-transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75)
}
40%{
-webkit-transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25)
}
60%{
-webkit-transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85)
}
100%{
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes rubberBand{
0%{
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
30%{
-webkit-transform:scaleX(1.25) scaleY(0.75);
-ms-transform:scaleX(1.25) scaleY(0.75);
transform:scaleX(1.25) scaleY(0.75)
}
40%{
-webkit-transform:scaleX(0.75) scaleY(1.25);
-ms-transform:scaleX(0.75) scaleY(1.25);
transform:scaleX(0.75) scaleY(1.25)
}
60%{
-webkit-transform:scaleX(1.15) scaleY(0.85);
-ms-transform:scaleX(1.15) scaleY(0.85);
transform:scaleX(1.15) scaleY(0.85)
}
100%{
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
}
</style>
<body>
<div>
<p>Animate.css</p>
</div>
</body>
<script>
</script>
</html>
展示效果如图所示:
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200 的文章。
如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。
,
