直线——扩展收缩动画
2020-07-22 本文已影响0人
CondorHero
昨天把 Google 浏览器的历史记录和缓存全给清除了，然后今天登陆蓝湖就的输入密码了，登陆的时候发现了蓝湖注册页的交互还不错，很有必要研究下。
可以去体验下：蓝湖注册页，演示动图已经过我的改动了，截止当前时间 Wednesday, July 22, 2020 00:37:04，蓝湖邮箱栏目聚焦的时候有直线没动画。设置密码聚焦的时候直线有展开收缩动画。
直线——扩展收缩动画
涉及的难点就是 CSS3 transition和 transform。不了解的先去看看，练熟悉之后再来。😁
一、正方形的缩放
为了更好的理解我们先来看看正方形的缩放效果：
正方形的缩放
源代码思路：
-
hover之前div不显示，通过transform: scale(0);来隐藏 -
hover之中div显示，通过transform: scale(1);来显示 - 缩放围绕中心点进行，通过
transform-origin: center;或transform-origin: 50%;来控制，默认就是以中心点进行缩放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 100px auto;
width: 500px;
}
div:nth-child(1){
width: 100px;
line-height: 30px;
text-align: center;
border: 4px double red;
}
div:nth-child(1):hover + div {
transform: scale(1);
}
div:nth-child(2){
transition: transform 0.5s ease 0s;
transform: scale(0);
/*默认transform-origin: center;*/
transform-origin: center;
width: 100px;
height: 100px;
background-color: #33eecc;
}
</style>
</head>
<body>
<section>
<div>请hover我</div>
<div></div>
</section>
</body>
</html>
二、直线展开收起
直线展开收起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方形的缩放</title>
<style>
*{margin: 0; padding: 0;}
section{
margin: 100px auto;
width: 400px;
position: relative;
}
div:nth-child(1){
width: 100px;
line-height: 30px;
text-align: center;
cursor: pointer;
border: 4px double red;
margin-bottom: 20px;
}
hr:nth-child(3){
width: 100px;
height: 1px;
/*hr默认style=inset,border=1px*/
border-style: none;
border-width: 0;
background-color: rgba(0, 0, 0, 0.4);
}
hr:nth-child(2){
position: absolute;
top: 57px;
border-style: none;
border-width: 0;
transition: transform .8s cubic-bezier(.23,1,.32,1) 0s;
transform: scaleX(0);
transform-origin: 50%;
width: 100px;
height: 2px;
background-color: #2878ff;
}
.focus-line + hr{
transform: scaleX(1);
}
.blur-line + hr {
transform: scaleX(0);
}
</style>
</head>
<body>
<section>
<div id="btn">点击鼠标</div>
<hr />
<hr />
</section>
<script>
const btn = document.getElementById("btn");
btn.onmousedown = function(){
this.classList.remove("blur-line");
this.classList.add("focus-line");
this.textContent = "松开鼠标";
}
btn.onmouseup = function(){
this.classList.remove("focus-line");
this.classList.add("blur-line");
this.textContent = "点击鼠标";
}
</script>
</body>
</html>
当前时间 Wednesday, July 22, 2020 01:46:31
