HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️

「爱情、让人受尽委屈。」 2022-09-10 05:10 280阅读 0赞

> ##       效果演示： ##

![20210905092501421.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### CSS样式： ###

@property --color-position {
        syntax: '<length-percentage>';
        inherits: false;
        initial-value: 30%;
    }
    
    body {
        margin: 0;
        overflow: hidden;
        --color-position: 30%;
        background: radial-gradient(circle at center, #F9F871, #FFD45A var(--color-position));
        animation: beat 3s infinite ease-in-out;
    }
    
    @keyframes beat {
        33%,
        66% {
            --color-position: 160%;
        }
    }

### 部分HTML代码 : ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Three.js + CSS Gradient background animated with Houdini</title>
    
        <link rel="stylesheet" href="css/style.css">
    
    </head>
    
    <body>
    
        <script src='js/three.min.js'></script>
        <script src="js/script.js"></script>
    
    </body>
    
    </html>

上面的 script.js和three.min.js需要引入即可运行

> ## 源码获取 ##
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  37  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210905092501421.gif]: /images/20220829/399b1fb17fab4d18a3ddd1237e4781bd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1a51e0aa4e98489a870dd91d1ba0bba3.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/ce0fe0da9f1843a28f8727266b7542d7.png