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实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
html5中audio支持音频格式的解决方法
Aug 24 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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 模拟$_PUT实现代码
2010/03/15 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
JavaScript"模拟事件"的注意要点详解
2019/02/13 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Python操作Word批量生成文章的方法
2015/07/28 Python
彻底理解Python list切片原理
2017/10/27 Python
Django在win10下的安装并创建工程
2017/11/20 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python set内置函数的具体使用
2019/07/02 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Python异常处理机制结构实例解析
2020/07/23 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
会议承办单位欢迎词
2015/09/30 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫
python单向链表实例详解
2022/05/25 Python