?CSS + JS 送学妹满屏幕小爱心

递归王子
• 阅读 3339

故事开始

午饭时间，暗恋已久的学妹拉着我的衣袖：“学长学长，你能不能让这些爱心变成五颜六色的吗~”。


我在旁边笑开了花~~~
?CSS + JS 送学妹满屏幕小爱心




诶呀，口水流出来了。


我想最终效果是这样的（猜猜多少个爱心）：

?CSS + JS 送学妹满屏幕小爱心

然后开始动手吧~

学啥本领

本文将带大家学习两个好东西：
1.生成随机色的方法；
2.Element.animate() 方法。


当然，还有撩妹技巧了~

代码走起

1. 画个小爱心


爱心怎么画，不是咱们本文重点，so，SVG搞起：

<div id="heart">
  <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
       xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
  >
    <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
             186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
             396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
             128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
             677.51936 192.03072z" p-id="1254"
    ></path>
  </svg>
</div>

小爱心出来了：

?CSS + JS 送学妹满屏幕小爱心

2. 画一大堆爱心

现在删除到之前的 SVG 标签，换成动态生成咯~~

let heartList = '';
const n = 99;
for(let i = 0; i <= n; i++){
    heartList += `
      <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32">
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}
document.getElementById('heart').innerHTML = heartList;

一大堆小爱心出现啦：

?CSS + JS 送学妹满屏幕小爱心

3. 打造魔法棒

接下来我们要打造一把魔法棒，能让我们这些小爱心变成各种各样的颜色。
没错，这把魔法棒，就是用来生成随机颜色。


方法很多，我搜集以下几种简单好用的生成随机颜色的方法，基本我们业务随便一个都能用：

function getRandomColor(){
    const r = Math.floor(Math.random()*255);
    const g = Math.floor(Math.random()*255);
    const b = Math.floor(Math.random()*255);
    return 'rgba('+ r +','+ g +','+ b +',0.8)';
}

function getRandomColor(){
    return '#'+Math.floor(Math.random()*16777215).toString(16);
}

function getRandomColor(){
    return '#' + (function(color){    
        return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
        && (color.length == 6) ?  color : arguments.callee(color);    
    })('');
}

function getRandomColor(){
    return '#'+'0123456789abcdef'.split('').map(
        (v,i,a) => i>5 ? null : a[Math.floor(Math.random()*16)] 
    ).join('');
}

function getRandomColor(){
    return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
}

function getRandomColor(){
    const colorAngle = Math.floor(Math.random()*360);
    return 'hsla('+ colorAngle +',100%,50%,1)';
}

function getRandomColor(){
    return (function(m,s,c){
        return (c ? arguments.callee(m,s,c-1) : '#') +
        s[m.floor(m.random() * 16)]
    })(Math,'0123456789abcdef',5)
}

随机色真好玩~

4. 五颜六色！变~

最后，我们修改前面 SVG 的代码片段，加入 getRandomColor 方法的调用：

for(let i = 0; i <= n; i++){
    heartList += `
      <svg t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}

99 个小爱心，水灵灵的！

?CSS + JS 送学妹满屏幕小爱心

5. 动起来吧！

这时候，每个爱心都静静躺着页面，是时候让它们动起来啦，为了学妹~


继续改造前面 SVG 代码，为每个 SVG 标签添加连续 ID 值：

for(let i = 0; i <= n; i++){
    heartList += `
      <svg id="heart_${i}" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}

生命随机放大倍数，并设置动画效果：

let getRandomNum = () => Math.floor(Math.random()*2+1);
setTimeout(function(){
    for (let i = 0; i <= n; i++) {
        const item = `heart_${i}`;
        document.getElementById(item).animate([
            // keyframes translateY(0px)
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
            { transform: `scale(${getRandomNum()})` },
        ], {
            // timing options
            duration: 5000,
            iterations: Infinity
        });
    }
}, 100)

然后，小爱心们动起来啦。

?CSS + JS 送学妹满屏幕小爱心

6. 飞起来吧~


接下来，要让这些小爱心飞起来~

?CSS + JS 送学妹满屏幕小爱心

下面贴代码。

html,body{
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
}
#heart{
    position: relative;
}
.item{
    position: absolute;
}

逻辑修改：

let heartList = ''; 
const n = 666; // 总爱心数
// 生成随机颜色
function getRandomColor() {
    return (function (m, s, c) {
        return (c ? arguments.callee(m, s, c - 1) : '#') +
            s[m.floor(m.random() * 16)]
    })(Math, '0123456789abcdef', 5)
}
// 生成爱心列表
for(let i = 0; i <= n; i++){
    heartList += `
      <svg id="heart_${i}" class="item" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" 
           xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32"
                     fill="${getRandomColor()}"
            >
        <path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 
                 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 
                 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 
                 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 
                 677.51936 192.03072z" p-id="1254"
        ></path>
      </svg>
    `
}
// 随机放大倍数
const getRandomNum = (scale) => Math.floor(Math.random()*scale+1);
const boxWidth = window.innerWidth;
const boxHeight = window.innerHeight;
setTimeout(function(){
    for (let i = 0; i <= n; i++) {
        const item = `heart_${i}`;
        const width = getRandomNum(boxWidth);
        const height = getRandomNum(boxHeight);
        const cWidth = getRandomNum(1000) - width;
        const cHeight = getRandomNum(1000) - height;
        document.getElementById(item).animate([
            { transform: `scale(${getRandomNum(2)})`,left: `0px`, top: `0px` },
            { transform: `scale(${getRandomNum(2)})`,left: `${boxWidth/2}px`, top: `${boxHeight/2}px` },
            { transform: `scale(${getRandomNum(2)})`,left: `${cWidth * 2}px`, top: `${cHeight * 2}px` },
        ], {
            duration: 9000,
            iterations: Infinity,
            easing: 'ease-in-out'
        });
    }
}, 100)
document.getElementById('heart').innerHTML = heartList;

聪明的你，再配上BGM，浪漫~


还能做更多有意思的小玩意，靠各位发挥啦。

故事结束

继续~


对了，送给学妹的代码我放在仓库：
https://github.com/pingan8787/Leo-JavaScript/blob/master/Leo-Demo/7-WeiteHeartPop.html

?CSS + JS 送学妹满屏幕小爱心

javascriptcss
点赞
收藏
评论区
推荐文章
blmius blmius
•
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
5678
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
2327
0
0
美凌格栋栋酱 美凌格栋栋酱
•
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
2315
0
0
helloworld_34035044 helloworld_34035044
•
3年前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为
1911
0
0
待兔 待兔
•
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
1709
0
0
Jacquelyn38 Jacquelyn38
•
4年前
2020年前端实用代码段，为你的工作保驾护航
有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
2876
0
0
梦 梦
•
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
1980
0
0
Stella981 Stella981
•
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
1112
0
0
Stella981 Stella981
•
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段，id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
1868
0
0
Python进阶者 Python进阶者
•
1年前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
1173
0
0
递归王子
递归王子
Lv1
你喜欢的人未必懂你，还是去找个喜欢你的吧。
文章
4
粉丝
0
获赞
0
热门文章
NettyClient端调用remote service的方式
醉三皇成为第12届北京国际网络电影展官方指定用酒品牌
正式版即将到来 | Android 12 Beta 5 现已发布