如果有一屏幕的爱心，你愿意送给谁？（简单实现原生js、css随机生成521个心）

最新推荐文章于 2024-05-24 22:43:48 发布

blankliu404

最新推荐文章于 2024-05-24 22:43:48 发布

阅读量2.2k

点赞数 2

文章标签：前端满屏爱心跳动 CSS动效

本文链接：https://blog.csdn.net/L333333333/article/details/101477119

版权

简单实现原生js、css随机生成521个心

爱心怎么做？
CSS画单个心
再加点CSS弄个盛放521个心的容器
js随机出心，让土味炸起来！
整合代码
本博客其他文章推荐

今天来做个有意思的东西，我们使用css制作出爱心，用js生成521个心铺满屏幕，啊哈哈哈哈！开始吧！

爱心怎么做？

我们画个图，look！
在这里插入图片描述

CSS画单个心

<style type="text/css">
    /**
     * heart标签的样式，一个红色的正方形，
     * 将最终图像旋转45度，并置于缩小一半、半透明状态，
     * 设置无限的动效
     * 单次动效时间3s
     */
    heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background: #e74c3c;
        transform: rotate(45deg) scale(.5);
        opacity: .5;
        animation-name: scale, opacity;
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    /**
     * 用伪类在heart之前画个圆并左移十像素
     */
    heart::before {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        background: #e74c3c;
        border-radius: 50%;
        transform: translateX(-10px);
    }

    /**
     *用伪类在heart之后画个圆并上移十像素
     */

    heart::after {
        position: absolute;
        content: '';
        width: 20px;
        height: 20px;
        background: #e74c3c;
        border-radius: 50%;
        transform: translateY(-10px);
    }

    /**
     * 跳动动效
     */
    @keyframes scale {

        25%,
        75% {
            transform: rotate(45deg) scale(1);
        }

        50%,
        100% {
            transform: rotate(45deg) scale(.5);
        }
    }
    /**
     * 改变透明度
     */
    @keyframes opacity {

        25%,
        75% {
            opacity: 1;
        }

        50%,
        100% {
            opacity: .5;
        }
    }
</style>

我们在html页面内加一个

<heart></heart>

就可以看出效果啦！让我们康康！
在这里插入图片描述
啊哈，这样我们就有了一个永远跳动的心~

再加点CSS弄个盛放521个心的容器

*{
    padding: 0;
    margin: 0;
}

body{
    background: #3498db;
    overflow: hidden;
}
/**
 * 主容器
 */
div#main{
    width: 100vw;
    height: 100vh;
}
/**
 * 显示文字
 */
h1#text{
    color: #FFF;
    text-align: center;
}

html的body内

<div id="main">
	<h1 id="text"></h1>
</div>

js随机出心，让土味炸起来！

<script type="text/javascript">
//获取父容器
var mainObj = document.getElementById('main')
//获取文本容器
var textObj = document.getElementById('text')
//获取浏览器的高度
var innerWidth = document.body.clientWidth
var innerHeight = document.body.clientHeight

//计数器
var number = 0

/**
 * 持续出心，直到数量为521，位置随机生成
 */
var interval = setInterval(function() {
    var heart = document.createElement('heart')
    heart.style.left = Math.floor(Math.random() * innerWidth) + 'px'
    heart.style.top = Math.floor(Math.random() * innerHeight) + 'px'
    mainObj.appendChild(heart)
    number++
    textObj.innerHTML = '送你'+number+'个爱心，请查收！'
    //当心的数量达到521时结束
    if (number >= 521) {
        clearInterval(interval)
    }
}, 50)
</script>