简单实现原生js、css随机生成521个心
今天来做个有意思的东西,我们使用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>
效果如下,炸起来吧!啊哈哈哈哈!
手动狗头,是不是很刺激,不要试图尝试没有停止条件的出心,这种内存消耗太大了,此文章仅做娱乐篇~~
拜了个拜!!
整合代码
本博客其他文章推荐
maven新手上路–创建webapp项目,引入jstl、el依赖及el不解析的问题解决(详细图文)