一、图像过渡 类似于 Android 内的动画
Css 属性:
transition: 过渡;
transition-property: 过渡的 Css 属性名称
transition-duration: 过渡的持续时间;
transition-timing-function: 过渡的动作曲线
transition-delay: 过渡的开始时间;
过渡模式:linear 线性过渡(匀速过渡);ease 平滑过渡 ;ease-in 由慢到快过渡; ease-out由快到慢过渡; ease-in-out 快到慢,慢到快过渡;
将多个属性进行过渡时使用 “ , ” 隔开。全部 则 第一个参数使用 all
过渡写在本体上,谁做动画写在谁身上。
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
width: 300px;
height: 300px;
transition: width 3s ease 0s ,background-color 3s;
}
div:hover {
width: 600px;
background-color: yellow;
}
</style>
</head>
<body>
<div></div>
</body>
二、2d 移动效果
控件按照 x 或 y 轴 进行运动;
第一个参数为 x 轴移动距离 第二个参数为 y 轴移动距离
transform : translate(100px,100px);
当参数为 -50% 的时候 ,就是走自己的尺寸的一半;
三、2d 缩放
控件 按照 x 或 y 轴进行缩放操作:
第一个参数为 X 轴参数 、 第二个参数为 Y 轴参数;
transform: scale(0.8,2.0);
四、旋转
控件按照 控件圆心 进行旋转操作:
参数为旋转度数, 单位 为 deg 。
transform : rotate(90 deg);
设置旋转原点
两个参数 表示 对旋转位置的定位;
transform-origin: top left;
五、倾斜
控件沿某个方向 实现倾斜 如下图:
第一个参数为 x 轴方向角度,第二个参数为 Y 轴方向 角度;
transform :skew(20deg,0deg)
六、悬浮效果
在控件底层设置一个阴影
第一个参数为 X 轴偏移距离, 第二个参数为 Y 轴偏移距离 , 第三个 为阴影面积或者可以理解为阴影深浅,最后一个参数为颜色
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
七、Animation 动画
1、animation
属性 animation :动画名称 播放时间 开始时间 播放次数 是否反方向运动;
还需要配合 @keyframes 动画名称{
form {开始位置}
to{j结束位置}
}
播放次数: infinite 表示 无限次循环播放 默认1次
是否在一个方向上反复重复: alternate 反复重复 默认为 normal
paused :暂停动画
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
position: absolute;
top: 400px;
left: 400px;
background-color: cornflowerblue;
width: 200px;
height: 200px;
animation: move 3s ease 2s;
}
@keyframes move {
from{
left: 0;
}
to{
left: 1000px;
}
}
</style>
</head>
<body>
<div></div>
</body>
八、 伸缩布局
该布局相当于 Android 内线性布局的权重属性
需要在父标签内 添加display: flex;
在子布局内 添加每个子布局的权重 flex: 1;
样例:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
margin: auto;
width: 80%;
height: 50px;
display: flex;
}
div {
height: 100%;
flex: 1;
}
section div:nth-child(1) {
background-color: red;
}
section div:nth-child(2) {
background-color: yellow;
}
section div:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
可以用该属性进行配置 控件的大小和各种占比。
垂直方向三等分操作 在父布局添加flex-direction: column;
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
section {
margin: auto;
width: 80%;
height: 50px;
display: flex;
flex-direction: column;
}
div {
height: 100%;
flex: 1;
}
section div:nth-child(1) {
background-color: red;
}
section div:nth-child(2) {
background-color: yellow;
}
section div:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
九、 文字阴影
第一个参数为 X 轴偏移距离,第二个参数为 Y 轴便宜距离,第三个参数为 模糊程度 ,第四个参数为 颜色;
属性: text-shadow: 10px 10px 1px rgba(255, 0, 0, 0.2);
代码:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 20px;
color: cornflowerblue;
text-shadow: 10px 10px 1px rgba(255, 0, 0, 0.2);
}
</style>
</head>
<body>
<section>
<p> 我们公司在SOHO</p>
</section>
</body>
十、背景缩放
第一个参数 为 X 轴缩放距离,第二个参数为 Y 轴缩放距离。
属性:background-size: 300px auto;
background-size: cover; cover 表示平铺
background-size: contain; contain 表示适可而止;
十一、背景渐变色
需要进行兼容操作
background: -moz-linear-gradient(left top, red, blue);
第一个参数为起始位置,第二个参数为起始位置颜色,第三个参数为结束为止参数
十二、多背景
background: url(“tam.png”) no-repeat top left, url(“tam.png”), url(“ic_launcher.png”);
就是在一个属性里添加多个内容。
十三、浏览器前缀
用于不同浏览器的 适配操作。
-webkit- (谷歌, Safari, 新版Opera浏览器, 以及几乎所有iOS系统中的浏览器(包括iOS 系统中的火狐浏览器); 简单的说,所有基于WebKit 内核的浏览器)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器)
-ms- (IE浏览器 和 Edge浏览器)