|
|
整体效果
💎知识点：
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>
- /** 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;
- }
|
|
|Archiver|手机版|小黑屋|爬行的蜗牛
( 蒙ICP备2023005932号-1 )
发表于 2024-11-14 23:46:02
