背景颜色线性渐变
由于浏览器支持状况不是很好，所以必须添加浏览器私有前缀。PC端基本不用，基本用移动端。
图片
新增图片格式
DPG图片压缩技术
京东自助研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大地提升了用户的网页打开速度，压缩后的图片和webp的清晰度对比没有差距
webp图片格式
谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间
图片为什么有空白缝隙
这是因为图片默认和文本的基线对齐，img标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的，但是图片的基线和底部是重合的，所以图片下边是由空隙留给文字的底线和基线之间的距离，但是为什么明明没有书写文字，仍然会有间隙呢？其实渲染过程中，会在空白的地方渲染一个没有宽度和高度的节点，这个节点被称作为 幽灵白节点。
为什么会出现基线对齐呢？是因为有默认的vertical-align为baseline（基线）
插入图片与背景图片的区别与用途
插入图片移动位置只能靠盒模型padding,margin或者position
背景图片 用于小图标背景或者超大背景图片——>移动只能通过background-position，或者把盒子设置为跟背景图片一样大小，用position定位
/* 页面中img默认是行内块元素 /
/ 出现行内块的情况，因为图片默认和文字的基线对齐，所以要对其进行设置，使文字和图片居中对齐 */
vertical-align: middle;
即使没有文字，也会出现这种情况
img 过大怎么办？
可以通过CSS中的img{10px;}进行控制插入图片的大小
background-image过大怎么办？
可以通过background-sizing进行缩放或者铺满
css3 属性选择器、结构伪类选择器，伪类选择器
CSS3 2D转换
转换是CSS3中具有颠覆性的特征之一，可以实现元素的
移动 translate
类似定位，是2D转换的一种功能，可以改变元素在页面中的位置。
移动盒子的位置： 定位 外边距 2D转换移动
x就是x轴上移动位置，y就是y轴上移动的位置 中间用逗号分隔
transform:translate(x,y);
特点：不会影响到其他元素的位置
如果里面的参数是%，移动的距离是盒子自身的宽度或者高度来对比的
translate(-50%,-50%); 盒子往上走自己高度的一半 transform:translate(-50%,-50%);
所以盒子垂直居中：可以用position 和 transform结合
translate对于行内元素是无效的。
transform:translateX(n);
transform:translateY(n);
旋转 rotate
transform:rotate(度数);
单位是deg
角度为正时，顺时针。角度为负时，逆时针。
transform:rotate(45deg);
过渡写到本身上，谁做动画给谁加
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
三角形顺时针旋转225度
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
/*过渡效果*/
transition: all 0.6s;
}
/*鼠标经过div里面的三角旋转*/
div:hover::after {
transform: rotate(225deg);
}
</style>
2D转换中心点 transform-origin
我们可以设置元素转换的中心点
transform-origin:x y ;
1.可以是方位名词：
transform-origin: left botttom;
2.默认是50% 50% 等价于 center center
3.可以是px像素
transform-origin: 50px 50px;
缩放 scale
2D 转换是改变标签在二维平面上的位置和形状的一种技术
transform:scale(x,y);
优势 不会影响到其他盒子，可以变换中心点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.4s;
}
div:hover {
/*里面的数字就是倍数的意思*/
/*transform: scale(2,1);*/
/*等比例缩放，同时修改宽度和高度，有简单的写法,宽度修改两倍，高度和默认的一样*/
/*transform: scale(2);*/
/*缩小。小于1就是缩放*/
/*不会影响其他盒子，而且可以移动中心点*/
transform-origin: left bottom;
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
<span>2222</span>
</body>
</html>
综合写法,有顺序问题,先旋转会改变坐标轴的方向，位移放在最前面。
transform:translate(150px,50px) rolate(50deg);
CSS3 动画
是c3中具有颠覆性的特征之一
制作动画分为两步： 先定义动画，再调用动画
动画序列：
0%是动画的开始，100%是动画的完成，这样的规则是动画序列。
在@keyframes中规定某项css样式，就能创建由当当前样式组件改为新样式的动画效果
@keyframes move {
/*开始状态*/
from和to等价于 0%和100%
0% {
transform: translateX(0px);
}
/*结束状态*/
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/*调用动画*/
/*动画名称*/
animation-name: move;
/*持续时间 */
animation-duration: 2s;
}
可以做多个状态的变化，里面的百分比就是时间的划分
<style>
@keyframes move {
/*开始状态*/
0% {
transform: translateX(0px);
}
/*结束状态*/
100% {
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/*调用动画*/
/*动画名称*/
animation-name: move;
/*持续时间 */
animation-duration: 2s;
/*运动曲线*/
animation-timing-function: ease;
/*何时开始*/
animation-delay: 1s;
/*重复次数 infinite 无限次数*/
/*animation-iteration-count: infinite;*/
/*是否反方向播放 默认的是 normal 如果想要反方向 就写alternate*/
/*animation-direction: alternate;*/
/*保持结束状态 默认的是 backwards 回到起始状态 让他停留在结束状态 forwards*/
linear匀速运动
animation-fill-mode: forwards;
}
div:hover {
/*鼠标经过div 让这个div 停止动画 鼠标离开就继续动画*/
animation-play-state: paused;
}
</style>
波纹动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.big {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #ccc;
}
.one {
/*大盒子为了定位波纹的位置*/
position: absolute;
top: 30px;
right: 50px;
/*color: red;*/
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.one div[class^="pulse"] {
/*水平居中，垂直居中*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
/*盒子不给边框，给阴影，阴影会变得模糊*/
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
/*权重不一样*/
.one div.pulse2 {
animation-delay: 0.4s;
}
.one div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {}
50% {
/*波纹效果不要用scale 因为他会让阴影变大*/
width: 40px;
height: 40px;
/*修改透明度*/
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="big">
<div class="one">
<!-- 一个小圆点，三个波纹 -->
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
</html>
通过step写动画(文字轮播图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
overflow: hidden;
font-size: 20px;
width: 0;
height: 30px;
background-color: pink;
/*让我们的文字强制一行内显示*/
white-space: nowrap;
/*steps就是分几步来完成我们的动画 有了steps就不要在写ease或者linear了*/
animation: w 4s steps(11) infinite forwards;
/*forwards 停留在原地不动*/
}
@keyframes w {
0% {
width: 0;
}
100% {
width: 220px;
}
}
</style>
</head>
<body>
<div>
世纪佳缘我在这里等你
</div>
</body>
</html>
3063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
