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 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
使用CSS实现六边形的图片效果
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
打造计数器DIY三步曲(上)
2006/10/09 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python pandas库中的isnull()详解
2019/12/26 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
教导处工作制度
2014/01/18 职场文书
学习礼仪心得体会
2014/09/01 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
行政处罚事先告知书
2015/07/01 职场文书
婚宴新娘致辞
2015/07/28 职场文书
Java spring定时任务详解
2021/10/05 Java/Android