CSS过渡、动画与其他
目录
过渡
2D变形-transform
- 位移
- 伸缩
- 旋转
- 斜切
- 原点
- 综合
3D变形
动画
用户界面样式
- 鼠标样式
- outline
- 防止拖拽
精灵技术
滑动门
浏览器前缀
Web字体
转换ico图标
过渡
- 过渡动画：是从一个状态渐渐的过渡到另外一个状态.过渡写在本身
- 帧动画：通过一帧一帧的画面按照固定顺序和速度播放
transition:要过渡的属性 花费时间 运动曲线 何时开始
transition:width .5s ease 0 //单个
transition:width .5s,height .5s //多组
transition:all .5s //所有
2D变形-Transform
位移-translate(x,y)
//变形
E:hover{
transform:translate(100px,0)} //向下移动100px
//过渡
E{
transition:all 0.5}
居中写法
div{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
//以自身转移
transform:translate(-50%,-50%);
}
其他：translateY()、translateX()
伸缩-scale(x,y)
transform:scale(0.6,0.8) //宽与高缩放
transform:scale(0.6) //宽与高一起缩放
其他：scaleX()、scaleY()
旋转-rotate(deg)
transform:rotate(30deg)
斜切-skew(deg,deg)
transform:skew(30deg,0deg)
其他：skewX()、skewY()
原点-transform-origin
transform-origin:right bottom //设置变形原点为右下
综合-metrix()
matrix(旋转 缩放 移动 倾斜)
transform:matrix(0.866,0.5,-0.5,0.866,0,0)
3D变形
动画
浏览器支持：Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和animation 属性。Chrome 和 Safari 需要前缀 -webkit-
语法
animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向
示例
//定义动画 move名称
animation:move 3s ease 0s
//定义关键帧
@keyframes move{
from{
};
to{
}
}
@keyframes move
{
0% {
background: red;}
25% {
background: yellow;}
50% {
background: blue;}
100% {
background: green;}
}
属性
用户界面样式
鼠标样式
//将鼠标放在元素上所显示的样式
cursor:pointer|text|move|default //小手|选择|移动||
outline
//在元素外围，边框外围
outline:0|none //不设置
outline:1px solid red
outline-color:red
outline-style:solid
outline-width:2px
防止拖拽
resize:none
精灵技术
减少服务器的请求次数。拿一张图，图标放在里面，通过改变背景图的位置加载图标。
- background-image
- background-repeat
- background-position
滑动门
<a href="#">
<span>文字</span>
<a/>
- 首先定义一个a标签，设置背景background: url(./bg.png) no-repeat;
- 背景图高度与a一致，a设置inline-block，适当加上padding-left调整文字的位置
- span也是inline-block，设置背景background: url(./bg.png) no-repeat right;，适当加上padding-right
- hover：同时给文本和父元素加上背景图
浏览器前缀
Web字体
字体格式
ttf、otf、woff、eot、svg
图标字体
-
网站
-
icoMoon http://www.iconfont.cn/
-
阿里icon font字库 http://www.iconfont.cn/
-
使用
-
fonts文件放在目录里
-
在样式里声明字体，font-family可自定义
-
demo.html文件查看
-
应用font-family:icomoon;
-
独自设计
-
保存为svg格式
-
上传生成字体包 import icons
-
下载兼容字体包
-
追加新图标到原来库 import icons selection.json 文件
转换ico图标
- png图片格式
- 转换图标 http://www.bitbug.net/
- 引入