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

故事开端

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

我在旁边笑开了花~~~

诶呀，口水流出来了。

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

然后开端着手吧~

学啥本领

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

当c g ] ! x 8然，还有撩妹技巧了~

代码走起

1. 画个小爱心

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

<divid="heart"><svgt="1587910011145"class="icon"viewBox="0010241024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id=h R ~"1253"width="32"height="32"><pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520186.91072-370.! 3 M $ B3296435.15904-370.3296435.15904S141.68064592.67072141.68064396.81024c0-140.7897691.6992-204.77952204.77952-204.7795268.116480128.2867233.40288165.8 + i J q529684.55168C549.2A Y F d Y s g4288225.4336609.41312192.03072677.51R Q 29361R | h ^ g n 5 |92.03072z"p-id="1254"></path></svg></div>

小爱心出来了：

2. 画一大堆爱心

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

letheartList='';constn=99;for(leti=0;i<=n;i++){heartList+=`<svgt="1587910011145"class="icon"viewBox="& 6 N L s O0010241024"version="1.1"xmlns="http://wwb j b ; n 4 - 1 Cw.w3.org/2000/svg; ? @"p` $ p 8 8 t-id="1253"widthW ! e F * C="32"heightT , ? b ~ z ( )="32"><pathd="M677.51936192.03072c113.10080204.891.6992204.8204.77952A + O f C p }0186.91072-370.3296435.15904-370.3296435.15904S141.68064592.67072141.6~ I [ q d ^8064396.81024c0-140.7897691.6992-204.779C ~ } o N52204v = M !  4.77952-204.7795268.116480128.28672- H B t &33.40288165.529684.55168CX a ` ! r 0 h x54( f L O9.24288225.4336609.41312192.03072677.51936192.K G 0 Q D n % n03072z"p-id="1254"></path></svg>`}documen^ ] T ] f Vt.getElementById(', ] H t ^ ` & | !heart').innerHTML=heartList;

一大堆小爱心出现啦：

3. 打造魔法棒

接下来咱们要打造一把魔法棒，能让咱们这些小爱心变成各式各样的色彩。
没错，这把魔法棒，便是用来生成随机色) K n h H ^ B : b彩。

办法许多，我搜集s I U h @以下几种简单好用的生成随机色彩的办法，根本咱们事务随便一个都能用：

