快速优化网站排名搜索产品推广广告
目录
1. 2D转换
1.1 二维坐标系
1.2 移动translate
1.3 旋转rotate
CSS3书写三角
1.4 中心点transform-origin
1.5 缩放scale
分页按钮
1.6 综合写法
1.7 2D转化总结
2. 动画
2.1 动画基本使用
2.2 常用属性
2.3 简写属性
大数据热点图
2.4 速度曲线细节
steps制作打字效果
关键帧动画--奔跑的熊
3. 3D转换
3.1 三维坐标系
3.2 移动 translate3d
3.3 透视perspective
3.4 translateZ
3.5 旋转rotate3d
3.6 3D呈现 transfrom-style
两面翻转
导航栏
旋转木马
4. 浏览器私有前缀
1. 2D转换
1.1 二维坐标系
1.2 移动translate
移动盒子的位置：定位 ，盒子的外边距 ，2d转换移动
让小盒子在大盒子中居中：对小盒子指定样式
width: 200px;
height: 200px;
top: 50%;
left: 50%/* margin-top: 100px;
margin-left: 100px; */transform: translate(-50%, -50%);1.3 旋转rotate
CSS3书写三角
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 .2s;}div:hover::after {transform: rotate(225deg);}1.4 中心点transform-origin
旋转中心点、缩放中心点
/* 跟方位名词 */transform-origin: left bottom;/* 默认是50% 50% ，等价于center center */transform-origin: 50px 50px;
div {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;margin: 100px auto;}div::after {content: 'pink';display: block;width: 100%;height: 100%;background-color: hotpink;transform-origin: left bottom;transform: rotate(90deg);transition: all 1s;}div:hover::after {transform: rotate(0deg);}1.5 缩放scale
图片放大
div {overflow: hidden;float: left;margin: 10px;}div img {transition: all .3s;}div img:hover {transform: scale(1.1);}分页按钮
li {float: left;width: 30px;height: 30px;margin: 10px;border: 1px solid pink;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;/* 鼠标经过变成小手 */cursor: pointer;transition: all .4s;}li:hover {transform: scale(1.2);}1.6 综合写法
transform: translate(150px, 50px) rotate(180deg) scale(1.2);1.7 2D转化总结
2. 动画
2.1 动画基本使用
keyframes 关键帧；里面的百分比要是整数，百分比是总的时间的划分。
2.2 常用属性
2.3 简写属性
/* 1.定义动画 */@keyframes move {/* 开始状态 可以省略*/0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}/* 结束状态 */100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;/* 2.调用动画 *//* 动画名称 *//* animation-name: move; *//* 持续时间 *//* animation-duration: 5s; *//* 运动曲线 默认ease *//* animation-timing-function: ease; *//* 运动何时开始 *//* animation-delay: 1s; *//* 重复次数 默认1次 *//* iteration 重复的 infinite 无限 *//* animation-iteration-count: infinite; *//* 是否反方向播放 默认normal alternate即是反方向 *//* animation-direction: alternate; *//* 规定结束状态 默认backwards即回到开始状态 forwards停在结束状态 *//* animation-fill-mode: forwards; *//* 简写 linear即匀速 名称和持续时间必须写*/animation: move 3s linear 1s 1 alternate forwards;}div:hover {/* 鼠标经过div 停止动画，鼠标离开继续动画 */animation-play-state: paused;}大数据热点图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.map {position: relative;width: 747px;height: 616px;background: url(../img1.jpg) no-repeat;margin: 0 auto;}.city {position: absolute;top: 221px;right: 196px;color: #fff;}.dotted {width: 8px;height: 8px;background-color: #09f;border-radius: 50% 50%;}.city 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;}.city div.pulse2 {animation-delay: 0.4s;}.city div.pulse3 {animation-delay: 0.8s;}@keyframes pulse {0% {}70% {/* transform: scale(3); 不用是因为会让阴影变宽*/width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;/* 透明度0 即看不见 */opacity: 0;}}</style>
</head><body><div class="map"><div class="city"><div class="dotted"><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div></div>
</body></html>2.4 速度曲线细节
steps制作打字效果
<style>div {overflow: hidden;font-size: 20px;width: 0;height: 30px;background-color: pink;/* 让文字一行显示 */white-space: nowrap;animation: w 4s steps(10) forwards;}@keyframes w {0% {width: 0;}100% {width: 200px;}}</style><div>世纪佳缘我在这里等你</div>关键帧动画--奔跑的熊
背景变化+步长
body {background-color: #ccc;}div {position: absolute;top: 0;left: 0;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;/* 元素可以添加多个动画 , 用逗号分隔*/animation: bear 1s steps(8) infinite, move 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; */transform: translate(-50%, 0);}}3. 3D转换
3.1 三维坐标系
3.2 移动 translate3d
/* 都是transform 后面的Y会把X覆盖 *//* transform: translateX(100px);transform: translateY(100px); *//* translateZ(100px) 指向外移动100px,即朝眼睛方向移动 *//* transform: translateX(100px) translateY(100px) translateZ(100px); *//* 3D移动简写方法 xyz不能省略 没有就写0 */transform: translate3d(100px, 100px, 100px);3.3 透视perspective
3.4 translateZ
3.5 旋转rotate3d
3.6 3D呈现 transfrom-style
两面翻转
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 400px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all 1s;/* 让背面的紫色盒子保留立体空间 */transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;font-size: 30px;color: #fff;text-align: center;line-height: 300px;}.front {background-color: pink;/* z-index: 1; */transform: translateZ(1px);}.back {background-color: purple;/* 让两个盒子背靠背 */transform: rotateY(180deg);}</style>
</head><body><div class="box"><div class="front">hhhh</div><div class="back">aaa</div></div>
</body></html>导航栏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;margin: 0 5px;width: 120px;height: 35px;list-style: none;perspective: 500px;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all 1s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px)}.bottom {background-color: purple;/* 如果有移动或者其他样式,必须先写移动 *//* 注意中心点的位置 */transform: translateY(17.5px) rotateX(-90deg);}</style>
</head><body><ul><li><div class="box"><div class="front">hhh</div><div class="bottom">alalala</div></div></li><li><div class="box"><div class="front">hhh</div><div class="bottom">alalala</div></div></li><li><div class="box"><div class="front">hhh</div><div class="bottom">alalala</div></div></li></ul>
</body></html>旋转木马
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;background: url(media/pig.jpg);margin: 150px auto;transform-style: preserve-3d;animation: rotate 10s linear infinite;}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(media/dog.jpg) no-repeat;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {/* 先旋转后移动 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {/* 先旋转后移动 */transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {/* 先旋转后移动 */transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {/* 先旋转后移动 */transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {/* 先旋转后移动 */transform: rotateY(300deg) translateZ(300px);}</style>
</head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body></html>4. 浏览器私有前缀
