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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 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产生随机字符串函数
2006/12/06 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
详解jQuery中的事件
2016/12/14 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
token 机制和实现方式
2020/12/15 Javascript
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
python实现京东秒杀功能
2018/07/30 Python
python实现多张图片拼接成大图
2019/01/15 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python如何获取apk的packagename和activity
2020/01/10 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python __slots__的使用方法
2020/11/15 Python
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
经理任命书模板
2014/06/06 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android