CSS过渡、动画与其他

目录
过渡
2D变形-transform

3D变形
动画
用户界面样式

精灵技术
滑动门
浏览器前缀
Web字体
转换ico图标

过渡

  • 过渡动画:是从一个状态渐渐的过渡到另外一个状态.过渡写在本身
  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放
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;
    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变形

函数 描述
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-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:同时给文本和父元素加上背景图

浏览器前缀

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

Web字体

字体格式

ttfotfwoffeotsvg

图标字体

  • 网站

    • 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="根目录的文件名"/>

CSS过渡、动画与其他

上一篇:js for in 多出一个元素


下一篇:graalvm js 内置commonjs 模式试用