使用简单的CSS3属性实现炫酷读者墙效果


Posted in HTML / CSS onJanuary 08, 2014

使用基础的Html和CSS写出雏形 需要一提的是头像(img)的排版。给外面a标签padding-left:;,img自身float:left;margin-left:;,这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法。

使用并解说所用CSS3 接下来给大家说说这个读者墙所应用到的css3属性,及其具体的使用方法,老鸟可以飞了。

渐变: background-image:-webkit-linear-gradient(#aaa,#bbb); 这是最简单的线性渐变,所以写起来也比较爽。

渐变方式:由上至下渐变,#aaa开始,#bbb结束

兼容浏览器的写法:-webkit-linear-gradient,-moz-linear-gradient,-o-linear-gradient,linear-gradient

圆角: border-radius:2px; 不多说,2像素弧度的圆角,对背景、边框、图片都适用。

不要小看这简单的代码,可以当圆规使:

圆角矩形; 椭圆; 圆; 可选择性圆角,border-radius:2px 0 0 2px; 圆角方式:border-radius: a b c d; 顺序是:a=上左、b=上右、c=下右、d=下左;

具体怎么个圆法,靠你练习了,这绝对是CSS3中最最常用到的一个属性;

阴影: box-shadow:len1 len2 len3 len4 color (inset); 详解如下:

len1:第1个长度值用来设置对象的阴影水平偏移值。可为负值; len2:第2个长度值用来设置对象的阴影垂直偏移值。可为负值; len3:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值; len4:如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值; color:设置对象的阴影的颜色。 inset:设置对象的阴影类型为内阴影。不设置时,则对象的阴影类型为外阴影 高级用法:box-shadow:len1 len2 len3 len4 color (inset) , len5 len6 len7 color ; 属性后可以跟多个阴影配置,用逗号隔开。

box-shadow的实际应用相当广泛,不仅可设置对象阴影,还可描边、内发光等等,一般是作为立体效果的按钮。

和box-shadow类似的css3属性text-shadow,设置文本阴影。

变换: transition:property duration timing-function; 这是定义动画的变换方式,也是css3动画的核心。

property 可以是:

all – 表示对象内所有元素执行变换; none – 表示不执行变换; duration 是设置整个变换所用的时间,格式:.2s 或 2s ;

timing-function 是设置变换效果,可以是后面的任意一个:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy;各个值的效果不同,各式各样的变换效果可以满足部分体验的需求。

兼容浏览器的写法:-webkit-transition,-moz-transition,-o-transition,transition

HTML / CSS 相关文章推荐
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 #HTML / CSS
You might like
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
Python 串口读写的实现方法
2019/06/12 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python itertools.product方法代码实例
2020/03/27 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
施工安全协议书
2013/12/11 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
学生自我评价范文
2014/02/02 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
篮球社团活动总结
2014/06/27 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
刘公岛导游词
2015/02/05 职场文书
爱心捐款活动总结
2015/05/09 职场文书
廉洁自律证明
2015/06/24 职场文书
Java中的随机数Random
2022/03/17 Java/Android