css3简记(2D&3D&动画)

目录

1.1 页面装饰

1.2 过渡

1.3 搜索引擎优化

2.1 阿里巴巴矢量图标库

2.2 如果图标库没有项目所需要的图标

3.1 平面转换

3.2 渐变

3.3 空间转换

4.1 动画

4.2 逐帧动画

4.3 多组动画

---

1.1 页面装饰

背景图片，position控制精灵图的位置 大小:background-size:;

box-shadow:h-shadow/v-shadow/blur/spread/color/insert;

blur模糊度，spread阴影扩大, insert:可改为内部阴影

box-shadow:10px 5px 1px 3px green insert;

1.2 过渡

transition:all 1s;

1.3 搜索引擎优化

SEO:让网站在搜索引擎上的排名靠前

<meta name="description/Keywords"></meta>

favicon标题图标 项目根目录

2.1 阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

使用步骤

1.选择资源管理我的项目 2.新建项目 3.需要的图标加入购物车 4.点击购物车转自自己的项目 5.下载到本地 6.html页面引用css 7.引用位置添加类名 <i class="iconfont xxx"></i>(xxx为对应的字体图标类名)

2.2 如果图标库没有项目所需要的图标

步骤

1.与设计师沟通，得到svg矢量图 2.IconFont网站上传图标，下载使用（上传，批量操作，添加至购物车，添加至项目，）

3.1 平面转换

transform:translate(100px,50px);/transform:translate(100%,50%);相对于盒子自身尺寸的百分比

translateX(),translateY()

transform:rotate(360deg);旋转角度，正：顺时针 负：逆时针

transform-origin:原点水平位置 原点垂直位置;(方位名词) transform-origin:left bottom;

transform:scale(1.2);大于1放大，小于1缩小

opacity:1;(0-1)透明度

3.2 渐变

background-image:linear-gradient(pink,red);

background-image:linear-gradient(transparent,rgba(0,0,0,.6));

3.3 空间转换

透视效果: 父级：perspective:1000px;（取值800-1200px）

transform:translate3d(x,y,z);

围绕中心点:transform:rotateZ(360deg); 横着 屏幕里外rotateX() 竖着屏幕里外rotateZ()

呈现立体图形:transform-style:preserve-3d;

4.1 动画

定义动画

@keyframes 动画名称{

    from{} to{}

}

@keyframes 动画名称{

0%{} 50%{} .......

}

百分比指的是动画总时长的占比

使用动画

animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

step(3)动画分3步 linear匀速 无限循环：infinite 有返回方向:alternate

执行完毕 默认值:backwards 停留在结束状态 forwards

拆分属性

动画名称:animation-name:; 动画时长:animation-duration:;延迟时间:animation-delay:;

动画执行完毕时状态：animation-fill-mode:forwards/backwards; 速度曲线:animation-timing-function:step();

重复次数:animation-iteration-count:;动画执行方向:animation-direction:; 暂停动画:animation-play-state:paused;

4.2 逐帧动画

1.准备显示区域：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

2.定义动画：改变背景图的位置(移动的距离就是精灵图的宽度)

3.使用动画：添加速度曲线step(N),N与精灵图上小图个数相同，添加无限重复效果

4.3 多组动画

1.控制背景图位置 2.控制动画的移动，调用不同动画animation:动画名称,动画名称;(逗号隔开)