首页 > Web开发 > 详细

《css揭秘》一书中的部分效果实现

时间:2019-12-14 01:25:40      阅读:122      评论:0      收藏:0      [点我收藏+]

介绍

《CSS揭秘》中一些例子的实现,具体如何实现请看控制台或者源代码。

github地址点击前往 示例个人网站(随时可能失效)

第一章:引言

第二章:背景与边框

1.半透明边框

这里是一些随便的文字

2.多重边框

box-shadow

 

outLine

 

3.背景定位

 

4.边框内圆角

这里是一些随便的文字

5.条纹背景

 
 
 

6.复杂的图案

 
 
 
 

7.伪随机背景

 

8.连续的图形边框

 
 
 

第三章:形状

自适应的椭圆

 
 

平行四边形

这里有字

菱形图片

技术分享图片

菱形图片的动画效果(鼠标放置)

技术分享图片

切角效果

梯形标签页样式

Color

简单的饼图

keyframes step次数是frames每次的变换,如果是50%变一次 step(1,end)那就0跳到50变一次再从50到100再变一次

 

第四章:视觉效果

单侧投影

 
 

不规则投影

 
 
 

染色效果

技术分享图片 技术分享图片 技术分享图片 技术分享图片

毛玻璃效果

这里是一点毛玻璃特效上的文字,这里是一点毛玻璃特效上的文字,这里是一点毛玻璃特效上的文字

折角效果(使用less方便)

 
 
 

文字行的斑马条纹 与波浪线示例

xswl i am a people abcdefghijklmnggggggggggg temptation i am a good people temptation temptation temptation

文字效果

鼠标放置图片移动

 

《css揭秘》一书中的部分效果实现

原文:https://www.cnblogs.com/voderl/p/css-secrets-learn.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!