1、上午2D。旋转变色的。。。
基本思路就是先写静态画面然后添加动画。
<!--告诉浏览器该文件为网页格式--> <html> <!--网页的头部标签--> <head> <!--设置网页的编码格式，让中文不乱码--> <meta charset="utf-8"> <!--标题--> <title>2D动画</title> <!--设置元素选择器的样式--> <style> /*根据id获取 选择器 #id名，根据class名 .class名*/ .classA { /*设置宽高*/ width: 20px; height: 20px; /*设置颜色*/ background-color: black; /*设置形状*/ border-radius: 50%; /*position*/ position: absolute; /*运算符号两边一定要有空格*/ left: calc(50% - 10px); top: calc(50% - 10px); /*设置动画*/ animation: changeColor 3s infinite linear reverse; } /*转动的圆*/ .classB { /*设置宽高*/ width: 100px; height: 100px; /*设置颜色*/ background-color: black; /*设置形状*/ /*border-radius: 50%;*/ /*position*/ position: absolute; left: calc(50% - 50px + 100px); top: calc(50% - 50px + 100px); /*设置动画*/ /*动画名称 必要的*/ animation-name: xuanzhuan, changeColor; /*设置动画时间 必要的。*/ animation-duration: 5s; /*设置动画次数 inifinaite 匀速*/ animation-iteration-count: infinite; /*设置速率 linear 匀速*/ animation-timing-function: linear; /*设置动画的方向*/ animation-direction: reverse; /*将上面的动画属性合并为以下写法，仅适用于单个动画，多个动画的设置只能分开写 animation: xuanzhuan 3s infinite linear reverse; animation: changeColor 0.25s infinite linear reverse; /*设置旋转中心，默认是自转*/ transform-origin: -50px -50px; } /*设置动画*/ @keyframes xuanzhuan{ /*设置初始状态*/ 0%{ /*转换 transform*/ transform: rotate(0deg) scale(1); } /*设置结束状态 scale缩放 translate平移 倾斜 skew*/ 50%{ transform: rotate(180deg) scale(2); } 100%{ transform: rotate(360deg) scale(1); } } @keyframes changeColor{ 0%{ background-color: white; } 10%{ background-color: aliceblue; } 20%{ background-color: bisque; } 30%{ background-color: white; } 40%{ background-color: white; } 50%{ background-color: #FF0000; } 60%{ background-color: white; } 70%{ background-color: #FF0000; } 80%{ background-color: aquamarine; } 90%{ background-color: blue; } 100%{ background-color: red; } } </style> </head> <!--网页的身体--> <body> <div id="aa", class="classA"></div> <div id="bb", class="classB"></div> </body> </html>
2、下午3D。旋转正方体。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D</title> <style type="text/css"> html { height: 100%; } body { height: 100%; /*取消body标签默认产生的外间距*/ margin: 0; background-color: pin; /*第一步：开启弹性布局,对子元素*/ display: flex; /*第二步：设置水平方向居中 justify-content自适应*/ justify-content: center; /*第三部：设置垂直居中*/ align-items: center; /*设置镜头与平面的距离*/ perspective: 3000px; /*设置镜头在平面上的位置*/ /*perspective-origin: 0% 0%;*/ perspective-origin: right top; } /*定义section容器的大小颜色*/ section { width: 300px; height: 300px; /*设置相对定位：目的让【子】元素设置【绝对】定位时可以【参照】*/ position: relative; /*开启3D样式*/ transform-style: preserve-3d; /*旋转*/ animation: xuanzhuan 6s infinite linear; } @keyframes xuanzhuan { /*旋转的时候z轴保持不变,x和y做360度旋转*/ from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } /*对每一个div统一设置样式*/ div { width: 300px; height: 300px; border: 2px solid black; /*将文本居中*/ /*水平*/ text-align: center; /*设置行高*/ line-height: 300px; /*设置文本格式*/ font-family: "agency fb"; font-size: 30px; color: darkblue; /*定位：每一个面【相对】大箱子设置【绝对】定位*/ position: absolute; opacity: 0.7; /*设置图片*/ background-repeat: no-repeat; background-size: cover; } .front { background-image: url(../img2/1.jpg); transform: translateZ(150px); } .back { background-image: url(../img2/2.jpg); transform: translateZ(-150px); } /*旋转的时候坐标轴也会跟着旋转*/ .left { background-image: url(../img2/3.jpg); transform: rotateY(90deg) translateZ(150px); } .right { background-image: url(../img2/4.jpg); transform: rotateY(90deg) translateZ(-150px); } .top { background-image: url(../img2/5.png); transform: rotateX(90deg) translateZ(150px); } .down { background-image: url(../img2/6.jpg); transform: rotateX(90deg) translateZ(-150px); } </style> </head> <body> <!--第一步：定义一个大盒子来装六个面--> <section> <!--装六个面 前后左右上下--> <div class="front"></div> <div class="back"></div> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="down"></div> </section> </body> </html>
要把section想象成一个大盒子。。。