- css3 实现的三种进度条填充效果 11-25
- CSS3 动画 11-25
- 案例分享:CSS3动画——八卦图 11-25
- CSS3点击图片切换效果 11-25
- CSS3炫酷效果 - 动态文字 11-25
- CSS3旋转图标特效 11-25
- CSS3 filter(滤镜) 属性 11-25
- css3实现带渐变的炫酷按钮 11-25
- 每天学点CSS3专题：css3属性选择器 11-25
- 好程序员：简介HTML5+CSS3 11-25
css3 实现的三种进度条填充效果
发布者: superzhang | 发布时间:2017-11-25css3 实现三种进度条填充效果
一般第一、二种比较常用，当网页加载进去，进度条也会加载到100%完成位置！
html结构：
实现样式：
CSS3
动画
CSS3 @keyframes 规则
要创建CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性@keyframes43.04.0 -webkit-10.0案例分享:CSS3动画——八卦图
发布者: superzhang | 发布时间:2017-11-25<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#in>div{
width:150px;
height:80px;
border:1pxsolid #ddd;
position:absolute;
top:310px;
left:425px;
}
#c1{
transform:rotatey(0deg)translatez(200px);
}
#c2{
transform:rotatey(180deg)translatez(200px);
}
#c3{
transform:rotatey(60deg)translatez(200px);
}
#c4{
transform:rotatey(120deg)translatez(200px);<
CSS3点击图片切换效果
发布者: superzhang | 发布时间:2017-11-25可能点击通常用JS 、jq 等来做的多，那么有想过用CSS3来做吗？看一下效果展示吧：
在看一下基本布局吧，
可以看到他们是通过input type类型为 radio 的按钮来实现点击的，通过label 与对应的绑定，后面是四个 div ，每一个div 里面有四个span 。
样式部分 一起要 160多行 ，内容也涉及到很多，关键就是他的这个思路了。
CSS3炫酷效果 - 动态文字
发布者: superzhang | 发布时间:2017-11-25学习了前面CSS3的炫酷效果，想必大家对动画属性有了更加深入的了解，我们接下来继续温习一个CSS3动态图片展示效果，如下图所示：
CSS3动态图片展示效果
一起来看一下核心代码：
.view h2{margin-top: 30px; background: #000; color: #fff; font-size: 16px; font-weight: normal;height: 30px; line-height: 30px;
-moz-transform: translateY(-200px);
-webkit-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
-moz-transition: all 0.2s ease-
CSS3旋转图标特效
发布者: superzhang | 发布时间:2017-11-25CSS3旋转图标特效，常用在企业网站展示栏中，会应用到不同的特效来展现页面的用户体验效果！
如下图：鼠标移上去后会出现图标旋转背景色变幻效果
实现代码
html结构：
css样式：
至于图标大家可以用自己平时积累的或者需求设计稿里面的，这里只是演示，不一定是跟你的需求图标一样的哈！
js代码：
定义和使用
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
默认值:none继承:no动画支持:是。详细可查阅 CSS 动画版本:CSS3JavaScript 语法:object.style.WebkitFilter="grayscale(100%)" 尝试一下 »css3实现带渐变的炫酷按钮
发布者: superzhang | 发布时间:2017-11-25html的css3实现带渐变的炫酷按钮
用到的技术有CSS3的渐变，CSS3动画等
效果图：
实现代码
html:
css:
在css3还未出现之前。我们经常使用标签选择器、类选择器、id选择器等，今天我们开始介绍css3中新增的属性选择器。
第一步，先建立一个html片段
<!--公司里有四个人 老刘 老王 老李 老吴-->
<p worker="laoliu">laoliu</p>
<p worker="lao-wang">laowang</p>
<p worker="laoli">laoli</p>
<p worker="laowu">laowu</p>
我们看到这里
好程序员：简介HTML5+CSS3
发布者: superzhang | 发布时间:2017-11-25|本文由好程序员特训营编辑
|作者：好程序员
如何区分 HTML 和 HTML5？
新特性：
1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：
IE8/IE7/IE6支持通过doc
