CSS3 实现别样图型-白红宇

CSS3 实现别样图型

阅读量：6627 次

发布时间：2019-06-25

本文共 3873 字，大约阅读时间需要 12 分钟。

1.爱心

利用 div 的正方形和伪类的圆型组合而成

View Code

2.气泡悬浮框

利用 border 结合 transparent 特性实现

View Code

3.切角

利用使用线性渐变实现的

View Code

4.弧形切角

使用径向渐变实现

            
                                      弧形切角

View Code

5.梯形

利用伪类加旋转透视实现

            
                                      梯形

View Code

6.饼图

利用伪类、线性渐变、旋转实现

            
                                      饼图

View Code

7.平行四边形

利用伪类、拉伸实现

            
                                      平行四边形

View Code

8.折角

利用切角、伪类、渐变、旋转实现

            
                                      折角

View Code

9.纯CSS 方案实现背景变暗效果（hover按钮触发）

鼠标移入

利用 box-shadow 实现

            
                                      背景变暗效果

View Code

10.条纹背景图

主要是利用渐变实现

            
                                      条纹背景图

View Code

            
                                      条纹背景图

View Code

            
                                      条纹背景图

View Code

11.混合模式背景图

            
                                      混合模式背景图

View Code

12.太阳（动态）

利用线性渐变、阴影、旋转实现

            
                                      太阳

View Code

13.多云（动态）

利用线性渐变、阴影、缩放实现

            
                                      多云

View Code

            
                                      多云

View Code

14.雨（动态）

利用线性渐变、阴影、缩放实现

雨

View Code

15.微风（动态）

利用border、transparent、实现，这个会多一层 div.breeze-container 包裹

            
                                      微风

View Code

16.彩虹（动态）

主要是利用border、box-shadow 实现

            
                                      彩虹

View Code

17.夜空（动态）

主要是利用 box-shadow 实现

            
                                      夜空

View Code

18.雷电（动态）

主要是利用阴影、border实现

            
                                      雷电

View Code

19.大雪（动态）

利用阴影实现

            
                                      大雪

View Code

20.五角星

主要是利用border、transparent、旋转实现

            
                                      五角星

View Code

21.太极八卦

利用 box-shadow 实现

            
                                      太极八卦

View Code

22.美队盾牌

利用渐变实现

            
                                      美国盾牌

View Code

23.纽扣

利用渐变、阴影实现

            
                                      纽扣

View Code

24.Chrome

利用渐变实现

            
                                      Chrome

View Code

25.Opera

利用渐变实现

            
                                      Opera

View Code

26.IE

利用渐变、多重阴影实现

IE

View Code

27.safari

利用渐变、border、旋转实现

            
                                      safari

View Code

28.firefox

利用多重阴影实现

            
                                      firefox

View Code

29.搜狗

利用文字、阴影实现

            
                                      搜狗

View Code

30.利用滤镜实现混合

利用 fliter:blur() 、filter:contrast() 实现

            
                                      利用滤镜实现混合效果

View Code

参考地址：https://juejin.im/post/5a446d19f265da43052eebcc

转载于:https://www.cnblogs.com/Han39/p/8178178.html

你可能感兴趣的文章

黄聪：用php判断当前用户访问网站是否为手机登录

查看>>

Flash AS3 Loader的一些总结

查看>>

.net（vs2010）调试技巧

查看>>

45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】

查看>>

js的逻辑 OR 运算符- ||

查看>>

[SQL Server]一次执行资料夹内的.sql 指令码

[Compose] 19. Leapfrogging types with Traversable

查看>>

Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web modules

BZOJ 2456: mode(新生必做的水题)

【java.lang.UnsupportedClassVersionError】版本不一致出错

查看>>