前端每日挑战の眼冒金星效果

最新推荐文章于 2020-11-19 12:36:17 发布

油炸果XnW

最新推荐文章于 2020-11-19 12:36:17 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

分类专栏：每日挑战学习文章标签：前端每日挑战

本文链接：https://blog.youkuaiyun.com/weixin_41223912/article/details/83142463

每日挑战学习专栏收录该内容

11 篇文章

订阅专栏

本文分享了一款基于HTML和CSS实现的眼冒金星动画效果，通过grid布局和原生JS动态生成子元素，配合动画延迟，达到了炫酷的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端每日挑战の眼冒金星效果

内容摘要

伤心啊，写了好几天博客没人看~不过没关系，写博客的主要目的还是为了技术积累。在segmentFault上看到有前端每日专栏，觉得不错，正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果，动画出处：https://segmentfault.com/a/1190000016707813

最终效果预览：在这里插入图片描述

内容学习

这次的内容比较简单，一般都看得懂就不再赘述了。主要用了一个grid布局和js动态产生子格子的数量以及动画的延迟，原作者使用的是3d.js编写的，本人不太熟悉编译了很久没成功，于是改成了熟悉的原生JS去编写，很快也达到目的了，代码也就几行差不多。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>眼冒金星</title>
    <style>
        body{
            margin: 0;
            height: 100vh;
            /*居中显示*/
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: black;
        }
        .container{
            /*网格式布局*/
            display:grid;
            /*--columns: 3;*/
            /*设置列*/
            grid-template-columns: repeat(var(--columns),1fr) ;
        }
        .container span{
            /*color: white;*/
            width: 25px;
            height: 25px;
            color: lime;
            border: 1px solid red;
            background-color: currentColor;
        }
        .container span{
            /*定义缩放*/
            transform: scale(0);
            animation: spin 5s linear infinite;
            /*设置动画延时*/
            animation-delay:calc(var(--delay)*1s);
        }
        @keyframes spin {
            0%{
                transform:rotate(0deg) scale(1);
            }
            5%,15%{
                transform: rotate(90deg) scale(0);
                background-color: white;
            }
            17.5%{
                transform: rotate(180deg) scale(1);
            }
            20%,100%{
                transform: rotate(90deg) scale(0);
            }
        }
        .container span:nth-child(1){--delay:0.8}

    </style>

</head>
<body>
    <div class="container" id="container">
    </div>
</body>

<script>
    (function () {
        window.onload = function () {
        var COLUMNS = 15;
        var ctn = document.getElementById("container");
        ctn.style.cssText += '--columns:'+ COLUMNS;
        for (var i = 0; i < COLUMNS*COLUMNS; i++) {
            var newspan = document.createElement("span");
            newspan.style.cssText = '--delay:' + Math.random()*4;
            ctn.appendChild(newspan);
        }
    }
    }())
</script>
</html>