关于css3:HTMLCSS完成毛玻璃发光按钮的制作

39次阅读

共计 1031 个字符，预计需要花费 3 分钟才能阅读完成。

### 一. 前置常识

HTML
CSS3
### 二. 案列成果

## 三. 重要参数筹备

1. 页面背景色 –background-color: #350048;

2. 父容器宽度 –container-width: 600px;

3. 按钮宽度 –bth-width: 155px;

4. 按钮高度 –btn-height: 50px;

5. 按钮背景色 –btn-a-background-color: rgba(255,255,255,0.05);

6. 按钮暗影色 –btn-a-box-shadow: 0 15px 35px rgba(0,0,0,0.2);

7. 按钮边框色彩 –btn-a-border-top-color:rgba(255,255,255,0.1);

8. 按钮圆角 –btn-a-border-radius:30px;

9. 按钮字体色彩 –btn-a-color: #fff;

10. 按钮为元素背景色 –btn-a-before-background-color:rgba(255, 255, 255, 0.15) 11. 按钮背景伪元素的宽高 –btn-before-background-width:30px;

–btn-before-background-height:10px;
–btn-after-background-width:30px;
–btn-after-background-height:10px;
12 鼠标挪动时按钮背景伪元素宽高 height: 50%;
width: 80%;
13 伪元素背景色和暗影
1. 背景 1
background: #ff1f71;
box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px #ff1f71;
2. 背景 2
background: #2bd2ff;
box-shadow: 0 0 5px #2bd2ff, 0 0 15px #2bd2ff, 0 0 30px #2bd2ff, 0 0 60px #2bd2ff;
3. 背景 3
background: #1eff45;
box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45, 0 0 60px #1eff45;undefined}undefined