- 创意搜素、图像优化……这些工具都可以免费使用！（一） 11-25
- CSS3 transition-duration 属 11-25
- 前端Css3那些事 11-25
- CSS3 icon 属性 11-25
- CSS3如何学习？ 11-25
- 用css3写出一个平行四边形 11-25
- CSS3 animation-direction 属 11-25
- CSS3技巧之形状（平行四边形） 11-25
- CSS3 rotation 属性 11-25
- CSS3优惠券效果的实现 11-25
创意搜素、图像优化……这些工具都可以免费使用！（一）
发布者: superzhang | 发布时间:2017-11-25友情提示：部分网站为国外网站，需科学上网~
-> 免费商务工具 <-
免费网页工具
HTML5 UP: 你在这里可以找到免费的HTML5和CSS3模板。
Bootswatch: 免费Bootstrap网页主题设计。
Templated: 这里集合了845套免费的CSS和HTML5网页模板。
WordPress.org | WordPress.com: 免费创建新网页。
Strikingly: 你可以使用这个服务来创建网页，而且这些网页还可以自适应移动设备。
Layers: WordPress网页开发工具，使用简单，永久免费。
Bootstrap Zero: 全时间最大的开源免费Bootstrap模板。
Landing Harbor: 你可以使用它们的免费登录页面来推广你的移动应用。
免费品牌和LOGO设计工具
Logaster: 专业的在线l
CSS3 transition-duration 属性
发布者: superzhang | 发布时间:2017-11-25实例
最后5秒出现切换效果：
transition-duration: 5s;
-webkit-transition-duration: 5s; /* Safari */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性transition-duration26.04.0 -webkit-10.016.04.0 -moz-6.13.1 -webkit-12.110.5 -o-属性定义及使用说明
前端Css3那些事
发布者: superzhang | 发布时间:2017-11-25CSS3–过渡动画（transition）、变形（transform）
3.1、概述 transition属性
可以让动画在CSS层面实现，此时不是利用setInterval()，不是定时器，而是底层C++在渲染，渲染动画的质量、丝滑程度都要远远优于JS、jQuery。
要颠覆我们传统制作网页动画的思维模式，现在的手机页面中，绝对不会有任何动画是setInterval()完成的，而都是过渡实现的。
今后2~3年，PC端也会这样，过渡会淘汰setInterval()和animate函数。
语法：transition: property duration timing-function delay;时间的单位是：秒（s）。
值 说明 属性值 描述
transition-property 指定CSS属性的name，transition效果 none 没有属性会获得过渡效果。
all 所有属性都将获得过渡效果。
property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration transition效果需要指定多少秒或毫秒才能完成 规定完成过渡效果需要花费的时间（以秒或毫秒计）。
默认值是 0，意味着不会
CSS3 icon 属性
发布者: superzhang | 发布时间:2017-11-25实例
将图像元素设置为图标化的等价物：
img
{
content:icon;
icon:url(imgicon.png);
}
浏览器支持
喜欢的小伙伴抓紧入群了，获取直播链接。
另外，在网上看到有高人总结了下CSS学习的正确姿势，总结的很好，这里贴出来让大家看下，以下为转载内容：
个人将css学习规划成以下三部分（学习CSS是很大、佷泛的问题）
基础有人提到项目驱动学习，的确，实战编码是提高CSS的最佳手段，但不建议新手立马开始实战；因为新手对CSS基础知识不了解，更容易在实际开发中走弯路（不只新手，css基础
用css3写出一个平行四边形
发布者: superzhang | 发布时间:2017-11-25今天要布局的网页背景是一个平行四边形，切图作为背景不好，很影响网页的打开速度，，那么这个平行四边形就css代码写出来，可以用css3的CSS3 transform 旋转的属性写出来，就是transform：skew，全是css代码写的可好了，大爱css3。
先看下效果：
代码如下：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>用css3旋转写平行四边形</title>
<style type="text/css">
.box{width:1200px;margin:100px auto;}
.skew{width:1000px;heigh
CSS3 animation-direction 属性
发布者: superzhang | 发布时间:2017-11-25实例
先执行一遍动画，然后再反向执行一遍动画：
animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性animation-direction43.04.0 -webkit-10.016.05.0 -moz-9.04.0 -webkit-30.015.0 -webkit-12.0 -o-基本变形属性transform有很多，接下来我们用到哪一个说哪一个。
我们一般用skew属性来对矩形进行斜向拉伸，变成平行四边形，但是如果直接对元素使用的话，它里面的内容也会跟着斜向变动。
嵌套元素方案
对容器内容再应用一次反向的skewX()变形，从而抵消容器的变形效果
来看一下html和css具体代码
浏览器支持
CSS3优惠券效果的实现
发布者: superzhang | 发布时间:2017-11-25优惠券一般在商城项目中常用到，今天就来讲解下如何用纯CSS3来实现该效果：
效果图如下：
首先该效果中左右有两个锯齿形的波浪调，背景图还有不同色的间隔，下面来看看实现代码：
html:
具体CSS:
难点实现方法审查元素具体详解：
