jquery实现心形布局

最新推荐文章于 2021-08-21 23:06:21 发布

hxf6060

最新推荐文章于 2021-08-21 23:06:21 发布

阅读量442

点赞数

文章标签：心形布局 jquery css3

本文链接：https://blog.csdn.net/hxf6060/article/details/97926379

版权

马上就到七夕啦，猿们准备好对心仪的他/她表白了吗？下面送上程序员的浪漫--jquery实现的心形布局，还会呼吸哦！

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>七夕心形</title>
    <style>
    .heart {
        position: absolute;
        top: 20%;
        left: 30%;
        width: 30px;
        height: 30px;
        background: linear-gradient(#f99, #fcf);
        border-radius: 50%;
        animation: breath 3s infinite;
    }
    @-webkit-keyframes breath{
        0%{
            width: 30px;
            height: 30px;
        }
        50%{
            width: 35px;
            height: 35px;
        }
        100%{
            width: 30px;
            height: 30px;
        }
    }
    </style>
</head>

<body>
    <!-- <div class="heart"></div> -->
    <script>
    for (let i = 0; i < 100; i++) {
        var step = i / 100 * (Math.PI * 2); //把整个圆分成100份
        var vector = {
            x: 200 + 14 * (16 * Math.pow(Math.sin(step), 3)),
            y: 100 - 14 * (13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 *
                step))
        }
        var div = ' <div class="heart" style="transform: matrix(1,0,0,1,' + vector.x + ', ' + vector.y + ');"></div>';
        $('body').append(div);
    }
    </script>
</body>

</html>

效果：

hxf6060

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现心形布局

马上就到七夕啦，猿们准备好对心仪的他/她表白了吗？下面送上程序员的浪漫--jquery实现的心形布局，还会呼吸哦！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
复制链接

扫一扫