使用简单的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实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
html5表单的required属性使用
Jul 07 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 写文本日志实现代码
2010/05/18 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
在Python中使用正则表达式的方法
2015/08/13 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
pycharm修改file type方式
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
就业自荐书
2013/12/05 职场文书
初中军训感想300字
2014/03/05 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
作文评语集锦
2014/12/25 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
停电放假通知
2015/04/14 职场文书
个人售房合同协议书
2016/03/21 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL