• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > 使用简单的CSS3属性实现炫酷读者墙效果

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3属性,css3属性选择器,css3属性大全,css3新增属性,css3动画属性等相关知识,佚名 希望在学习及工作中可以帮助到您
使用基础的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 </div>

您可能想查找下面的文章:

  • 总结30个CSS3选择器
  • CSS3利用text-shadow属性实现多种效果的文字样式展现方法
  • CSS3的column-fill属性对齐列内容高度的用法详解
  • CSS3中的常用选择器使用示例整理
  • CSS3中各种颜色属性的使用教程
  • CSS3中的content属性使用示例
  • 使用CSS3制作一个简单的Chrome模拟器
  • css3选择器基本介绍
  • CSS3属性background-size使用指南
  • CSS3属性box-shadow使用指南

相关文章

  • 2017-06-02HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
  • 2017-06-02基于css3的属性transition制作菜单导航效果
  • 2017-06-02使用CSS3的rem属性制作响应式页面布局的要点解析
  • 2017-06-02css3的@media属性实现页面响应式布局示例代码
  • 2017-06-02一款纯css3实现的竖形二级导航的实例教程
  • 2017-06-02CSS3 text-shadow实现文字阴影效果
  • 2017-06-02浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
  • 2017-06-02CSS3正方体旋转示例代码
  • 2017-06-02CSS3中各种颜色属性的使用教程
  • 2017-06-02CSS3中:nth-child和:nth-of-type的区别深入理解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用CSS3来绘制一个月食图案
    • CSS3制作圆角图片和椭圆形图片
    • CSS中越界问题的经典解决方案【推荐】
    • 你应该知道的30个css选择器
    • CSS3 滤镜 webkit-filter详细介绍及使用方法
    • 基于CSS3实现图片模糊过滤效果
    • CSS3 选择器 伪类选择器介绍
    • 利用css3-animation实现逐帧动画效果
    • CSS3弹性盒模型开发笔记(二)
    • 巧用CSS3 border实现图片遮罩效果代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有