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中Color的一些特性介绍
May 27 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3绘制有活力的链接下划线
Jul 14 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 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
坏狼的PHP学习教程之第2天
2008/06/15 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php去除重复字的实现代码
2011/09/16 PHP
php中文验证码实现方法
2015/06/18 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JQuery Ajax 异步操作之动态添加节点功能
2017/05/24 jQuery
自制简易打赏功能的实例
2017/09/02 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
详解Python的三种可变参数
2019/05/08 Python
Python文件操作方法详解
2020/02/09 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
毕业生自荐书
2014/02/02 职场文书
节水口号标语
2014/06/19 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
SSM VUE Axios详解
2021/10/05 Vue.js