爱心代码

南锋

发布于 2023-10-15 14:07:09

2520

发布于 2023-10-15 14:07:09

文章被收录于专栏：淡忘的博客淡忘的博客

效果图

演示链接

引用站外地址

爱心代码演示

https://lengmo714.top/libs/love.html

代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>love</title>
    <style>
        body {
            height: 100vh;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .loveMargin {
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            position: relative;
            animation: scaleDraw 3s infinite;
            -webkit-animation: scaleDraw 3s infinite;
        }
 
        .loveMargin::after {
            content: '';
            position: absolute;
            left: 0px;
            top: -142px;
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .loveMargin::before {
            content: '';
            position: absolute;
            left: -137px;
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .a1 {
            transform: scale(1.2);
        }
 
        .a2 {
            transform: scale(0.9);
            position: absolute;
            top: 4px;
        }
 
        .a2 {
            transform: scale(0.9);
            position: absolute;
            top: -6px;
            left: -6px;
        }
 
        .a4 {
            transform: scale(0.5);
            position: absolute;
            top: -10px;
            left: -10px;
        }
 
        .a5 {
            transform: scale(0.9);
            position: absolute;
            top: 10px;
            left: -10px;
        }
 
        .a6 {
            transform: scale(0.9);
            position: absolute;
            top: 6px;
            left: -10px;
        }
 
        .loveContent {
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            width: 250px;
            height: 250px;
            background-size: 10px 10px;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 200;
            /* animation: scaleDraw 2s infinite;
            -webkit-animation: scaleDraw 2s infinite; */
        }
 
        .loveContent::after {
            content: '';
            position: absolute;
            left: 0px;
            top: -142px;
            width: 250px;
            height: 250px;
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
            z-index: 200;
        }
 
        .loveContent::before {
            content: '';
            position: absolute;
            left: -137px;
            width: 250px;
            height: 250px;
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
            z-index: 200;
        }
 
        .c1 {
            z-index: 200;
            top: 22px;
            left: 22px;
        }
 
        .c2 {
            z-index: 210;
            top: 23px;
            left: 23px;
        }
 
        .c3 {
            z-index: 205;
            top: 25px;
            left: 25px;
        }
 
        .c4 {
            z-index: 280;
            top: 21px;
            left: 20px;
        }
 
        .c5 {
            z-index: 206;
            top: 20px;
            left: 18px;
        }
 
        .c6 {
            z-index: 220;
            top: 18px;
            left: 20px;
        }
 
        .c7 {
            z-index: 211;
            top: 19px;
            left: 19px;
        }
 
        .c8 {
            z-index: 221;
            top: 23px;
            left: 20px;
        }
 
        .loveItem {
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            position: absolute;
            z-index: 300;
            top: 57px;
            left: 51px;
            /* #c55473 */
            /* background: #983647; */
            background-size: 10px 10px;
            animation: scaleDraw 2s infinite;
            -webkit-animation: scaleDraw 2s infinite;
        }
 
        .loveItem::after {
            content: '';
            position: absolute;
            z-index: 300;
            left: 0px;
            top: -142px;
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .loveItem::before {
            content: '';
            position: absolute;
            z-index: 300;
            left: -137px;
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        @keyframes scaleDraw {
            /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
 
            0% {
                transform: scale(1);
                /*开始为原始大小*/
            }
 
            50% {
                transform: scale(1.1);
                /*放大1.1倍*/
            }
 
            100% {
                transform: scale(1);
                /*开始为原始大小*/
            }
        }
 
        .i1{
            top: 57px;
            left: 51px;
        }
        .i2{
            top: 51px;
            left: 57px;
        }
        .i3{
            top: 50px;
            left: 52px;
        }
        .i4{
            top: 60px;
            left: 60px;
        }
        .i5{
            top: 58px;
            left: 51px;
        }
        .i6{
            top: 58px;
            left: 52px;
        }
        .i7{
            top: 62px;
            left: 60px;
        }
        .i8{
            top: 68px;
            left: 61px;
        }
    </style>
</head>
 
<body>
    <div style="transform: rotate(45deg);">
        <div class="loveMargin a1">
            <div class="loveMargin  a2"></div>
            <div class="loveMargin  a3"></div>
            <div class="loveMargin  a4"></div>
            <div class="loveMargin  a5"></div>
            <div class="loveMargin  a6"></div>
            <div class="loveContent c1"></div>
            <div class="loveContent c2"></div>
            <div class="loveContent c3"></div>
            <div class="loveContent c4"></div>
            <div class="loveContent c5"></div>
            <div class="loveContent c6"></div>
            <div class="loveContent c7"></div>
            <div class="loveContent c8"></div>
            <div class="loveContent c9"></div>
            <div class="loveItem i1"></div>
            <div class="loveItem i2"></div>
            <div class="loveItem i3"></div>
            <div class="loveItem i4"></div>
            <div class="loveItem i5"></div>
            <div class="loveItem i6"></div>
            <div class="loveItem i7"></div>
            <div class="loveItem i8"></div>
        </div>
    </div>
 
</body>
 
</html>