css3 技术整理

1.transition 过渡

先做好基本的布局,修改要变化的属性再添加过渡,一般发生hover的时候执行过渡。

三要素 :有属性发生改变,添加需要过渡的属性,过渡时间

transition-property: margin-left;添加属性

transition-druation;xs过渡时间

transition-timing-function:过渡曲线 linear:ease,ease-in,ease-out,ease-in-out;

连写:transition: property duration timing-function delay;

transition:all 0s 常用

2.动画

三步走:

animation-name  自定义名字

animation-duration  持续时间

@keyframes jh{

form{}

to{}

40%{} 50%{}10%;\

} 定义动画内容

animation-fill-mode:forwards/backward/both 改变前的状态/改变后的状态/结合

animation-play-state: paused/running; 暂停/开始

连写: animation:jh 2s linear 0s infiniter normal/alternote;

3.维度

transform:translate(x,y):控制水平垂直方向的平移量

transform:rotate(x,y,z)控制旋转轴角度,默认z轴,

transform:scale(x,x)控制缩放,x<1.0 缩小  x>1.0放大

3D:

transform-style:flat 默认元素 2d

设置transform-style设置为preserve-3d,变成3D

制作立方体:

transform: rotate(0deg) translateZ(100px) scaleX(2);

transform: rotateX(90deg) translateZ(100px) scaleX(2);

transform: rotateX(180deg) translateZ(100px) scaleX(2);

transform: rotateY(270deg) translateZ(100px) scale(2);

transform: rotateY(90deg) translateZ(200px);

transform: rotateY(270deg) translateZ(200px);

执行动画:

@keyframes{

from{

transform: rotateX(0deg);

}

to{

transform: rotateX(360deg);

}

}

立方体 变成长方体 上下 前后 scaleX(2)放大两倍,左右宽度增加到200.

background 背景

1.background-size

取值:前面宽后面高

background-size:contain;

固定像素: 指定多少就是多少, 例如:background-size:100px 100px;

百分比: 指定多少就是多少, 例如:background-size:50% 20%;

auto: 如果宽度是auto, 那么就等比拉伸宽度. 如果高度是auto,那么久等比拉伸高度

conver: 等比拉伸图片, 保证图片的宽度"和"高度都填满盒子

contain: 等比拉伸图片, 保证图片的宽度"或"高度填满盒子

2.background-origin

图片裁剪

background-origin:content-box

border-box:  背景图片从border开始绘制

padding-box: 背景图片从padding开始绘制, 默认

content-box: 背景图片从content开始绘制

3.background-clip

背景裁剪 background-clip: content-box;

取值:

border-box: 盒子的所有背景都需要显示

padding-box: 盒子padding和content的部分背景需要显示

content-box: 盒子content部分的背景需要显示

4多背景图片

background: url("xxx.png") left top no-repeat,

url("xxx.png") right top no-repeat;

background-image: url("xxx.png"),url("xxxx.png");

background-repeat:no-repeat, no-repeat;

background-position: left top, right top;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,828评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,352评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,679评论 0 7
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,124评论 22 225
  • 有一个问题:如果没有李白,我们的生活会怎么样? 似乎并不会受很大的影响,对么?不过是一千多年前的一个文学家而已,多...
    狐狸说谎了阅读 1,351评论 15 16