故事开始
午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。
我在旁边笑开了花~~~
诶呀,口水流出来了。
嗯,只是我脑补的画面,哈哈。
我想最终效果是这样的(猜猜多少个爱心):
然后开始动手吧~
学啥本领
本文将带大家学习两个好东西:
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>
小爱心出来了:
2. 画一大堆爱心
现在删除到之前的 SVG 标签