HTML+CSS+JS实现h5酷炫的天体木星动画特效

举报
Java李杨勇 发表于 2022/02/28 21:16:57 2022/02/28
【摘要】 HTML+CSS+JS实现h5酷炫的天体木星动画特效

    效果演示:  

代码目录:


主要代码实现:

部分CSS样式:

body {
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url("../img/bg.jpg");
    background-size: cover;
}

canvas {
    display: block;
}

#canvas_container {
    width: 100%;
    height: 100vh;
}

button {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid white;
    border-radius: 5px;
    font-size: 0.9rem;
    padding: 0.5rem 0.9em;
    background: #000000;
    color: white;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    cursor: pointer;
    transition: all .5s;
}

button:hover {
    background: #ffffff;
    color: #000000;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dreaming of Jupiter - Three.js</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id="canvas_container"></div>
    <button id="fullscr">全屏预览</button>

    <script src='js/three.min.js'></script>
    <script src="js/script.js"></script>

</body>

</html>

源码获取

查看博主主页或私信博主获取

精彩推荐更新中:

HTML5大作业实战100套

  打卡 文章 更新 40  /  100天

大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~!

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200