变形移动
<!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 type="text/css">div{width: 100px;height: 100px;background-color: hotpink;transition: all 0.5s; /*变形移动所有*/}div:active{ /*鼠标活动时 状态为鼠标点击但是没有松开时触发 相当于点击事件*//*transform: translateX(100px);*/ /*水平移动100px*//*transform: translate(50%); *//*百分比代表是自身宽度的一半 不是父盒子的宽度*//*transform: translate(50px);*/ /*点击之后x轴方向移动50px*/transform: translate(50px ,50px); /*点击之后 x y 轴方向移动50px*//*transform: translateY(100px);*/ /*点击后y轴移动100px*/}</style></head><body><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 type="text/css">div{width: 200px;height: 200px;background-color: deeppink;/*transform: translate(100px); 水平移动100px*//*transform: translate(50%); 默认是X轴 水平移动自身宽度的一半*//*transform: translateY(50%); 在y轴移动自身高度的一半*//*定位移动*/position: absolute;left: 50%;top: 50%;/*margin-left: -100px;需要计算*/transform: translate(-50%,-50%); /*右移上移自身的一半 */}</style></head><body><div></div></body></html>
transform:scale 图片缩放
<!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 type="text/css">div{width: 100px;height: 100px;background-color: hotpink;margin: 100px auto;}div:active{/*transform: scale(2);*/ /*水平 垂直縮放 一个参数代表宽 高都同时缩放*/ transform: scale(1, 2); /*宽度不变，高度变2倍*/}section{width: 632px;height: 340px;margin: 0 auto;overflow: hidden; /*溢出隐藏*/border: 1px solid green;}section img{transform: all 0.2s; /*图片缩放 谁做动画，谁加过渡*/}section img:hover{transform: scale(1.8); /*缩放*/}</style></head><body><div></div><section><img src="images/mi.jpg"></section></body></html>
transform:rote 旋转
<!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 type="text/css">img{margin: 100px;transition: all 3s ease-in 1s; /*全部属性过渡 过渡时长 动画曲线 何时开始*//*border-radius: 50%;*/ /*圆角*/border-radius: 100px;border: 10px solid deeppink;}img:hover{/*transform: rotate(-90deg);*/ /*deg度数*/transform: rotate(720deg);}</style></head><body><img src="images/chu.jpg"></body></html>
沿x轴旋转
<!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 type="text/css">img{margin: 100px;transition: all 1s ease-in 0.2s;}/*img:active{*/.one:hover{transform: rotateX(360deg);}.two:hover{transform: rotateY(360deg);}.three:active{transform: rotateZ(180deg);}.four:active{transform: rotateX(45dep) rotateY(180deg) rotateZ(90deg) skew(0,10deg);}</style></head><body><img class="one" src="images/3.jpg"><img class="two" src="images/4.jpg"><img class="three" src="images/5.jpg"><img class="four" src="images/6.jpg"></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 type="text/css">img{margin: 200px;transition: all 0.6s; /*添加所有属性过渡效果*/transform-origin: 20px 30px; /*旋转中心点*/}img:hover{transform: rotate(360deg); /*x轴旋转360度*/}</style></head><body><img src="images/pk1.png"></body></html>
呈360旋转排列的图片
<!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 type="text/css">div{width: 250px;height: 170px;border: 1px solid deeppink;margin: 400px auto;position: relative;}div img{width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all 0.6s; /*添加过渡属性*/transform-origin: top right; /*旋转的中心点*/}div:hover img:first-child{ /*鼠标经过div 第一张图片旋转60°*/transform: rotate(60deg); /*选装60°*/}div:hover img:nth-child(2){ /*鼠标经过div 第二张图片旋转60°*/transform: rotate(120deg); /*选装60°*/}div:hover img:nth-child(3){transform: rotate(180deg); /*选装60°*/}div:hover img:nth-child(4){transform: rotate(240deg); /*选装60°*/}div:hover img:nth-child(5){transform: rotate(300deg); /*选装60°*/}div:hover img:nth-child(6){transform: rotate(360deg); /*选装60°*/}</style></head><body><div><img src="images/1.jpg" alt=""><img src="images/2.jpg" alt=""><img src="images/3.jpg" alt=""><img src="images/4.jpg" alt=""><img src="images/5.jpg" alt=""><img src="images/6.jpg" alt=""></div></body></html>
变形skew倾斜
<!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 type="text/css">div{font-size: 50px;font-weight: 700;margin: 100px;transition: all 0.7s; /*过渡属性*/}div:hover{/*transform: skew(-30deg, 0);*/transform: skew(30deg, 0);}</style></head><body><div>不经云清零天下会，荣登雄霸宝位</div></body></html>
rotateX旋转
<!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 type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:hover{transform: rotateX(360deg);}</style></head><body><img src="images/pk1.png"></body></html>
perspective 视距
<!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 type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:first-child:hover {transform: rotateX(360deg);}img:nth-child(2):hover {transform: rotateY(360deg);}img:nth-child(3):hover{transform: rotateZ(360deg);}img:last-child:hover{transform: skew(30deg);}</style></head><body><img src="images/pk1.png"><img src="images/pk1.png"><img src="images/pk1.png"><img src="images/pk1.png"></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 type="text/css">/*视距 摄影机与屏幕之间的距离 视距越大也不明显 视距越小效果越明显*/body{perspective: 1000px;}img{display: block;margin: 100px auto;transition: all 1s;}img:first-child:hover {transform: rotateX(360deg);}img:nth-child(2):hover {transform: rotateY(360deg);}img:nth-child(3):hover{transform: rotateZ(360deg);}img:last-child:hover{transform: skew(30deg);}</style></head><body><img src="images/pk1.png"><img src="images/pk1.png"><img src="images/pk1.png"><img src="images/pk1.png"></body></html>
translateZ移动 3D效果
<!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 type="text/css">body{perspective: 600px;}div{width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 1s; /*添加过渡*/}div:hover{/*transform: translateX(100px);*//*transform: translateY(100px);*/transform: translateZ(300px); /*z控制物体与摄影机之间的距离 z越大 物体就越大 看似3D效果*/}</style></head><body><div></div></body></html>translate3d<!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 type="text/css">body{perspective: 700px;}div.box1{width: 200px;height: 200px;background-color: deeppink;transition: all 0.7s; /*所有的属性过渡*/margin: 100px auto;/*transform: translate(-50%,-50%); */transform: translate(-50%);}div:hover{/* 近大远小*/transform: translate3d(100px, 100px, 300px); /*参数 x y z 其中x y可以是px 或者是% Z只能是px*/}h4{transform: translate3d(0px, 50px, 0px);transition: all 0.6s;}h4:hover{transform: translate3d(0px, 0px, 0px);}.box{height: 1px;width: 100%;background-color: red;margin: 0;}/*清除浮动*/.clearfix::after{content: ">";display: block;height: 0;visibility: hidden;/* 隐藏盒子*/clear: both; /*清除浮动*/}.clearfix{*zoom: 1;}</style></head><body><div class="box1"></div><div class="box"></div><h4>小米：让每一个人都能平等的享受科技带来的乐趣</h4></body></html>
开门大吉
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开门大吉</title><style type="text/css">body{background-color: green;}section{width: 450px;height: 300px;margin: 100px auto;border: 1px solid #000;background: url(images/chu.jpg) no-repeat;background-size: cover; /*保证图片充满整个区域*/perspective: 1000px; /*给父盒子添加透视效果 */position: relative;}/*宽度缩放一半*//*添加过渡效果*/.door-l,.door-r{position: absolute;top: 0;width: 50%;height: 100%;background-color: green;background: url(images/bg.png);transition: all 1s;}/*左侧盒子按照左旋转*/.door-l{left: 0;border: 1px solid #000;transform-origin: left;}.door-r{right: 0;border: 1px solid #000;transform-origin: right;}.door-l::before,.door-r::before{ /*伪元素*/content: "";position: absolute; /*绝对定位*/top: 50%;width: 20px;height: 20px;border: 1px solid #000;border-radius: 50%;transform: translateY(-50%);}.door-l::before{right: 15px;}.door-r::before{left: 15px;}/*当鼠标经过selection盒子时候 翻转rotateY*/section:hover .door-l{transform: rotateY(-130deg);}section:hover .door-r{transform: rotateY(130deg);}</style></head><body><section><div class="door-l"></div><div class="door-r"></div></section></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 type="text/css">div{width: 224px;height: 224px;margin: 100px auto;position: relative; /*子绝父相*/transform-style: preserve-3d; /*保留当前位置 图片扁平滑*/}div img{position: absolute;top: 0;left: 0;transition: all 4s; /*添加过渡属性*/}div img:first-child{z-index: 1;backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/}div:hover img{transform: rotateY(180deg);}</style></head><body><div><img src="images/qian.svg" alt=""><img src="images/hou.svg" alt=""></div></body></html>
CSS3动画属性
@keyframes 规定动画
animation 所用动画属性的简写
animation-name 动画名称
animation-duration 动画时长
animation-timing-function 动画运动曲线 默认ease
animation-delay 何时开始
animation-iteration-count 动画播放次数 默认1
animation-direction 是否在下一期逆向播放
animation-paly-state 正在运行或者暂停 默认 running
animation-fill-mode 规定动画时间外的状态
除了名字，动画时间 延时有严格顺序要求，其他随便
animation
<!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 type="text/css">div{width: 100px;height: 100px;background-color: deeppink;/*animation: go 2s ease 0s 2 reverse;*/ /*动画名称go 运动时间2s 运动曲线ease 何时开始0s 播放次数2 [reverse 逆向 normal 正常+]*//*animation: go 2s ease 0s 2 ;*/ /*顺时针2次*//*animation: go 2s ease-in 0s infinite; *//*infinite 无线循环*/animation: go 2s ease-in 0s infinite alternate; /*normal正常 alternate 正常-反方向 交替 alternate reverse 先反在正 交替 */}@keyframes go { /*定义动画 在x轴移动600px*/from{transform: translateX(0px);}to{transform: translateX(600px);}}</style></head><body><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 type="text/css">div{width: 100px;height: 100px;background-color: deeppink;/*animation: go 2s ease 0s infinite alternate;*/ /*动画名称 动画时长 运动曲线 何时开始 无线循环 正-反交替*/animation: go 2s infinite; /*引用动画*/}@keyframes go { /*定义动画*/0%{ /*等价于from*/transform: translate3d(0px, 0px, 0px);}25%{transform: translate3d(800px, 0px, 0px);}50%{transform: translate3d(800px, 400px, 0px);}75%{transform: translate3d(0px, 400px, 0px);}100%{ /*相当于to*/transform: translate3d(0px, 0px, 0px);}/*动画结束之后返回原来的位置*/}</style></head><body><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 type="text/css">img{animation: car 5s infinite; /*引入动画*/}@keyframes car { /*定义动画*/0%{transform: translate3d(0px, 0px, 0px);}50%{transform: translate3d(1000px, 0px, 0px);}51%{transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*如果是多组变形 都属于transform 用空格隔开*/}99%{transform: translate3d(0px, 0px, 0px) rotateY(180deg);}}</style></head><body><img src="images/car.jpg" width="250"></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 type="text/css">*{margin: 0;padding: 0;}ul{list-style: none;}nav{width: 1200px; /*200*6=1200 图片的宽度*展示图片的数量 前提是图片必须尺寸一致*/height: 100px;border: 1px solid pink;margin: 100px auto;overflow: hidden;}nav li{float: left; /*浮动*/}nav ul{width: 200%;animation: moving 10s linear infinite;/*引用动画 无线循环 linear匀速*/}@keyframes moving { /*定义动画*/form{transform: translateX(0);}to{transform: translateX(-1200px);}}nav:hover ul{ /*鼠标经过ul就暂停动画*/animation-play-state: paused; /*暂停动画*/}</style></head><body><nav><ul><li><img src="images/1.jpg" width="200" height="100"></li><li><img src="images/2.jpg" width="200" height="100"></li><li><img src="images/3.jpg" width="200" height="100"></li><li><img src="images/4.jpg" width="200" height="100"></li><li><img src="images/5.jpg" width="200" height="100"></li><li><img src="images/6.jpg" width="200" height="100"></li><li><img src="images/1.jpg" width="200" height="100"></li><li><img src="images/2.jpg" width="200" height="100"></li><li><img src="images/3.jpg" width="200" height="100"></li><li><img src="images/4.jpg" width="200" height="100"></li><li><img src="images/5.jpg" width="200" height="100"></li><li><img src="images/6.jpg" width="200" height="100"></li></ul></nav></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 type="text/css">section{width: 80%;height: 200px;border: 1px solid green;margin: 100px auto;}section div{width: 33.33%;height: 100%;float: left;}section div:nth-child(1){background-color: green;}section div:nth-child(2){background-color: orange;}section div:nth-child(3){background-color: deepskyblue;}</style></head><body><section><div></div><div></div><div></div></section></body></html>
flex 伸缩布局
<!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 type="text/css">/* *{margin: 0;padding: 0;}*/section{width: 80%;height: 200px;border: 1px solid greenyellow; margin: 100px auto;display: flex; 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子}div{height: 100%;/*flex: 1; 表示每个盒子都占一份*/}div:first-child{background-color: deeppink;flex: 1; /*子盒子占分数为1*/}div:nth-child(2){background-color: lawngreen;flex: 2; /*子盒子占分数为1*/}div:last-child{background-color: lightseagreen;flex: 1; /*子盒子占分数为1*/}</style></head><body><section><div></div><div></div><div></div></section></body></html>
flex伸缩固定布局
<!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 type="text/css">section{width: 80%;height: 200px;border: 1px solid #ccc;display: flex; /*伸缩布局模式*/min-width: 500;/*最小宽度500px*/}section div{height: 100%;}section div:first-child{background-color: green;width: 200px;}section div:nth-child(2){background-color: pink;flex: 1;}section div:last-child{background-color: deeppink;flex: 1;}/*说明：前面是固定的200px 后边两个盒子会平分剩余的宽度*/</style></head><body><section><div></div><div></div><div></div></section></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 type="text/css">section{width: 80%;height: 200px;border: 1px solid rebeccapurple;display: flex; /*伸缩布局*/min-width: 500px;/*flex-direction: column;*/ /*排列方式是列*//*flex-direction: row;*/ /*排列方式是row*/flex-direction: row-reverse; /*排列方式是反向row */}div:first-child{background-color: deepskyblue;flex: 1; /*分1份*/}div:nth-child(2){background-color: rebeccapurple;flex: 3; /*分3份*/}div:nth-child(3){background-color: green;flex: 1;}div:last-child{background-color: hotpink;/*height: 500px;*/width: 100px;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div></section></body></html>
justify-content 插入内容
flex-start 默认从父盒子开头
fled-end 项目位于父盒子结尾
center 项目位于容器中心
space-between 项目位于父盒子各行之间留有空白的容器内
space-around 项目位于各行之前、之后、之间都留有空白的容器
justify-content
<!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 type="text/css">section{width: 1000px;height: 250px;border: 1px solid orange;display: flex; /*伸缩布局*//*justify-content: flex-start; 默认*//*justify-content: flex-end; 从父盒子右边添加*//*justify-content: center; 从父盒子中心添加*//*justify-content: space-between;*/ /*在父盒子宽度范围内平均空白的区域*/justify-content: space-around; /*在各控件之前之间之后平局分配空白区域*/}div{width: 200px;height: 250px;}div:first-child{background-color: deeppink;width: 400px;}div:nth-child(2){background-color: green;}div:last-child{background-color: yellowgreen;}</style></head><body><section><div></div><div></div><div></div></section></body></html>
align-items 调整测轴对齐
stretch 默认值 项目被拉伸以适应容器 前提子元素不要给高度
center 项目位于容器中心
flex-start 项目位于容器开头
flex-end 项目位于容器结尾
<!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 type="text/css">section{width: 1000px;height: 500px;border: 1px solid green;display: flex; /*伸缩布局*/justify-content: space-between;/*align-items: flex-start; 默认上对齐*//*align-items: flex-end; 底部对齐*//*align-items: center; *//*垂直对齐*/align-items: stretch; /*拉伸高*/}section div{width: 200px;/*height: 100px;*/}div:first-child{background-color: greenyellow;}div:nth-child(2){background-color: orange;}div:last-child{background-color: powderblue;}</style></head><body><section><div></div><div></div><div></div></section></body></html>
flex-wrap控制是否换行
norwrap 不拆行 不拆列 压缩显示
wrap 必要时拆行拆列
wrap-reverse 相反顺序 必要时拆行拆列
<!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 type="text/css">section{width: 1000px;height: 1000px;border: 1px solid green;display: flex; /*伸缩模式*//*flex-wrap: nowrap; 默认 不换行 则压缩显示*//*flex-wrap: wrap; 必要时拆分*/flex-wrap: wrap-reverse; /*反转*/}div{width: 250px;height: 200px;}div:first-child{background-color: green;}div:nth-child(2){background-color: orange;}div:nth-child(3){background-color: darkorange;}div:nth-child(4){background-color: limegreen;}div:nth-child(5){background-color: pink;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></section></body></html>
align-content 堆栈 [由flex-wrap产生的独立行对齐]
align-content针对flex容器多轴情况 align-item是针对一行情况排列
父元素必须设置display:flex 横向排列必须设置 flex-direction:row flex-wrap:wrap 属性才会起作用
stretch 默认值 项目被拉伸适应容器
center 项目位于容器中心
flex-start 项目位于容器开头
flex-end 项目位于容器结尾
space-between 项目位于各行之间的空白
space-around 项目位于各行之前 之间 之后都留有控件容器内
<!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 type="text/css">section{width: 1000px;height: 800px;border: 1px solid purple;display: flex; /*拉神模式*/flex-flow: row wrap; /*必须设置这个属性 否则下边不起作用*//*align-content: center; 项目居中*//*align-content: flex-start; 位于父盒子开始排列*//*align-content: flex-end; 位于父盒子的底部*//*align-content: space-between; 垂直平分各行之前之后的空白容器区域*//*align-content: space-around; 垂直平分各行之前之间之后的空白区域*/align-content: stretch; /*不要给子元素高度值*/}div{width:248px;/*height: 200px;*/border: 1px solid greenyellow;background-color: #00A477;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div></section></body></html>
order 排序 数值越小越靠前
<!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 type="text/css">section{width: 1000px;height: 600px;border: 1px solid green;/*设置拉伸属性要给父类！！！*/display: flex;/*flex-wrap: wrap; 是否换行*//*justify-content: flex-start;*//*justify-content: flex-end;*/ /*从父盒子右边添加*//*justify-content: center;*/ /*从父盒子中心添加*//*justify-content: space-around;*/ /*在各控件之前之间之后平局分配空白区域*/flex-wrap: wrap; /*必要时拆行拆列*/align-items: center; /*垂直居中*//*调整测轴对齐 垂直居中*/flex-direction: row;align-content: center; /*对战*/}div{width: 248px;height: 200px;border: 1px solid darkred;background-color: seagreen;}div:nth-child(7){background-color: pink;order: -1;}</style></head><body><section><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div></section></body></html>
