表白/生日浪漫樱花HTML礼物

附文    

          本附文与博客正文略无关系，没有兴趣的各位小姐先生可绕过。由于鄙人即将进入考研择校的时间，所以无论是QQ群还是CSDN还是GITHUB与各位交流的时间将会越来越少，还请各位见谅。也请各位不要再私聊我寻要源码，不要问我怎么改了，实在是没有很多闲余时间，有学术问题可以加入我们的群去询问。源码下载地址就在博客上方。

        下载地址：https://download.csdn.net/download/weixin_43341045/12333193

        代码效果展示：https://www.bilibili.com/video/BV1TV411Z7aC

        没有积分的朋友可以去我的B站相应的视频下方找到百度云链接（QwQ要是可以点赞、投币、收藏、关注下最好啦，谢谢）

        诚邀各校各地有志之士加入我们大学生IT学习群交流：871352155（请各位广告大佬高抬贵手，常讨论学习无关的朋友请出门右拐∑(っ°Д°;)っ）

前言

      本组合代码是由五个网页循循嵌套组成，形成“画中画”的效果。

B站上有本作品详细的作品展示效果，若是觉得还行，不妨关注三连，谢谢。本人B站详情请见： https://www.bilibili.com/video/BV1TV411Z7aC在视频下方的评论里面有下载源码地址。

本人相似作品链接：七夕节的浪漫WEB礼物（修改一下也可以作生日礼物）：   https://blog.csdn.net/weixin_43341045/article/details/98533156

情人节的浪漫WEB礼物（修改一下也可以作生日礼物）https://blog.csdn.net/weixin_43341045/article/details/104291776

我的B站用户

         更多有趣的HTML礼物详情请看我的B站合集https://www.bilibili.com/video/BV1x7411Y7k7

          大学生代码学习群交流：871352155（无论你会C/C++还是Java，Python还是PHP......有兴趣我们都欢迎你的加入，不过不过还请各位认真回答加群信息）(◍°∇°◍)ﾉﾞ

5个页面皆为动态，配合喵老师的萌系演出QwQ，废话不多说，直接展示。

第一页

 

第二页

         里面的几何小花朵是可以随鼠标点击而增多的。

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

#svg {
  position: fixed;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

polygon {
  stroke: #fff;
  stroke-width: 1;
}

.flower {
  animation-name: animation;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

@keyframes animation {
  0% {
    opacity: 0;
    transform: scale(0.1, 0.1) rotateZ(0);
  }

  100% {
    opacity: 1;
    transform: scale(1, 1) rotateZ(360deg);
  }
}

 

第三页

 

第四页

 

 END