我们来制作一个小黄鸭转圈跳舞的页面。
分析一下
1、分析一下这个页面,要完成这些效果,一共需要3步:
- 把鸭子都放到一个盒子当中
- 在盒子里,把每个鸭子的位置摆好
- 让盒子旋转
2、让鸭子在盒子中的位置摆好,需要怎么做:
- 先让鸭子站在圆心的位置(需要先了解父相子绝定位方式)
- 沿一个方向移动一个半径的距离(3d)
- 每个鸭子旋转一个角度,让鸭子均匀的分布一圈
开始写代码
要用到的知识包括几个HTML标签和一部分的css知识。
先把图片放到页面里边。
先来在页面中添加一个img标签,将小黄鸭跳舞的gif图放到标签中
<img src="img/001.gif" >
这个时候,可以看到,页面中已经有一个小黄鸭了。
把图片放到一个盒子里边
<div class="box">
<img src="img/001.gif" >
</div>
这个时候盒子看不到,我们通过选择器,来给盒子添加一个边框,好看到它
<style>
.box{
border: 1px solid red;
}
</style>
盒子很大,比鸭子大很多。
我们把盒子的大小设置成跟鸭子图片的大小一样
.box{
border: 1px solid red;
width: 140px;
height: 172px;
}
接下来呢,让小黄鸭显示在页面的中间。
.box{
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
}
这个时候,盒子跟盒子里的鸭子都居中了。
我们再添加其他的鸭子。
<div class="box">
<img src="img/001.gif">
<img src="img/002.gif">
<img src="img/003.gif">
<img src="img/004.gif">
<img src="img/005.gif">
<img src="img/006.gif">
<img src="img/007.gif">
<img src="img/008.gif">
<img src="img/009.gif">
</div>
发现鸭子是竖着排成一列的
我们先要把所有的鸭子放到围绕旋转的圆心处,所以,所有的鸭子应该是在同一个位置。怎么把鸭子都放在圆心处呢。我们需要先学习一个定位方式:父相子绝定位。
重要内容补充-定位方式的讲解
相对定位,绝对定位。
重要内容补充-3D图形布局讲解
需要进行3D布局的元素,父元素加上一个样式:
transform-style: preserve-3d;
只加上这个,没有效果,需要跟transform配合使用
transform-style: preserve-3d;
/*设置旋转绕X轴*/
transform: rotateX(-10deg);
开始写代码
把所有鸭子放到同一个位置
利用父相子绝定位,把父盒子设置成相对定位,子盒子设置成绝对定位
.box{
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
}
img{
position: absolute;
}
让鸭子面向不同的方向,在360度内均匀分布
设置父盒子的3D效果,给每个图片添加一个类名,给每个图片,设置不同的旋转角度。
<div class="box">
<img src="img/001.gif" class="img1">
<img src="img/002.gif" class="img2">
<img src="img/003.gif" class="img3">
<img src="img/004.gif" class="img4">
<img src="img/005.gif" class="img5">
<img src="img/006.gif" class="img6">
<img src="img/007.gif" class="img7">
<img src="img/008.gif" class="img8">
<img src="img/009.gif" class="img9">
</div>
<style>
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
img {
position: absolute;
}
.img1 {
transform: rotateY(0deg);
}
.img2 {
transform: rotateY(40deg);
}
.img3 {
transform: rotateY(80deg);
}
.img4 {
transform: rotateY(120deg);
}
.img5 {
transform: rotateY(160deg);
}
.img6 {
transform: rotateY(200deg);
}
.img7 {
transform: rotateY(240deg);
}
.img8 {
transform: rotateY(280deg);
}
.img9 {
transform: rotateY(320deg);
}
</style>
这个时候,鸭子都在圆点,面向了不同的角度,在让它们向前跨一步,就分散成了一个圆
<style>
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
}
img {
position: absolute;
}
.img1 {
transform: rotateY(0deg) translateZ(300px);
}
.img2 {
transform: rotateY(40deg) translateZ(300px);
}
.img3 {
transform: rotateY(80deg) translateZ(300px);
}
.img4 {
transform: rotateY(120deg) translateZ(300px);
}
.img5 {
transform: rotateY(160deg) translateZ(300px);
}
.img6 {
transform: rotateY(200deg) translateZ(300px);
}
.img7 {
transform: rotateY(240deg) translateZ(300px);
}
.img8 {
transform: rotateY(280deg) translateZ(300px);
}
.img9 {
transform: rotateY(320deg) translateZ(300px);
}
</style>
但其实没有看到围城圆的效果,我们把父盒子在x轴旋转一个角度,就可以体现出来。同时,加一个
margin-top: 150px;
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
margin-top: 150px;
}
可以看到,已经形成一个圆了。
添加动画
/*定义一个动画*/
@keyframes xuanzhuan {
0% {
transform: rotateX(-20deg) rotateY(0deg)
}
100% {
transform: rotateX(-20deg) rotateY(360deg)
}
}
.box {
border: 1px solid red;
width: 140px;
height: 172px;
/*margin-right: auto ;*/
/*margin-left: auto ;*/
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
margin-top: 150px;
/*绑定动画*/
animation: xuanzhuan 10s;
/*动画无限循环播放*/
animation-iteration-count: infinite;
/*速度线性播放*/
animation-timing-function: linear;
}
添加背景音乐
<audio src="media/小黄鸭音频.mp3" autoplay="autoplay" loop="loop"></audio>
chrome浏览器不能自动播放问题解决
浏览器输入
chrome://flags/#autoplay-policy
将 Autoplay policy 改为
No user gesture is required
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes xuanzhuan {
0% {
transform: rotateX(-20deg) rotateY(0deg)
}
100% {
transform: rotateX(-20deg) rotateY(360deg)
}
}
body {
background-color: #313131;
}
.box {
width: 154px;
height: 186px;
margin: 150px auto;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg);
animation: xuanzhuan 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.box > div {
position: absolute;
}
</style>
</head>
<body>
<audio src="media/小黄鸭音频.mp3" loop="loop" autoplay="autoplay"></audio>
<div class="box">
<div style="transform: rotateY(0deg) translateZ(300px)">
<img src="img/001.gif" >
</div>
<div style="transform: rotateY(40deg) translateZ(300px) ">
<img src="img/002.gif" >
</div>
<div style="transform: rotateY(80deg) translateZ(300px) ">
<img src="img/003.gif" >
</div>
<div style="transform: rotateY(120deg) translateZ(300px) ">
<img src="img/004.gif" >
</div>
<div style="transform: rotateY(160deg) translateZ(300px) ">
<img src="img/005.gif" >
</div>
<div style="transform: rotateY(200deg) translateZ(300px) ">
<img src="img/006.gif" >
</div>
<div style="transform: rotateY(240deg) translateZ(300px) ">
<img src="img/007.gif" >
</div>
<div style="transform: rotateY(280deg) translateZ(300px) ">
<img src="img/008.gif" >
</div>
<div style="transform: rotateY(320deg) translateZ(300px) ">
<img src="img/009.gif" >
</div>
</div>
</body>
</html>
原文地址:https://www.cnblogs.com/hansha/p/10125070.html
时间: 2024-10-11 11:43:13