入门 |CSS过渡、动画与其他

过渡

• 过渡动画：是从一个状态渐渐的过渡到另外一个状态.过渡写在本身
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放

transition:要过渡的属性 花费时间 运动曲线 何时开始
transition:width .5s ease 0		//单个
transition:width .5s,height .5s		//多组
transition:all .5s		//所有

属性	描述
transition	简写属性
transition-property	属性名称
transition-duration	花费时间,默认是 0
transition-timing-function	时间曲线，默认是 "ease"逐渐慢|linear匀速|ease-in加速|ease-out减速
transition-delay	何时开始,默认是 0

2D变形-Transform

位移-translate(x,y)

//变形
E:hover{transform:translate(100px,0)}	//向下移动100px
//过渡
E{transition:all 0.5}

居中写法

div{
	position:absolute;
    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变形

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵
translate3d(x,y,z)	定义 3D 转化
perspective(n)	定义 3D 转换元素的透视视图定义 3D 转化，仅使用用于 X 轴的值，单位可以是px
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值
scale3d(x,y,z)	定义 3D 缩放转换
rotate3d(x,y,z,angle)	定义 3D 旋转定义 3D 缩放转换，通过给定一个 X 轴的值
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转定义 3D 缩放转换，通过给定一个 Z 轴的值
rotateX(angle)	定义沿 X 轴的 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;}
}

属性

属性	描述
animation-name	规定 @keyframes 动画的名称
animation-duration	花费时间
animation-timing-function	速度曲线
animation-delay	何时开始
animation-iteration-count	播放次数，infinite表示无数次
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"|alternate轮流反向
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"|paused
animation-full-mode	规定对象动画时间之外的状态。forwards保持最后一个属性|backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）|both向前和向后填充模式都被应用

用户界面样式

鼠标样式

//将鼠标放在元素上所显示的样式
cursor:pointer|text|move|default		//小手|选择|移动||

outline

//在元素外围，边框外围
outline:0|none	//不设置
outline:1px solid red	
outline-color:red
outline-style:solid
outline-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：同时给文本和父元素加上背景图

浏览器前缀

浏览器前缀	浏览器
-webkit	Google Chrome,Safari,Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer,Edge
-khtml-	Konqueror

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/
• 引入 <link rel="short ico" href="根目录的文件名"/>