原文:《css3揭秘》的效果code

.在阅读css 揭秘的基础上,跟着书中的效果组合起来的这组代码。 .代码中有四张图片分别是 .jpg .jpg .jpg .jpg 作为demo,图片名称没有语义。 .兼容性: IE上有部分并不兼容,Edge,FF,chrome没有问题。 .下面是一个选择器的实现: .效果如图: ...

2017-08-02 22:04 0 1241 推荐指数:

查看详情

CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)

最近看了《CSS3揭秘》一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找。不得不感叹学无止境哦~ 1、边框与背景 半透明边框 技巧归纳:使用背景剪切属性,将背景的显示不包含边框 background-clip:对背景进行剪切,这个是根据css的盒模型分 ...

Sat Oct 27 00:31:00 CST 2018 0 828
[CSS揭秘]切角效果

将角切掉也是一种流行的设计风格 传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果 有了CSS3,我们完全可以使用新技术来实现 第一种方案: CSS渐变 需求一: 一个矩形需要切掉一个45°角 使用线性渐变来实现 background: #58a ...

Tue May 30 05:00:00 CST 2017 0 1400
CSS3 晃动效果

为自己的目标努力着,全身心投入一件事情。 View Code ...

Sat Jan 21 19:40:00 CST 2017 0 1705
css3箭头效果

css3 record1 尝试用css写了个箭头效果 思路就是通过span和span子元素i分别通过设置他们的伪元素构造两个箭头,但是i构造的箭头两条线height都是0,hover的时候渐近的动画效果就是i箭头的高度变化而来的,还有rotate相同的角度 css3知识 ...

Wed Nov 26 00:37:00 CST 2014 0 5478
css3 圆角效果

传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox ...

Thu May 23 16:55:00 CST 2019 0 529
css3放大效果

一,css3代码 二、源码 ...

Tue Jun 12 06:14:00 CST 2018 0 3160
css3开门效果

css3瞎捣鼓,弄个开门的小效果,只针对webkit内核浏览器,最好用谷歌打开,其他高级浏览器的兼容代码就没写了 <style> .door{ position:relative; width:400px; height:300px ...

Thu Mar 13 00:37:00 CST 2014 8 2772
css3阴影效果

效果图: 更好的讲解:http://demo.doyoe.com/css3/box-shadow/ ...

Tue Jan 29 06:46:00 CST 2013 0 10853
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM