js的浪漫，教你表白

最新推荐文章于 2024-05-23 20:07:53 发布

小鬼难缠

最新推荐文章于 2024-05-23 20:07:53 发布

阅读量1.2w

点赞数 14

本文链接：https://blog.csdn.net/zjscy666/article/details/90752888

版权

小编昨天看到一新郎（程序员）在迎亲过程中，被新娘等人要求用代码（至少20行）表达爱意，看着新郎写的满头大汗，小编想着大家是不是也会遇到这情况，于是小编决定造福大家！

因为网页转gif很麻烦，小编这里就不转了，大致说下，网页上的效果是有爱心，上面有文字520，有不断飞来飞去的气球，具体大家可以下载下来看看！

<!DOCTYPE html>
<html lang="en">

<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 class="heartBox">
        <div class="myHeart">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <p>520</p>
        </div>
    </div>
    <div class="balloonBox"></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>

大家拿着上面的代码，赶紧向暗恋的对象表白吧，如果成功了，别忘了送小编喜糖，哈哈哈！

小鬼难缠

关注

14
点赞
踩
51

收藏

觉得还不错? 一键收藏
7
评论
js的浪漫，教你表白

小编昨天看到一新郎（程序员）在迎亲过程中，被新娘等人要求用代码（至少20行）表达爱意，看着新郎写的满头大汗，小编想着大家是不是也会遇到这情况，于是小编决定造福大家！因为网页转gif很麻烦，小编这里就不转了，大致说下，网页上的效果是有爱心，上面有文字520，有不断飞来飞去的气球，具体大家可以下载下来看看！ <!DOCTYPE html&...
复制链接

扫一扫