CSS3哪些新特性值得称赞


Posted in HTML / CSS onMarch 02, 2016

CSS3到底给我们带来了哪些新特性呢?CSS3哪些新特性值得我们去称赞呢?简单的说,CSS3把很多以前需要使用图片和脚本来实现的效果,只需要短短几行代码就能搞定。
首先还是让大家来看几张效果图,相信大家看到这些效果图,肯定会说这些效果只用CSS是如何实现的呢?
1、3D正方形及动画(如果大家用过webpack的话,一定看过webpack的动画logo吧。听老婆大人说现在流行动画的logo,再也不是那些静止不动的喽 :》。)

CSS3哪些新特性值得称赞

2、3D正方形边框移动

CSS3哪些新特性值得称赞

3、CSS挤压效果

CSS3哪些新特性值得称赞

CSS3哪些新特性值得称赞

在以上的效果中值得一提的特性如:
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,动画方式*/

CSS Code复制内容到剪贴板
  1. @keyframes rotate {    
  2. 0% {    
  3. transform: rotateX(0deg) rotateY(0deg);    
  4. }    
  5. 100% {    
  6. transform: rotateX(360deg) rotateY(360deg);    
  7. }    
  8. }  

 4、CSS filter

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

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

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

CSS3哪些新特性值得称赞

通过以上内容给大家介绍了CSS3新特征值得称赞的地方,希望对大家有所帮助!

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
Apr 28 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 #HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 #HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 #HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 #HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 #HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 #HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 #HTML / CSS
You might like
一个好用的分页函数
2006/11/16 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python简单实例训练(21~30)
2017/11/15 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python连接字符串过程详解
2020/01/06 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
俄语专业毕业生求职信
2014/07/12 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
团员个人总结
2015/02/26 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers