Html5和CSS3相信大家现在都已不陌生了吧,但CSS3哪些新特性值得我们去称赞呢?

首先还是让大家来看几张效果图,相信大家看到这些效果图,肯定会说这些效果只用CSS是如何实现的呢?

1、3D正方形及动画(如果大家用过webpack的话,一定看过webpack的动画logo吧。听老婆大人说现在流行动画的logo,再也不是那些静止不动的喽 :》。)

2、3D正方形边框移动

3、CSS挤压效果

在以上的效果中值得一提的特性如:

1、CSS进行渐变背影的设置,在background中添加了linear-gradient线性渐变,

   background: linear-gradient(yellow 0%, #000 80%);  /*从0%黄色到80%黑色的渐变*/

2、CSS 3D

  perspective:查看视图的位置,如拍照时的镜头位置一样。

  transform-style中preserve-3d,设置了此属性时,将子元素包裹在一个3D视图里。

3、CSS animation

  说到动画就不得不说jQuery的animation。但有了CSS3后就再也不用JS进行制作动画了。

  keyframes定义帧动画,可根据百分比进行设置,也可利用from和to的方式进行设置。

  利用animation引用定义好的keyframes帧动画。animation:rotate 20s infinite linear; /*设置引用的动画,动画时间,动画的timing-function,动画方式*/

@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}

 4、CSS filter

  fileter并非IE的过滤器,是CSS3中新添加的属性。

  包含效果有:grayscale灰度,sepia褐色,saturate饱和度,hue-rotate色相旋转,invert反色,opacity透明度,brightness亮度,contrast对比度,blur模糊,drop-shadow阴影.

  挤压效果就是利用filter中的blur加saturate混合而来。

    

CSS3 值得称赞新特性的更多相关文章

  1. 02. css3有哪些新特性?

    2.css3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...

  2. HTML5和CSS3的一些新特性

    html5有哪些新特性.移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? 新特性: 1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标 ...

  3. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  4. CSS3中的新特性

    一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...

  5. css3中的新特性经典应用

    这篇文章主要分析css3新特性的典型应用,都是干活,没得水分. 1.动画属性:animation. 利用animation可以实现元素的动画效果,他是一个简写属性,用于设置6个动画属性:aminati ...

  6. [css] css3 中的新特性加强记忆

    css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webki ...

  7. css3有哪些新特性?

    新选择器,属性选择器.伪类选择器.层次选择器... 圆角属性border-radius font-face加载服务器端的字体 多列布局column 阴影shadow 弹性盒flex 过渡transit ...

  8. css3有哪些新特性

    转载:http://blog.csdn.net/lxcao/article/details/52797914

  9. CSS3中有哪些新特性

    新增各种CSS选择器 (: not(.input):所有 class 不是"input"的节点) 圆角 (border-radius:8px) 多列布局 (multi-column ...

随机推荐

  1. .NET平台开源项目速览(13)机器学习组件Accord.NET框架功能介绍

    Accord.NET Framework是在AForge.NET项目的基础上封装和进一步开发而来.因为AForge.NET更注重与一些底层和广度,而Accord.NET Framework更注重与机器 ...

  2. dubbox微服务实例及引发的“血案”

    Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. 主要核心部件: Remoting: 网络通信框架 ...

  3. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  4. Spring的数据库开发

                                Spring JDBC框架操作mysql数据库 Spring中的JDBC为我们省去连接和关闭数据库的代码,我们着重关注对数据库的操作.Sprin ...

  5. Linux杀死进程,查看进程

    http://blog.csdn.net/wojiaopanpan/article/details/7286430/

  6. iOS 自定义方法 - 不完整边框

    示例代码 ///////////////////////////OC.h////////////////////////// ////  UIView+FreeBorder.h//  BHBFreeB ...

  7. Greenplum 的分布式框架结构

    Greenplum 的分布式框架结构 1.基本架构 Greenplum(以下简称 GPDB)是一款典型的 Shared-Nothing 分布式数据库系统.GPDB 拥有一个中控节点( Master ) ...

  8. 编写一个通用的Makefile文件

    1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...

  9. centos6.5 nginx-1.8.0和ftp搭建图片服务器

    一.Nginx的安装步骤 1.Nginx安装环境: gcc: 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有gcc环境,需要安装gcc:yum install gcc-c+ ...

  10. Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度

    Matrix4x4 // 重置矩阵 ][]) { m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] ...