CSS3回顾系列0
2016-06-10 15:01
459 查看
媒体查询
媒体查询包括一种媒体类型(以及通过使用宽高,颜色等媒体特征来限制样式表作用域的表达式).作为新增在CSS3中的特性,可以使得内容个性定制化呈现在不同特定输出设备上面,而不必改变内容本身.
语法
一行代码胜千言:<!-- CSS media query on a link element --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a stylesheet --> <style> @media (max-width: 600px) { .facet_sidebar { display: none; } } </style>
逻辑操作符
包含and,not,only.@media tv and (min-width: 700px) and (orientation: landscape) { ... } //Now the above media query will only apply if the media type is TV, the viewport is 700px or wider, and the display is in landscape.
//Comma-separated lists,其实逗号前后就是或的关系 @media (min-width: 700px), handheld and (orientation: landscape) { ... }
@media not all and (monochrome) {...} //monochrome黑白,and this expression equivalents to @media not (all and (monochrome)) {...}
@media not screen and (color), print and (color) {...} //evaluated like this @media (not (screen and (color))), print and (color) {...}
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
我突然发现平常接触的媒体特征特别有限:宽高,orientation,device-width,device-height,monochrome…其实还有许许多多媒体特征比如color,color-index,aspect-ratio,device-aspect-ratio,display-mode…带-moz- -webkit-前缀的也有许多.
css计数器
计数器的值可以通过使用counter-set来操控.counter-increment可以通过content属性counter(),counters()方法的使用来显示在页面上.一行代码胜千言:
<h3>Introduction</h3> <h3>Body</h3> <h3>Conclusion</h3>
body { counter-reset: section; //set the section counter to 0. } h3::before { counter-increment: section; //increment the section counter content: "Section" counter(section) ": "; //Display the counter }
渐变
CSS渐变是CSS3 Image Module当中标签的新类型.这样可以避免为了达到同样效果而使用的许多图片,于是可以减少下载时间和带宽.浏览器支持linear-gradient()和radial-gradient().linear-gradient()
<div class="linear-gradient"></div>
.linear=gradient { width: 100px; height: 100px; //The old syntax, deprecated and prefixed, for old browsers. background: -prefix-linear-gradient(left top, blue, white); //The new syntax needed for standard-compaliant browsers (Opera 12.1, IE10, Firefox 16, Chrome 26, Safari 16.1), without prefix background: linear-gradient(to bototm right, blue, white); //you can also give angles,你也可以指定角度:底边为x轴,左边为y轴,逆时针. background: linear-gradient(70deg, red, white); //you can also specify Color Stops as many as you can and first & last default to be 0% and 100%. background: linear-gradient(top, red, blue 80%, white); //you can also specify Color Stops without locations averagely. background: linear-gradient(to right, red, orange, yellow, green, blue, purple); //you can also create gradient transpareny, but some broswers would mistake rgba(0, 0, 0, 0) and rgba(255, 255, 255, 0), so it would be unsafe and you'd better use opaque gradients. backround: linear(to top, rgba(255, 255, 255, 0) rgba(255, 255, 255, 1)), url(https://foo.com/bar.img); }
radial-gradient()
语法上与linear-gradient相似,但是radial-gradient可以指定形状和大小,默认是和容器宽高成比例的椭圆.Color stops
background: radial-gradient(red 5%, yellow 25%, lime 50%);
size
background: radial-gradient(ellipse closest-side, red, yellow 10%, blue 50%, white); background: radial-gradient(ellipse farest-corner, black, green 20%, orange 70%, arial);
repeating gradients
repeat-linear-gradient和repeat-radial-gradient可以弥补linear-gradient和radial-gradient条纹状重复特性的缺失.background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
变换
通过变化坐标系空间, CSS transforms 在不中断正常文档流的情况下改变了受影响内容的形状和位置. CSS transforms 通过使用一套CSS属性集来对HTML元素并行地应用线性变换.这些变换包括平面和立体上的rotation, skewing, scaling, translation.transform properties
transform-origin
默认是元素的中心.rotation, scaling, skewing变换需要该参数.transform
具体变换列表,一个接着一个进行变换.示例
rotate
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
skewing and translating
<div style="transform: skewx(10deg) translatex(150px); transform-origin: botoom left;"> <iframe src="https://www.google.com/" width="600" height="500"></iframe> </div>
动画
CSS animate使得动画可以从一个样式配置过渡到另一个样式配置.动画有两部分组成:描述CSS动画的样式,可以描述从0%到100%中间任何时刻样式的关键帧.好处有:
1. 方便使用简单动画,不依赖JS.
2. 浏览器支持地好,性能好于未经优化的JS动画.渲染引擎使用跳帧技术使得动画变得很和缓.
3. 动画序列控制权交给浏览器使得浏览器有许多方式来优化性能和效率,比如说减少tabs当前运行但不可见动画的刷新频率
动画配置
包括animation-delay,animation-direction,animation-duration,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,animation-fill-mode.示例:
p { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; } @keyframs slidein { //0% from { margin-left: 100%; // <p> element should set in a container and give "overflow: hidden;" to it. width: 300%; } 75% { font-size: 300%; margin-left: 25%; width: 150%; } //100% to { margin-left: 0%; width: 100%; } }
还可以给动画添加事件监听
AnimationEvent 对象可以用来检测动画开始,结束,循环.add event listeners
//与之前的动画为例 var e = document.getElementById("watchme"); e.addEventListener("animationstart", listener, false); e.addEventListener("animationend", listener, false); e.addEventListener("animationiteration", listener, false); //start the animation e.className = "slidein";
receive the events
function listener(e) { var l = document.createElment("li"); switch(e.type) { case "animationstart" : l.innerHTML = "Started: elapsed time is: " + e.elapsedTime; break; case "animationend": l.innerHTML = "End: elapsed time is: " + e.elapsedTime; break; case "animationiteration": l.innerHTML = "Iteration: elapsed time is: " + e.elapsedTime; break; } document.getElementById("output").appendChild("l"); }
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 新时代编辑神器:Atom
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- jQuery CSS3相结合实现时钟插件
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- CSS3中Transition属性详解以及示例分享
- 基于jQuery和CSS3制作响应式水平时间轴附源码下载
- jquery+CSS3模拟Path2.0动画菜单效果代码