beautifulsoup css选择器（一篇带你用纯css实现beautiful按钮","p":true,"g":[{"type":"sug","sa":"s_1","q":"beautifulsoup css选择器"}],"slid":"19217993370718","qu

一、基础储备

实现这些漂亮的按钮主要利用了一些CSS的属性，主要有animation、background-size、background-position、linear-gradient(),下面对这四个内容进行简要概述。

1.1 animation

animation 属性用来指定一组或多组动画，每组之间用逗号相隔，其语法如下所示，详细用法可参考MDN：

1. animation:namedurationtiming-functiondelayiteration-countdirection;

1.2 background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸，其语法如下所示，详细用法可参考MDN：

1. animation:namedurationtiming-functiondelayiteration-countdirection;

1.3 background-position

background-position 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的，详细用法可参考MDN.

在使用这个属性时有一个位置必须特别注意，否则很难理解为什么background-position指定的位置和自己想要的不一样，这个位置就是其百分比的计算公式，通过下面公式就可以理解设定百分比后背景图片成了什么结果了：

1. background-postion:xy;
2. x：{容器(container)的宽度—背景图片的宽度}*x百分比，超出的部分隐藏。
3. y：{容器(container)的高度—背景图片的高度}*y百分比，超出的部分隐藏。

1.4 linear-gradient

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型，其语法如下所示，详细用法可参考MDN：

1. background-image:linear-gradient(direction,color-stop1,color-stop2,...);

二、效果实现

下面的四种动画效果其实就是充分利用CSS属性实现的，让我们具体来看看都是如何实现的。

2.1 弹跳效果

第一种效果是弹跳效果，所谓弹跳效果就是按钮在大小之间变换，其思想如下：

创建一个静态的按钮;

然后利用animation属性，创建动画，当变换到50%时，按钮变换到1.2倍，到动画100%时按钮又恢复原样.

1. <divclass="button1">
2. <span>立即下载</span>
3. </div>

1. .button1{
2. width:200px;
3. height:46px;
4. line-height:46px;
5. background:#2e82ff;
6. color:#ffffff;
7. font-size:18px;
8. border-radius:27px;
9. animation:zoomIn1.5sinfinite;
10. text-align:center;
11. }
12. @keyframeszoomIn{
13. 50%{
14. transform:scale(1.2);
15. }
16. 100%{
17. transform:scale(1);
18. }
19. }

2.2 颜色渐变效果

第二种是颜色渐变效果，所谓颜色渐变效果就是颜色从一种颜色到另一种颜色，然后循环如此，其思想如下：

1. 创建一个静态按钮;
2. 添加渐变颜色对称的的背景色;
3. 背景色x轴方向拉伸至200%，这样就可以让原来对称轴处的背景色由中间到了右侧;
4. 最后利用animation实现操作位置的动画，模拟出颜色不断渐变的动画。

1. <divclass="button2">
2. <span>立即下载</span>
3. </div>

1. .button2{
2. display:inline-block;
3. width:200px;
4. height:46px;
5. line-height:46px;
6. color:#ffffff;
7. font-size:18px;
8. border-radius:27px;
9. text-align:center;
10. background-image:linear-gradient(toright,#ff33000%,#eb440225%,#ffc40450%,#eb440275%,#ff3300100%);
11. background-size:200%;
12. animation:colorGradient1.5sinfinite;
13. }
15. @keyframescolorGradient{
16. 0%{
17. background-position:00;
18. }
19. 100%{
20. background-position:100%0;
21. }
22. }

2.3 扫光效果

第三种是扫光效果，所谓扫光指的就是一个白色透明颜色从一端不断向另一端扫描，其思想如下：

1. 创建一个静态按钮;
2. 在静态按钮前利用::before伪元素，设置该元素的背景色为白色微透明的颜色，并将该中心位置通过缩放移动到容器右侧;
3. 利用animation实现动画，并不断变换位置实现扫光效果。

1. <divclass="button3">
2. <span>立即下载</span>
3. </div>

1. .button3{
2. width:200px;
3. height:46px;
4. line-height:46px;
5. background-color:#2e82ff;
6. color:#ffffff;
7. font-size:18px;
8. text-align:center;
9. border-radius:27px;
10. position:relative;
11. }
12. .button3::before{
13. content:"";
14. position:absolute;
15. left:0px;
16. width:100%;
17. height:100%;
18. background-image:
19. linear-gradient(toright,rgba(255,255,255,0)30%,rgba(255,255,255,0.2)50%,rgba(255,255,255,0)70%);
20. background-size:200%;
21. animation:wipes1sinfinite;
22. }
23. @keyframeswipes{
24. 0%{
25. background-position:00;
26. }
27. 100%{
28. background-position:100%0;
29. }
30. }

2.4 霓虹灯效果

第四种是霓虹灯效果，所谓霓虹灯效果其实更像一种斜线在不断移动，其原理如下所示：

1. 创建一个静态按钮;
2. 在静态按钮前利用::before伪元素，设置该元素的背景色为倾斜的霓虹灯效果，该效果实现是通过创建一个20px * 20px的正方形背景，然后利用linear-gradient将背景色135°方向渐变倾斜，实现小返回的霓虹灯，然后通过背景不断repeat实现整个的效果;
3. 利用animation实现动画，并不断变换位置实现霓虹灯效果。

1. <divclass="button4">
2. <span>立即下载</span>
3. </div>

1. .button4{
2. width:200px;
3. height:46px;
4. line-height:46px;
5. background:#2e82ff;
6. color:#ffffff;
7. font-size:18px;
8. border-radius:27px;
9. text-align:center;
10. position:relative;
11. overflow:hidden;
12. }
13. .button4:before{
14. content:"";
15. position:absolute;
16. left:0px;
17. width:100%;
18. height:100%;
19. background-size:20px20px;
20. background-image:linear-gradient(135deg,rgba(255,0,0,0.1)0%,rgba(255,0,0,0.1)25%,rgba(255,255,255,0.1)25%,rgba(255,255,255,0.1)50%,rgba(255,0,0,0.1)50%,rgba(255,0,0,0.1)75%,rgba(255,255,255,0.1)75%,rgba(255,255,255,0.1)100%);
21. animation:moveblock0.5slinearinfinite;
22. }
23. @keyframesmoveblock{
24. 0%{
25. background-position:0px0px;
26. }
27. 100%{
28. background-position:20px0px;
29. }
30. }

原文链接：https://mp.weixin.qq.com/s/LwBJwhkfRholthXqwuIB8A

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *