使用简单的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进度条效果
Feb 22 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3中currentColor关键字的妙用
Feb 27 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
CSS的class与id常用的命名规则
May 18 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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中的数组操作函数整理
2008/08/18 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
Yii数据读取与跳转参数传递用法实例分析
2016/07/12 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
轻松创建nodejs服务器(1):一个简单nodejs服务器例子
2014/12/18 NodeJs
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
python检测lvs real server状态
2014/01/22 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
模特职业生涯规划范文
2014/02/26 职场文书
秋天的图画教学反思
2014/05/01 职场文书
父亲节活动策划方案
2014/08/24 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书