1、ico图标
(1)先切图 尽量透明 png格式(2)制作ico www.bitbug.net
2、cuttman
窗口-扩展功能-cuttman(ps正式版)ctrl+e合并图层
3、过渡
transition:过渡(多种属性变化用‘,’隔开,所有属性都变化写all,谁做过渡动画写到谁身上)
(1)property过渡属性(width height)
(2)duration花费时间
(3)timing-function运动曲线(linear匀速ease逐渐慢下来ease-in加速ease-out减速)
(4)delay何时开始
4、2D变形(让定位的盒子水平居中垂直居中)
变形transform:
(1)移动transform:translate(x,y) translateY(y)仅垂直移动 translateX(x)仅水平移动
(2)缩放transform:scale(,)宽度 高度
(3)旋转transform:rotate(deg度)
(4)旋转原点transform-origin:right bottom;设置旋转中心点为右下角
(5)斜切transform:skew(deg,deg)
5、动画
调用动画 animation:动画名称 花费时间 运动曲线 何时开始 播放次数(infinite无限)是否反方向(alternate轮流反向播放)
声明动画 @keyframes动画名称 {from {} to {}}或者{0% {} 100% {}}
6、伸缩布局(css3)
给父亲添加 display: flex; 孩子的份数 flex: 1;
伸缩最小宽度min-width 伸缩最大宽度max-width
调整主轴方向flex-direction: column;垂直
7、文字阴影(css3)
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
8、背景(css3)
背景缩放 background-size: width height cover(铺满宽高)contain(缩放到宽高有一个铺满);
背景渐变 background:-webkit-linear-gradient(位置,起始颜色,结束颜色);
9、3D变形(css3)
延X轴transform: rotateX(deg);延Y轴transform: rotateY(deg);延Z轴transform: rotateZ(deg);
透视perspective(加给父元素,越大变化越小,越小变化越大)
盒子翻转backface-visibility: hidden;(元素不面向屏幕时是否可见)