CSS过渡、动画与其他

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/
• 引入