-CSS+JS送满满满满的小红心的学妹在屏幕上
时间：2023-03-30 14:54:56
CSS
故事从午饭时间开始，暗恋我许久的学妹拉着我的袖子：“学长学长，你能不能这些心五颜六色~”。我在旁边哈哈大笑~~~哎，口水都流出来了。我觉得最后的效果是这样的（猜猜有多少颗心）：那我们开始吧~要学什么技巧本文将带你学习两个好东西：1.生成随机颜色的方法；2.Element.animate()方法。当然，还有撩妹的技巧~代码走一走1.画一颗小心如何画一颗心不是我们文章的重点，所以，先从SVG说起：
2.小红心抽签出来了：以前的SVG标签并用动态替换它“图标”viewBox=“0010241024”版本=“1.1”xmlns="http://www.w3.org/2000/svg"p-id="1253"width="32"height="32">
`}document.getElementById('heart').innerHTML=heartList;出现很多小爱心：3.制作魔法棒接下来，我们要制作一个魔法棒，可以让我们的小爱心变成各种颜色。是的，这根魔杖是用来生成随机颜色的。有很多方法。我收集了以下简单易用的随机颜色生成方法。基本上我们的任何一项业务都可以使用：functiongetRandomColor(){constr=Math.floor(Math.random()*255);constg=Math.floor(Math.random()*255);constb=Math.floor(Math.random()*255);返回'??rgba('+r+','+g+','+b+',0.8)';}functiongetRandomColor(){返回'#'+Math.floor(Math.random()*16777215)。toString(16);}functiongetRandomColor(){return'#'+(function(color){return(color+='0123456789abcdef'[Math.floor(Math.random()*16)])&&(color.length==6)?color:arguments.callee(color);})('');}functiongetRandomColor(){return'#'+'0123456789abcdef'.split('').map((v,i,a)=>i>5?null:a[Math.floor(Math.random()*16)]).join('');}functiongetRandomColor(){return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);}functiongetRandomColor(){constcolorAngle=Math.floor(Math.random()*360);返回'??hsla('+colorAngle+',100%,50%,1)';}functiongetRandomColor(){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(leti=0;i<=n;i++){heartList+=``}99颗小爱心，水汪汪的！5.行动起来！此时，每一颗爱心都静静地躺在页面上，是时候让它们动起来了，看在学妹的份上~继续修改之前的SVG代码，为每个SVG标签添加一个连续的ID值：for(让i=0;i<=n;i++){heartList+=``}生命随机放大，并设置动画效果：letgetRandomNum=()=>Math.floor(Math.random()*2+1);setTimeout(函数(){for(leti=0;i<=n;i++){constitem=`heart_${i}`;document.getElementById(item).animate([//关键帧translateY(0px){transform:`scale(${getRandomNum()})`},{transform:`scale(${getRandomNum()})`},{转换：`scale(${getRandomNum()})`}，{转换：`scale(${getRandomNum()})`}，{转换：`scale(${getRandomNum()})`}，{转换：`scale(${getRandomNum()})`},],{//计时选项duration:5000,iterations:Infinity});}},100)那么，小心脏们动起来了6.放飞吧~接下来，让这些小心脏飞起来吧~下面贴上代码。html,body{溢出：隐藏；宽度：100%；高度：100%；margin:0;}#heart{position:relative;}.item{position:absolute;}逻辑修改：letheartList='';常量n=666;//totalhearts//生成随机颜色functiongetRandomColor(){return(function(m,s,c){return(c?arguments.callee(m,s,c-1):'#')+s[m.floor(m.random()*16)]})(Math,'0123456789abcdef',5)}//生成心脏列表for(leti=0;i<=n;i++){heartList+=`
