JavaScript的浪漫，520一生一世！！

亚当表白夏娃，打开了上帝都不知道的魅力后花园。罗密欧表白朱丽叶，懂得了爱情比任何事情都值得。你曾经表白过吗？2020这个七夕情人节，当爱已经无法放进礼物盒的时候，我们为你准备了唯美表白代码，把说不出口的话，从这里寄出一封情“抒”！

首先来看看效果：

代码如下，复制即可使用：

前端交流学习裙：851 231 348
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浪漫的表白</title><style type="text/css">* {margin: 0;padding: 0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6 {margin: 0;}a {text-decoration: none;color: inherit;}img {display: block;border: none;}ol,ul {list-style: none;}.clearfix:after {content: "";display: block;clear: both;}.fl {float: left;}.fr {float: right;}body,html {width: 100%;height: 100%;overflow: hidden;background: -webkit-radial-gradient(center, #0dd8d8, rgb(46, 8, 88));}.heartBox {position: absolute;width: 300px;height: 300px;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}.myHeart {width: 100%;height: 100%;position: relative;transform: rotate(45deg);animation: heartMove 10s infinite alternate;z-index: 10;}.myHeart div {position: absolute;width: 200px;height: 200px;background: rgb(255, 0, 200);}.myHeart .two {right: 0;bottom: 0;width: 200px;height: 200px;}.myHeart .one {left: 0;bottom: 0;border-radius: 50%;}.myHeart .three {top: 0;right: 0;border-radius: 50%;}.myHeart p {width: 200px;height: 30px;font: bold 25px/30px "";text-align: center;}.myHeart p {position: absolute;right: 0;bottom: 85px;transform: rotate(-45deg);}.balloonBox {width: 100%;height: 100%;}.balloon {position: absolute;border-radius: 50%;text-align: center;}.balloon:after {content: '';position: absolute;background: rgba(189, 207, 21, 0.96);height: 80px;width: 2px;left: 0;right: 0;bottom: -80px;margin: auto;}@-webkit-keyframes heartMove {10% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;opacity: 0.2;color: rgb(122, 196, 26);}20% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}30% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}40% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}50% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}60% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 5px #fff;}70% {transform: rotate(45deg) scale(1.3);text-shadow: 0 0 5px #fff;}80% {transform: rotate(45deg) scale(1.2);text-shadow: 0 0 10px #fff;}90% {transform: rotate(45deg) scale(1.1);text-shadow: 0 0 5px #fff;opacity: 1;color: rgb(219, 190, 25);}}</style>
</head><body><div><div><div></div><div></div><div></div><p>520</p></div></div><div></div><script>function color(self) {var _color = randomMyColor();if (_color == self.bg) {color(self);} else {return _color;}}function MyBalloon() {this.div = document.createElement("div");this.left = randomRange(0, 100);this.top = randomRange(0, 50);this.bg = randomMyColor();this.color = color(this);this.r = Math.random() * 40 + 20;this.speedX = randomRange(-5, 5);this.speedY = randomRange(-5, 5);}MyBalloon.prototype.draw = function (parent) {this.parent = parent;var _div = this.div;var style = _div.style;style.width = this.r * 2 + "px";style.height = this.r * 2 + "px";_div.className = 'balloon';_div.innerHTML = '1314';style.lineHeight = this.r * 2 + "px";style.fontSize = this.r / 2 + "px";style.left = this.left + "px";style.top = this.top + "px";style.background = this.bg;style.color = this.color;parent.appendChild(this.div);}MyBalloon.prototype.move = function () {var maxLeft = this.parent.offsetWidth - this.r * 2;var maxTop = this.parent.offsetHeight - this.r * 2;var self = this;var _div = self.div;setInterval(function () {var left = _div.offsetLeft + self.speedX;var top = _div.offsetTop + self.speedY;if (left <= 0) {left = 0;self.speedX *= -1;}if (top <= 0) {top = 0;self.speedY *= -1;}if (left >= maxLeft) {left = maxLeft;self.speedX *= -1;}if (top >= maxTop) {top = maxTop;self.speedY *= -1;}_div.style.left = left + "px";_div.style.top = top + "px";}, 30);}function randomRange(min, max) {return Math.random() * (max - min) + min;}function randomMyColor() {var r = randomRange(0, 255);var g = randomRange(0, 255);var b = randomRange(0, 255);var a = randomRange(0, 1);return "rgba(" + r + "," + g + "," + b + "," + a + ")";}function draw() {var n = 1;for (var i = 0; i <= 36; i++) {var b = new MyBalloon();b.draw(document.body.getElementsByClassName('balloonBox')[0]);b.move();}}draw();</script>
</body></html>

JavaScript的浪漫，520一生一世！！相关推荐

HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享 ...
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
专属程序员的浪漫520情人节送女朋友的生日祝福樱花雨3D相册
Python浪漫520表白代码
目录前言表白界面跳动的爱心漂浮的爱心满屏表白代码前言 520是每年的5月20日,因数字"520"与"我爱你"发音相似而被许多年轻人用作表达爱意的节日 ...
HTML+CSS+JavaScript制作浪漫烟花告白(程序员撩妹手到擒来~)
❉ 助力程序员撩妹手到擒来 html+css+js烟花表白(含音乐)可自定义编辑文字一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给女朋友或者正在 ...
送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)520情人节/七夕情人节/程序员表白...
❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 520七夕情人节告白网页代码❀-浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端大气上档次的D立体动 ...
html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备
❉ html+css+javascript雪花爱心520表白网站 (含音乐)程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 程序员浪漫起来真 ...
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript) 520七夕节告白,也就是中国的情人节,你除了送花你还会什么?? 快来制作高端 ...
html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备...
❉ html+css+javascript雪花爱心520表白网站 (含音乐)程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白, 程序员浪漫起来真 ...

JavaScript的浪漫，520一生一世！！

JavaScript的浪漫，520一生一世！！相关推荐

最新文章

热门文章