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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
基于Html5实现的语音搜索功能
May 13 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
python对excel文档去重及求和的实例
2018/04/18 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
简单了解python数组的基本操作
2019/11/26 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
中国电视购物:快乐购
2017/02/04 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
搞笑征婚广告词
2014/03/17 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
设备收款委托书范本
2014/10/02 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
redis实现排行榜功能
2021/05/24 Redis