一、IE的兼容
兼容
<!--[if IE 6]>
<p>为了您和家人的健康，请远离IE6！！</p>
<![endif]-->
<!--[if IE 8]>
<p>当前浏览器是IE8！！</p>
<![endif]-->
<!--[if lt IE 9]>
<p>该标签会在IE9以下的浏览器中显示</p>
<![endif]-->
<!--[if gte IE 9]>
<p>该标签会在IE9及以上的浏览器中显示</p>
<![endif]-->
<!--[if lte IE 9]>
<p>该标签会在IE9及以下的浏览器中显示</p>
<![endif]-->
<!--[if ! IE 6]>
<p>你的浏览器不是IE6</p>
<![endif]-->*/
属性
希望黄色背景只在IE6中生效
在样式前添加一个下划线，则该样式只有IE6及以下的浏览器才可以识别
*/
/*_background-color: yellow;*/
/*添加了*的样式只有IE7及以下的浏览器认识*/
/**background-color: yellow;*/
/*在样式最后添加一个\0，则只有IE8及以上的浏览器才能识别*/
/*background-color: yellow\0;*/
/*
CSS Hack不到万不得已的情况尽量不要使用
*/
/*
在选择器前添加* html 则该选择器只有IE6可以识别
*/
* html body{
background-color: #bfa;
}
二、过度动画
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
/*在哪产生动画、动画的时间、运动曲线、延迟*/
/*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
transition: all 500ms ease;
}
</style>
在transition中写入多个
三、圆角and阴影and透明度
圆角
.box{
width: 200px;
height: 200px;
border: 2px solid #000;
background-color: gold;
margin: 50px auto 0;
/*border-top-left-radius: 100px 50px;左上角为椭圆圆角*/
/*border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角*/
/*border-radius: 40px;曲率半径为40的圆角矩形*/
/*border-radius: 20%;最大200px，20%即40px*/
border-radius: 50%;/*正圆*/
}
- 阴影
.box{
width: 200px;
height: 200px;
border: 2px solid #000;
background-color: gold;
margin: 50px auto 0;
/*水平偏移 垂直偏移 羽化大小 扩展大小 颜色*/
box-shadow: 10px 10px 10px 0px #bfa;
}
- 透明度
.box4{
/*背景透明 */
background: rgba(255,215,0,0.3);
border: 2px solid rgba(0,0,0,0.3);
}
四、运动曲线
| linner | 匀速 |
| ease | 开始结束慢，中间匀速 |
| ease-in | 开始慢速，结尾突然停住 |
| ease-out | 突然开始，结束慢速 |
| ease-in-out | 开始和结束都是慢速 |
| cubic-bezier | 贝塞尔曲线 |
<style type="text/css"
div{transition:all 1s ease;}
<style>
五、变形
| translate | 位移 |
| rotate | 沿坐标轴旋转 |
| scale | 缩放 |
| skew | 斜切 |
.box4:hover{
/*斜切*/
/*transform: skew(45deg,0);*/
transform: skew(0,45deg);
}
六、元素旋转
.box{
transform-style:preserve-3d;
设置三D效果
transform:prespective(800px) roteY(0deg);
}
沿Y轴旋转90度
.box:hover{
transform:prespective(800px) roteY(90deg);
}
七、变形中心
.box:hover{
transform:rotate(-45deg);
}
.box{
transform-origin:left top;
设置中心点 也可以用px来设置具体位置
}
八、背面
与元素旋转一样 背面就旋转180度 多了背面是否可见属性
.box{backface-visibility: hidden;}
这是不可见，可见为默认的
九、animation动画
/*动画名称、时间、曲线、延迟、播放次数(infinite 不限制次数)、结束后是否返回（alternate:动画结束返回，返回也算次数）
动画前后的状态：
1.forward动画完成后保持在最后一帧
2.backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）
3.both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
animation: moving 1s ease 1s 5 alternate both;
/*动画暂停*/
}
.box:hover{
/*动画运行*/
/*animation-play-state: running;*/
}
/*定义一个动画，名称为moving*/
@keyframes moving{
/*初始状态*/
from{
width: 200px;
}
/*结束状态*/
to{
width: 500px;
}
}
</style>
