正文 

当前位置： 首页 > 知识 > java教程

制作一个小黄鸭转圈跳舞的页面。(代码片段)

夏公瑾 夏公瑾     2022-11-24     631

关键词：

我们来制作一个小黄鸭转圈跳舞的页面。

分析一下

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>

#uojround48:goodbyewuxuc.新年的小黄鸭(代码片段)

...\(O(n^2)\)100pts：自己的理解可能跟题解有点偏差。考虑dp的一个\(f[i][j]\)一定会转移到0之后才对非\(j-1\)的位置造成贡献。我们转换一下，即每个位置所在的重链一定会通向叶子节点。考虑我们能不能直接通过数据结构找出那个叶... 查看详情

小黄鸭思路梳理-跨境电商斗篷流程

...访问控制。我们之前搞的大项目访问流量非常大。刚开发一个功能，通过简单的测试发布了出去。还是不能给大多数的用户来看就开放几个IP。让从这几个IP访问的人看。这在服务器端是可以实现的。服务器端还可以收集更多的... 查看详情

❤️《小黄鸭调试法》程序员必备技能！！!❤️

...f0c;然后对方却一脸茫然。场景二：你的同行跑来问你一个问题，但是当他自己把问题说完，或说到一半的时候就想出答案走了，留下一脸茫然 查看详情

给页面点击链接加了转圈圈和解决遇到的bug(代码片段)

今天遇到一个问题，之前给整个网站上的链接加了loading，今天遇到在ios的chrome和safari下点击进入新页面然后点击浏览器的返回按钮，loading还在，并且一直存在，最后网上搜到了解决方案特记录下 点击事件加loading：$(document).... 查看详情

七夕限定不会编程也能送给她一个让字符串跳舞的视频(代码片段)

文章目录制作流程将视频转换成图片将图片转换成字符形式的图片提取音频图片合成视频并加音频总结七夕节到了，今天就来点不一样的内容吧！如何让你喜欢的视频变成字符串的形式扭动着！接下来我们先欣赏一下... 查看详情

小小的心得把(代码片段)

获得经验遇到500不要惊慌失措，小黄鸭调式，多来几次理清思路，还是500的话那就清缓存，再不行的话就重启电脑！！！还有以后注意这种类型，可把我害惨了enctype="multipart/form-data"写SQL的时候注意?是不是英文的，注意... 查看详情

高级土味情话

...蔓越莓今天你想我了莓我给你科普一下鸭子的种类可达鸭小黄鸭扁嘴鸭我想你了鸭4.我给你科普一下油的不同种类地沟油菜籽油橄榄油我爱你呦我给你科普一下甜的分类微甜有点甜超级甜我和你甜6.我给你科普一下泥的种类水泥... 查看详情

p2029跳舞(代码片段)

题目描述小明今天得到一个跳舞毯游戏程序Dance。游戏每次连续出N个移动的“箭头”，箭头依次标号为1到N，并且的相应的分数S[1..N]。如果你能“踏中”第i号箭头，你将获得相应的分数S[i]；否则将被扣除相应的分数... 查看详情

如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)

...，此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下：（怕侵权就只放个动图）可以看到小姐姐的舞蹈非常让人上头哈！！！！材料准备ÿ... 查看详情

如何用matlab为小姐姐跳舞视频增添另一个小姐姐跳舞进度条(代码片段)

...，此篇文章只是为了探究matlab能干啥的边界。并作为一个熟悉matlab矩阵操作和视频音频操作的例子。效果如下：（怕侵权就只放个动图）可以看到小姐姐的舞蹈非常让人上头哈！！！！材料准备ÿ... 查看详情

cqoi2009跳舞(代码片段)

题目链接：戳我刚开始会有这样一个建模——男孩和S连边，女孩和T连边，就是一个二分图了。因为还有喜欢和不喜欢两种情况，所以每个人还要拆点。之后每个不喜欢的点要用流量限制一下最多选k个。然后就是喜欢的连INF流量... 查看详情

[小黄书管理平台]登录服务的实现(代码片段)

...控件进行控制。这一章我们会开始动手写代码，实现小黄书管理平台的登录功能。其中涉及以下几个点:支持es6async/await特性使用Logger实现promisify化的HTTP请求服务实现登录服务调用登录服务进行登录1.支持es6async/await特性 查看详情

react开发（250）:react项目理解antdesignloding控制页面转圈加载(代码片段)

lecturer,lecturerOrganization,admin,menu,modalOkButtonLoading:loading.effects['lecturer/save']||loading.effects['lecturer/update'],spanLoading:loading.effects['lecturer/save']| 查看详情

react开发（250）:react项目理解antdesignloding控制页面转圈加载(代码片段)

lecturer,lecturerOrganization,admin,menu,modalOkButtonLoading:loading.effects['lecturer/save']||loading.effects['lecturer/update'],spanLoading:loading.effects['lecturer/save']| 查看详情

text鸭(代码片段)

查看详情

详细页面接口制作展示(代码片段)

...获取数据阐述首页的接口和展示已经差不多了，现在可以制作详细页的接口和内容。这节课主要目的是制作文章详细页面的接口，通过一个ID查找出详细的信息。编写中台详细页面接口Route::get(\'getArticleById\',\'TestController@getArticleB... 查看详情

p3153[cqoi2009]跳舞(代码片段)

...男孩和女孩恰好配成n对跳交谊舞。每个男孩都不会和同一个女孩跳两首（或更多）舞曲。有一些男孩女孩相互喜欢，而其他相互不喜欢（不会”单向喜欢“）。每个男孩最多只愿意和k个不喜欢的女孩跳舞，而每个女孩也... 查看详情

二次元的css——用div+less做一个小黄人构造器(代码片段)

仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各个细节的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那... 查看详情