地球自转
效果图:
代码分析:
html
<body>
<div class="wrap">
<div class="box1 circle">
<!-- 18圆环绕成立体的球 -->
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
<span class="sp4"></span>
<span class="sp5"></span>
<span class="sp6"></span>
<span class="sp7"></span>
<span class="sp8"></span>
<span class="sp9"></span>
<span class="sp10"></span>
<span class="sp11"></span>
<span class="sp12"></span>
<span class="sp13"></span>
<span class="sp14"></span>
<span class="sp15"></span>
<span class="sp16"></span>
<span class="sp17"></span>
<span class="sp18"></span>
</div>
<div class="box2 circle">
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
<span class="sp4"></span>
<span class="sp5"></span>
<span class="sp6"></span>
<span class="sp7"></span>
<span class="sp8"></span>
<span class="sp9"></span>
<span class="sp10"></span>
<span class="sp11"></span>
<span class="sp12"></span>
<span class="sp13"></span>
<span class="sp14"></span>
<span class="sp15"></span>
<span class="sp16"></span>
<span class="sp17"></span>
<span class="sp18"></span>
</div>
<div class="box3 circle">
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
<span class="sp4"></span>
<span class="sp5"></span>
<span class="sp6"></span>
<span class="sp7"></span>
<span class="sp8"></span>
<span class="sp9"></span>
<span class="sp10"></span>
<span class="sp11"></span>
<span class="sp12"></span>
<span class="sp13"></span>
<span class="sp14"></span>
<span class="sp15"></span>
<span class="sp16"></span>
<span class="sp17"></span>
<span class="sp18"></span>
</div>
<div class="box4 circle">
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
<span class="sp4"></span>
<span class="sp5"></span>
<span class="sp6"></span>
<span class="sp7"></span>
<span class="sp8"></span>
<span class="sp9"></span>
<span class="sp10"></span>
<span class="sp11"></span>
<span class="sp12"></span>
<span class="sp13"></span>
<span class="sp14"></span>
<span class="sp15"></span>
<span class="sp16"></span>
<span class="sp17"></span>
<span class="sp18"></span>
</div>
</div>
</body>
css代码
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
/* 添加背景图片 */
background: url(images/xk.jpg) no-repeat;
}
/* 整体所有结构父级 */
.wrap{
/* 定位一个中心点 */
width: 600px;
height: 600px;
/* 在全局中居中 */
position: fixed;
left: 0;
right: 0;
top: 0;
bottom:0 ;
margin: auto;
transform-style: preserve-3d;
}
.box1{
width: 240px;
height: 240px;
/* 在wrap中居中 */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0 ;
margin: auto;
/* 看起来不圆润 */
transform-style: preserve-3d;
/* 3d旋转设置 */
animation: gogo 1s linear infinite;
}
.circle span{
/* span标签宽高不生效,给他加个定位 */
/* 圆球圈 */
position: absolute;
left: 0;
top:0;
width: 240px;
height: 240px;
border-radius: 50%;
border: 1px solid #efff3a;
box-shadow: 5px 0px 30px rgba(239, 255, 58, 0.4);
}
/* 把18道线圈旋转散开 9个转x 9个转y*/
.sp1{
transform: rotateX(40deg);
}
.sp2{
transform: rotateX(80deg); }
.sp3{
transform: rotateX(120deg);
}
.sp4{
transform: rotateX(160deg);
}
.sp5{
transform: rotateX(200deg);
}
.sp6{
transform: rotateX(240deg);
}
.sp7{
transform: rotateX(280deg);
}
.sp8{
transform: rotateX(320deg);
}
.sp10{
transform: rotateY(40deg);
}
.sp11{
transform: rotateY(80deg);
}
.sp12{
transform: rotateY(120deg);
}
.sp13{
transform: rotateY(160deg);
}
.sp14{
transform: rotateY(200deg);
}
.sp15{
transform: rotateY(240deg);
}
.sp16{
transform: rotateY(280deg);
}
.sp17{
transform: rotateY(320deg);
}
.box2{
width: 400px;
height: 400px;
/* 3d透视 */
transform-style: preserve-3d;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0 ;
margin: auto;
/* 白色边框 */
border: 5px solid blue;
box-shadow: 2px 2px 50px rgba(255, 255, 255, 1);
border-radius: 50%;
/* 设置边框旋转 */
transform: rotateX(65deg) rotateY(-15deg);
animation: gogo 1s reverse infinite;
}
.box2 span{
width: 60px;
height: 60px;
border: 1px solid blueviolet;
box-shadow: 5px 0px 15px rgba(31, 189 , 255, 0.4);
/* 把span球移动进边框里 */
left: 60px;
}
.box3{
width: 600px;
height: 600px;
transform-style: preserve-3d;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0 ;
margin: auto;
border: 5px solid pink;
box-shadow: 2px 2px 50px rgba(255, 255, 255, 1);
border-radius: 50%;
transform: rotateX(65deg) rotateY(-15deg);
animation: gogo 1s alternate infinite;
}
.box3 span{
/* 调整线圈即球的大小 */
width: 80px;
height: 80px;
/* 红颜色的线组成红色 */
border: 1px solid gold;
box-shadow: 5px 0px 15px rgba(255, 50 , 16, 0.4);
/* 调整线圈在box3里位置 */
left: 402px;
}
.box4{
width: 800px;
height: 800px;
transform-style: preserve-3d;
position: absolute;
left: -82px;
right: 0;
top: 0;
bottom:0 ;
margin: auto;
border: 5px solid orange;
box-shadow: 2px 2px 50px rgba(255, 255, 255, 1);
border-radius: 50%;
transform: rotateX(65deg) rotateY(-15deg);
animation: gogo 1s linear infinite;
}
.box4 span{
width: 120px;
height: 120px;
border: 1px solid pink;
box-shadow: 5px 0px 15px rgba(71, 251 , 0, 0.4);
/* 定位置初始 */
left: 402px;
top: 730px;
}
@keyframes gogo{
0%{ transform: rotateX(65deg) rotateY(-15deg) rotateZ(0deg); }
100%{ transform: rotateX(65deg) rotateY(-15deg) rotateZ(360deg); }
}
</style>
旋转相册
效果图:
代码分析:
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
body,html{
height: 100%;
background: url(images/bg2.jpg) no-repeat center top;
background-size: 100% 100%; }
/* 底部,摆放在网页哪个位置 */
.wrap{
width: 280px;
height: 400px;
/* 在网页内水平垂直居中 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) rotateX(0deg) rotateY(0deg)/* 旋转一下父元素 */;
/* 加上3d透视 */
transform-style: preserve-3d;
/* 定义做动画属性 */
animation: zhuanzhuan 15s linear infinite; }
/* 把照片放在同一个点 */
.wrap li{
position: absolute;
left: 0;
top: 0;
/* z轴移动 */
transform: translateZ(600px); }
/* 强制图片统一样式 */
.wrap li img{
width: 280px;
height: 400px; }
.wrap .li02{
/* 先旋转再位移 */
transform:rotateY(36deg) translateZ(650px);
}
.wrap .li03{
transform:rotateY(72deg) translateZ(650px);
}
.wrap .li04{
transform:rotateY(108deg) translateZ(650px);
}
.wrap .li05{
transform:rotateY(144deg) translateZ(650px);
}
.wrap .li06{
transform:rotateY(180deg) translateZ(650px);
}
.wrap .li07{
transform:rotateY(216deg) translateZ(650px);
}
.wrap .li08{
transform:rotateY(252deg) translateZ(650px);
}
.wrap .li09{
transform:rotateY(288deg) translateZ(650px);
}
.wrap .li010{
transform:rotateY(324deg) translateZ(650px);
}
/* 定义动画 起点到终点*/
@keyframes zhuanzhuan{
0%{ transform: translate(-50%,-50%) rotateX(0deg) rotateY(0deg);
}
25%{ transform: translate(-50%,-50%) rotateX(5deg) rotateY(90deg);
}
50%{ transform: translate(-50%,-50%) rotateX(0deg) rotateY(180deg);
}
75%{ transform: translate(-50%,-50%) rotateX(-5deg) rotateY(270deg);
}
100%{ transform: translate(-50%,-50%) rotateX(0deg) rotateY(360deg);
}
}
</style>
3d立方体
效果图:
代码分析:
<body>
<ul class="wrap">
<li class="li01">1</li>
<li class="li02">2</li>
<li class="li03">3</li>
<li class="li04">4</li>
<li class="li05">5</li>
<li class="li06">6</li>
</ul>
</body>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.wrap{
width: 200px;
height: 200px;
/* border: 3px solid #000; */
position: absolute;
left: 50%; /*居中效果 */
top: 50%;
transform: translate(-50%,-50%)/* 也是实现居中 */
rotateX(0deg) rotateY(0deg);
/* 3d透视呈现出来前后效果 */
transform-style: preserve-3d;
/* 把动画添加到这里 */
animation: zhuan 15s ease infinite;
}
.wrap li{
width: 200px;
height: 200px;
background: rgba(0,0,0,0.5);
/* 把6面放在一起方便计算 */
position: absolute;
left: 0;
top: 0;
border: 1px solid yellow; }
/* 前 以前后中心为立方体中心 */
.li01{
transform: translateZ(100px);
}
/* 后 */
.li02{
transform: translateZ(-100px);
}
/* 翻转加位移 */
.li03{
transform: rotateX(90deg) translateZ(100px);
}
.li04{
transform: rotateX(90deg) translateZ(-100px); }
.li05{
transform: rotateY(90deg) translateZ(100px); }
.li06{
transform: rotateY(90deg) translateZ(-100px); }
/* 转动动画 */
@keyframes zhuan{
0%{
transform: translate(-50%,-50%) rotateX(0deg) rotateY(0deg); }
100%{ transform: translate(-50%,-50%) rotateX(360deg) rotateY(360deg); }
}
</style>
做效果之前,先给要出效果的本体做动画效果。如:transform:all 2s ease;
位移
效果图:
效果图:
代码分析:
文字或标题做位移,需要本身做出动画效果。在hover时触发位移
添加动画效果是第一条件,再使用hover效果。使用定位来调出隐藏元素
<div class="div1">
<img src="images/1.png" alt="">
<h2>Billboard三首排行第一</h2>
<p class="p01">Shake It Off</p>
<p class="p02">Shake It Off</p>
<p class="p03">Shake It Off</p>
</div>
.wrap div{
width: 500px;
height: 574px;
overflow: hidden;
/* 鼠标上去有手型 */
cursor: pointer;
/* 当作父元素相对定位 */
position: relative;
作为里面元素包含快
}
.wrap div img{
width: 100%;
}
.div1 h2{
color: #fff;
font-size: 30px;
没写定位,字体不会出来
position: absolute;
定好位置,根据效果图的显示
top: 60px;
left: 50px;
font-weight: bold;
运行时间加延迟时间
transition: all 1.5s 0.5s; 动画效果
}
.div1 .p01{
background: #008aff;
通过定位设定属性值让元素定好位置
position: absolute;
top: 600px;超出范围让其隐藏
left: 100px;
transition: all 0.5s; 动画效果
}
.div1 .p02{
background: #008aff;
position: absolute;
top: 200px;超出范围让其隐藏
left: 600px;
transition: all 0.5s; 动画效果
}
.div1 .p03{
background: #008aff;
position: absolute;
top: 280px;
left: -200px;
transition: all 0.5s; 动画效果
}
.div1 img{
transition: all 0.5s; 动画效果
}
鼠标触发:
通过鼠标划过,让其回归初设置属性值的地方
.div1:hover .p01{
top: 130px; 之前位移出去 。超出窗外的文本位移进来
}
.div1:hover .p02{
left: 100px;
}
.div1:hover .p03{
left: 100px;
}
.div1:hover img{ 图在动,添加效果
transform: translate(50px,0);
opacity: 0.5; 透明度效果
}
.div1:hover h2{
left: 100px;
}
旋转
效果图
先
后
代码分析
<div class="div4">
<img src="images/4.png" alt="">
<h2>1989</h2>
<p>Taylor Swift《1989》</p>
<span></span> <!--蓝色的倒三角形 -->
</div>
.wrap div{
width: 500px;
height: 574px;
overflow: hidden;
/* 鼠标上去有手型 */
cursor: pointer;
/* 当作父元素相对定位 */
position: relative;
}
.wrap div img{
width: 100%; }
.div4 h2{
/* 让字体出来 */
position: absolute;
left: 25px;
top: 100px;
font-size: 24px;
color: #fff;
font-weight: bold;
opacity: 0;
transition: all 1.5s;
}
.div4 p{
position: absolute;
right: 20px;
bottom: -80px;/* 藏起来文字 */
transition: all 1.2s;
/* 增加层级,防止回去的时候被覆盖起来 */
z-index: 11;
}
.div4 span{
/* 三角形实际是大长方形旋转 */
position: absolute;
bottom: -300px;/* 在图片范围的具体宽高像素,使用赋值向下隐藏 */
left: 0;
/* 没有具体的值还在原有基础上增加20% */
width: 120%;
height: 300px;
background: #6495ed;
/* 设置基点旋转 */
transform-origin: left top;
/* 2d的首要条件设置过渡动画条件 */
transition: all 1.5s;
opacity: 0;
}
.div4:hover span{
/* 旋转,可在浏览器设置属性预览得到旋转值 */
transform: rotate(-18deg);
/* 透明度,让下面文字显示出来 */
opacity: 1;
}
.div4:hover h2{
top: 60px;
opacity: 1;
}
.div4:hover p{
bottom: 80px;
}
缩放
效果图
先
后
代码分析
<div class="div8">
<img src="images/8.png" alt="">
<h2>Taylor Swift</h2>
<span class="xx"></span>
<span class="yy"></span>
</div>
`.wrap div{
width: 500px;
height: 574px;
overflow: hidden;
/* 鼠标上去有手型 */
cursor: pointer;
/* 当作父元素相对定位 */
position: relative;
}
.wrap div img{
width: 100%;
}
.div8 .yy{
width: 200px;
height: 240px;
/* 影响高度边框 */
border-left: #ccc solid 2px;
border-right: #ccc solid 2px;
position: absolute;
top: 55px;
left: 140px;
transition: all 1.5s;
transform-origin: left top;
/* y轴不动 */
transform: scale(1,0);
}
.div8 .xx{
width: 240px;
height: 200px;
/* 影响宽度边框 */
border-top: #ccc solid 2px;
border-bottom: #ccc solid 2px;
position: absolute;
top: 70px;
left: 125px;
transition: all 1.5s;
/* y轴不动 */
transform: scale(0,1);
transform-origin: left top;
}
.div8 h2{
color: #000;
font-size: 24px;
font-weight: bold;
position:absolute;
top: -100px;
right: 100px;
transition: all 1.5s;
}
.div8:hover h2{
/* top: 100px; */
transform:rotate(360deg) translate(0,200px);
}
.div8:hover .xx{
transform: scale(1,1);
}
.div8:hover .yy{
transform: scale(1,1);
}