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天

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

在这里插入图片描述

猜你喜欢

转载自juejin.im/post/7019923246095007774

相关文章