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

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

分析一下

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

制作一个小黄鸭转圈跳舞的页面。的相关文章

小黄鸭调试法

小黄鸭调试法(又称橡皮鸭调试法,黄鸭除虫法)是软件工程中使用的调试代码方法之一.此概念是参照于一个来自<程序员修炼之道>书中的一个故事.传说中程序大师随身携带一只小黄鸭,在调试代码的时候会在桌上放上这只小黄鸭,然后详细地向鸭子解释每行代码. 许多程序员都有过向别人(甚至可能向完全不会编程的人)提问及解释编程问题,就在解释的过程中击中了问题的解决方案.一边阐述代码的意图一边观察它实际上的意图并做调试,这两者之间的任何不协调会变得很明显,并且更容易发现自己的错误.如果没有玩具小鸭子也可以考虑向其它

利用yacc和lex制作一个小的计算器

买了本<自制编程语言>,这本书有点难,目前只是看前两章,估计后面的章节,最近一段时间是不会看了,真的是好难啊!! 由于本人是身处弱校,学校的课程没有编译原理这一门课,所以就想看这两章,了解一下编译原理,增加一下自己的软实力.免得被别人鄙视. 一.安装yacc和lex 我是在Windows下使用这两个软件的.所以使用bison代替yacc,用flex代替lex.两者的下载地址是http://sourceforge.net/projects/winflexbison/ 我的gcc环境是使用以前用过

【二次元的CSS】—— 用 DIV + LESS 做一个小黄人构造器

仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各个细节的形状,当然也不会使用任何图片哦.那就没意思了. 有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了. 这次用到了一些LESS的特性,通过设置一些指定的参数来生成不同种类.不同身材的小黄人. GitHub传送门:https://github.com/lancer07/css3Minons 效果是这个样子的 首先 先做个标准版的(ps:也就是图中的第一个小黄人

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:制作一个小按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

# UOJ Round48:Goodbye Wuxu C. 新年的小黄鸭

35 pts: 设\(f[i][j]\)表示在\(i\)节点,当前重链顶端到当前点距离为\(j\)的最优方案. 复杂度是\(O(n^2)\) 100 pts: 自己的理解可能跟题解有点偏差. 考虑dp的一个\(f[i][j]\) 一定会转移到0之后才对非\(j-1\)的位置造成贡献. 我们转换一下,即每个位置所在的重链一定会通向叶子节点. 考虑我们能不能直接通过数据结构找出那个叶子节点.考虑这一条链,我们将这一条链每个点的权值设置为这个点的父亲的其他儿子到达这条链时的\(f\),选这条链得到的答

Cyberduck 小黄鸭 跨平台的 FTP 软件

简介 1.Cyberduck是一款带图形界面的FTP客户端软件,目前有windows版和mac版. 2.支持文件下载,上传,删除等操作 3.官网地址:https://cyberduck.io/ 用途 对于记不住命令的小伙伴,你们的福音来了.使用该软件,完全图形化的操作,可以满足大部分需求.再也不用担心记不住命令了.像windows系统,资源管理器本身就完美支持ftp,用该软件很多余,该软件主要用于mac.很多其他的同类型软件,在mac上是收费的,这款软件完全免费,而且可以在github找到源码,

CSS3 小黄人案例

使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: 1 <div class="wrap"> 2 <!-- 头发 --> 3 <div class="hair"> 4 <div class="hair_1"></div> 5 <div class="hair_2"></div> 6 </div> 7 <!-- 身体

Simsimi 小黄鸡机器人最新无限制接口api simsimi机器人接口api 微信公众号

一.什么是Simsimi? simsimi公司是提供智能服务,其中一个服务是simsimi聊天机器人服务,每天有超过百万的用户聊天,国内最大的搜索引擎——百度的产品siri使用的就是simsimi提供的api. 你可以在网址http://www.simsimi.com/talk.htm# 进行体验 SimSimi inc. is specialized in collective intelligence service. All kinds of services we provide gen

利用CoreGraphics画小黄人

简单的利用 CoreGraphics 画一个小黄人 话不多说,全在代码里面,挺简单的一个东西 ///画身体 void drawBody(CGContextRef context,CGRect rect) { ///设置颜色 [[UIColor yellowColor] set]; CGFloat startX = 100; CGFloat startY = 120; ///将画笔移动到指定位置 CGContextMoveToPoint(context, startX, startY); CGFl