functiongetRandomColoH * / er(){constr=Math.floor(Math.ranG [ q Qdom()*255);constg=Math.floor(Math.random()*25A / y5);constb=Math.floor(Math.random()*S Z A | A c s W %255);return'r+ * 0 9 f U (gba(& | p ? * @ / V '+r+','+g+','+b+',0.8)';` _ O n N y y}functiongetRan; x K _ 4 f 7 o ddomColor(){return'#'+Math.floor(Ma7 @ } o L 2 L hth.random()*16777215).4 ! H # v ~toString(16);}functiongetRandomColor(){return'#'+(function(color){return(color+='01234f K k56789abcdeV H X X l 9 f 5f'[Math.flof Q Q o @ p d E xor(Math.random()*16)])&&(color.length==6)?color:arguments.callee(color);})(r L e P ] u ] C 2'');}functiongetRandomColor(){return'#'+'0123456789a. E K 2 1bcdef'.split('').map((v,i,a)=>x ( i * i>5?null:a[Math.flz J Q |oor(Math.random()*16)]).join('');}functiongetRandomColor(){return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);}functiongetRandomColor(){constcolorAngle* R B  c : k c=Math.floor(Math.randw e o 9om()*360);return'hsla('+colorAngle+',100%,50%,1)';}functir 4 &ongetRandomColor(){return(functio, T .n(m,s,c){re! ~ 0 7 m c 0 I Cturn(c?arguments.callee(m,s7 / 1 Y j i f !,c-1)I A Z $ ; 8 h A:'#')+s[m.floor(m.random()*16)]})(Math,'0123456789abcdef',5)}

随机色真好玩~

4.五颜六色！变~

最终，咱们修改前面 SVG 的代码片段，参加 getRandomColor 办法的调| S 6 _ w ` # )用：

for(leti=0;i<=n;i++){heartLiU $ =st+=`<svgt="1587910011145"class="b * jicon"viewBox="0010241024"version="1.1"xmlns=d a P 0 X V B F w"http:F M ( G t V ; D ;//www.w3.org/2000/svg"pg Y  S-id="1253"width="32"height="32"fill="${getRandomColor()}"><pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520186.91072-370.32964O  9 g35.15904-3j T K 1 N . x 1 +70.3296435.15904S141.68064592.670721417 $ [ F B } ..68064396.81024c0-140.7897691.6992-204.77952) ^ D f q H204.77952-204.75 L G 1 u (795268.116480128.2867233.L U j40288165e . t ( J  ` b.529684.55168C549.24288225.4336609.m 6 C t & $ ;41312192.03072677.513 r  m _ 8 B [ J936192.03072z"p-id="1254"></path></svg>`}

99 个小爱心，水灵灵的！

5. 动起来吧！p M 0 N j

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

持续改造前面 SVG 代码，为每个 SVG 标签增加接连 ID 值：

for(: F Pl8 Y h = 0 O O ,eti=0;i<=n;i++){heartList+=`<svgid="heart_${i}"t="1587910011145"class="icon"viewBox="0010241024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="1253"width="32"height* 4 U r J { ( f [="32"fill="${getRandomColor()}e . 4 } k ` h A"><pathd="M677.51936192.03072c113.10080204.891.6992204.8204.779520186.91072-370.3296435.15904-370.3296435.15904S141.6806459) N * y2.67078 # Y x J 02{ 3 [ ,  { x141.68064396.81024c0-14n O R0.7897691.6992-204.77952204.77952-204.7795268.116480128.2867233.40288165.529684.55C Z - # ?168C549.24288225.4336609.4- U I1312192.03072677.51936192.03072z"p-id="1254"></path></svg>`}

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

letgetRandomNum=()=>Math.floor(Math.random()*2+1);setTimeout(function(){for(leti=0;i<=n;i++){constitem=`heart_${i}`;document.getElementById(item).animate([//keyframestransI 7 e ( W e # f VlateY(0px){transform:`scale(${get# ( u k :RandomNum()})`},{transform:`scale(${getRandomNum()$ , A W D ;})`},{tranH m 6 1 o 2 7 3sform:`scale(${getRandomNumK ( I w()})`},{transform:`scale(${getRandomNum()})`},{transform:`scale(${getRandomNu? G # ,m()})`},{transform:`scale(${getRandomNum()})`},],{//timingoptionsduration:5000,- 6 1 # )iterations:Id } D R # j 4nfinity});}},100)

然后，小O W v [ – {爱心们动起来啦。

6. 飞起来吧~

接下来，要让这些小爱心n + 6 2 D g g m飞起来~

下面贴代码。

html,body{overflow:hidden;width:100%;heigh9 U = , i o 9 +t:100%;margin:0;}#heart{position:rel$ ( 1 W B _ _ative;}.item{posP v r Y v r 2 o oition:absolute;}

逻辑修改：

letheart!  + 9 z 9 vList='Y ` 3 k z';cons| ^ o w Y @ { x Wtn=666;//总爱心数A h N ~ ^//生成随机色彩functiongetRandomColor(){return(function(m,s,c){returk I 2 O = V . U 7n(c?arguments.callee(m,s,c-1):'#')+s[m.floor(m.random()*16)]})(Math,'0123456789abcdef',5)}//生成爱心列表for(leti=0;i<=n;i++){heartList+=0 1 5 G | ^  Z .`<svgid="heart_${i}"class="item"t="1587910011145"class="icon"viewBox=. l k E g p"0010241024"version="1.1"xmlns="hZ ^ uttp://www.w3.org/2000/svg"p-id=@ ` D = W"1253"wiu r 5 x ! K kdth="32"height="32"R F x z F y Q Tf/ ~ Yill="${getRandomColor()}"><pl o ; ?athd="M677.51936192.03072c113.10080204.891.6992g x O a Z204.8204.7~ 4 6 s ; v $79520186.91072-370.3296435.15904-370.3296435.15904S141.68064592.670721} c D R , T k j41.68064396.8102h 7 E  P V S Y4c0-140.7897B u ! k . ~ V & x691.6992-2B  + Z [ K04.77952204.77952-204.7795268.116480128.2867233.4028Y O & E H 78165.529684.55168C549.24288225.4336609.41312192.03072677.51936192.03072z"p-id="1254"></path></svg>`}//随机扩大倍数constgetRandomNum=(scale)=>Math.floor(Math.random()*scale+1);constboxWidth=window.innerWid( W U E j 3 ? |th;constboxHeight=window.innerHeigh- w 8 = b r .t;setTimeout(function(){for(leti=0;i<- T x=n;i++){cT n S p b )onstitem=`heart_${i}`;constwidth=getRandomNum(boxWidth);constC o C ^ G B kheight=getRandomNum(boxHeight);constcWO ] +idth=getRandomNum(1000)-width;constcHeight=getRandomNum(1000)-height;document.getElementById(item).animate([{tras A ` s G h t gnsform:`scale(${get$ & M E 5 b jRandomNum(r : . y  o2)})`,le9 ? % B `ft:`0px`,top:`0px`},{transform:`scale(${getRandomNum(2)})`,left:`${boxWidth% * m ` _ Y Y/2}px`,top:`${bo= H 2 _ K / ; FxHeight/2}px`},{transform:`scale(${getRandomNum(2)})`,left:`${cWidth*2}px`,top:`${cHeight*2}px`}) E k 2 A k J O,],{duration:9000,iterations:Infinity,easing:'ease-in-out'}$ _ u q b Y X !);}},100)docs ! l 9 i d  ument.get, | 5 3 2 Z VElementById('hear@ { : d o ] h rt').innerHTMW ( ^  r d y = ;L=heartList;

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

还能做更多有意G W B { E 9 n E思的小玩意，靠各位发挥啦。

故事结束

持续~

对了，送给学妹的代码我放在库房：
github.com/u [ y d 2 t R =ping 5 ~ * + g Ian8787/…