有趣的css - 双开门按钮
整体效果💎知识点：
1️：before 以及 :after 伪元素
2️：transform 以及 transition 属性
3️：flex 布局以及 position 定位
4️：hover 选择器
🔑思路：
定义好按钮通用样式，然后利用伪元素绘制两个矩形背景，当鼠标悬浮在按钮上方时，两个伪元素矩形背景过渡显示出来。
一个双开门的按钮，交互效果比较强，但是实现很简单，快学起来吧。
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
HTML代码<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>双开门按钮</title>
</head>
<body>
<div class="app">
<button class="btn69">button</button>
</div>
</body>
</html>CSS部分代码/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.btn69{
width: 120px;
height: 50px;
background-color: transparent;
color: #333333;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
border: none;
cursor: pointer;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transition: color 0.3s ease-in-out;
}
.btn69:before,.btn69:after{
content: '';
width: 0;
height: 50px;
background-color: #0093E9;
position: absolute;
top: 0;
right: 60px;
z-index: -1;
transition: width 0.3s ease-in-out;
}
.btn69:after{
left: 60px;
}
.btn69:hover:before,.btn69:hover:after{
width: 60px;
}
.btn69:hover{
color: #ffffff;
}
页:
[1]