标签:bezier round 定义 UNC 速度 line 代码 back 你知道
当你知道一个元素的初始状态和最终状态,你想要这个元素从初始到最终,比如你想让一个div从红色变成蓝色,但又不想那么生硬的直接变过去,这时候就可以使用过渡了。
transition: property duration timing-function delay;
如下代码,将鼠标移上去,div
元素会变宽,有一个动画的效果,在开始之前设定div的宽度,再:hover
上又重新定义了该元素的宽度,于是开始和最终的状态都有了,中间的动画效果,由浏览器自己去处理。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /*后面两个参数不写,浏览器会使用默认的值*/
}
.container:hover{
width: 400px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
以上面代码为例,来看看这些时间曲线有什么不同
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
以上这列可以在浏览器自带的调试器的CSS属性面板那调试,直到满意为止
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s; /*后面两个参数不写,浏览器会使用默认的值*/
transition-timing-function: cubic-bezier(0.95, -0.18, 0, 0.46);
}
.container:hover{
width: 400px;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
延时执行的时间
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width 2s cubic-bezier(0.95, -0.18, 0, 0.46) 1s;
}
关键代码
transition: width,height,background 2s,2s, 1s;
也可以写成下面的样子
transition-property: width,height,background;
transition-duration: 2s,2s, 1s;
完整代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition: width,height,background 2s,2s, 1s;
}
.container:hover{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
上面是通过鼠标移上去才过渡的,但如果是点击这种怎么搞,CSS没这玩意的伪类啊
通过js添加类来达到效果
第一步:把最终的状态类写上
.container-click{
width: 400px;
height: 400px;
background: pink;
}
第二步:写js代码,记得给div加个id,如下
let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}
完整代码
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
.container{
width: 200px;
height: 200px;
background: skyblue;
transition-property: width,height,background;
transition-duration: 2s,2s, 1s;
}
.container-click{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div class="container" id="div"></div>
<script type="text/javascript">
let num = 0;
let div = document.getElementById('div');
div.onclick = function(){
if(num === 0){
div.classList.add("container-click");
num = 1;
}else{
div.classList.remove("container-click");
num = 0;
}
}
</script>
</body>
</html>
标签:bezier round 定义 UNC 速度 line 代码 back 你知道
原文地址:https://www.cnblogs.com/tourey-fatty/p/12088643.html