当青训营遇上码上掘金

参加本次的主题创作活动，我选择了我的名片这一主题，下边是关于我的创作的过程及思路

我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

页面设计的比较简单，接下来就是进行介绍一下

背景中月亮的升起

        @keyframes myMoon {
            0% {
                left: 60%;
                top: 350px;
                opacity: 0;
            }

            100% {
                left: 80%;
                top: 150px;
                opacity: 1;
            }
        }

使用动画进行实现，调用动画，保证缓慢升起一次。 animation: myMoon 20s linear; ，最后就可以实现月亮由浅到深，并慢慢升起。

随机生成星星

        for (var i = 0; i < 70; i++) {
            var img = document.createElement('img')
            document.body.appendChild(img)
            img.src = './imgs/star.png'
            img.style.left = Math.random() * width + 'px'
            img.style.top = Math.random() * height + 'px'
            img.style.animationDelay = Math.random() * 3 + 's' 
        }

随机生成星星js如上，利用随机数函数，将70星星的位置随机给出，并利用随机数函数将星星出现的时间进行随机，myStar动画函数保证星星从暗到亮（改变透明度），最后动画不断循环使用。

animation: myStar 2s ease-in-out infinite;

随机生成流星

        for (var i = 0; i < 10; i++) {
            var lx = document.createElement('div')
            lx.className = 'star'
            lx.style.right = (Math.random() * 400 + 150) + 'px'
            lx.style.top = (Math.random() * 200 + 100) + 'px'
            lx.style.animationDelay = Math.random() * 3 * i + 's' 
            document.body.appendChild(lx)
        }

和上述星星的js实现是同样的道理，这里的流星的实现是利用border和伪类元素进行实现

    .star {
            width: 1px；
            display: block;
            position: absolute;
            background-color: transparent transparent transparent rgba(255, 255, 255, .5);
            opacity: 0;
            animation: star 4s linear infinite;
        }

.star::after {
            content: '';
            display: block;
            border: 1px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .5);
            transform: rotate(-45deg);
        }

这就是流星大概的实现过程

关于个人名片框

这里使用的就是背景透明度，border-shadow的使用，使内边框出现阴影。如果感兴趣，可以在下边的该页面发布的码上掘金页面进行查看。

code.juejin.cn/pen/7199646…

打开页面显示不出来的图片是星星的图片（本地未上传）。

「青训营 X 码上掘金」—— 我的名片创作