点燃我温暖你，表白爱心代码（低配版）

已于 2022-11-09 16:09:49 修改
阅读量240 收藏
点赞数 3
文章标签： css html 前端
于 2022-11-08 22:24:14 首次发布

058cd1ada51642929f9baa43035e8c89.jpg

<!DOCTYPE html>
<html>
 
<head>
   <meta charset="utf-8">
    <title>heart</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, red , transparent 2px), linear-gradient(45deg, red 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px);css属性允许对元素后面区域执行模糊或改变颜色等效果 */
            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, red 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, red 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,red 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, red  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, red 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, red 0px, transparent 3px);
            position: absolute;
            z-index: 300;
            top: 57px;
            left: 51px;
          
            /* 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, red 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, red 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>

这个美女有点秃
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
爱心代码点燃我温暖你电视剧同款
11-09
爱心代码电视剧同款，下载后可直接打开看到效果
点燃我温暖你python爱心代码
12-17
在“点燃我温暖你”这部剧中，李询所展示的爱心代码成为了许多观众关注的焦点，这不仅仅是因为它代表了一种浪漫的表达方式，更是一种通过技术传递情感的独特手段。接下来，我们将深入探讨如何使用Python来实现这个...
【python】点燃我，温暖你 ，快来Get同款爱心代码
Python单行客的博客
11-11 1万+
【python】点燃我，温暖你 ，快来Get同款爱心代码
《点燃我，温暖你》爱心代码复现
weixin_44648095的博客
11-08 9332
代码如下： import randomfrom math import sin, cos, pi, logfrom tkinter import *CANVAS_WIDTH = 640 # 画布的宽CANVAS_HEIGHT = 480 # 画布的高CANVAS_CENTER_X = CANVAS_WIDTH / 2 # 画布中心的X轴坐标CANVAS_CENTER_Y = CANVAS_HEIGHT / 2 # 画布中心的Y轴坐标IMAGE_ENLARGE = 11 # 放大比例HEART_CO
HTML爱心代码 | 《点燃我温暖你》中男主角——理工男李峋同款
weixin_64103049的博客
11-14 1266
HTML爱心代码 | 《点燃我温暖你》中男主角——理工男李峋同款
点燃我，温暖我爱心代码
qq_57852196的博客
11-10 340
新建一个txt文档，复制代码，保存时，名称改为xx.html
《点燃我温暖你》中李峋的同款爱心代码
11-08
python做的《点燃我温暖你》中李峋的同款爱心代码，最还原的
《点燃我温暖你》HTML爱心代码.zip
11-08
《点燃我温暖你》HTML爱心代码.zip是一个包含HTML代码的压缩包，用于创建一个具有爱心主题的网页元素。HTML（HyperText Markup Language）是构建网页的基础语言，它通过标记来描述网页的结构和内容。这个压缩包可能...
点燃我温暖你-李峋同款爱心代码
最新发布
05-17
“点燃我温暖你——李峋同款爱心代码”是一个充满创意与浪漫的项目，通过编程生成动态爱心图案，表达浓浓的爱意。该项目灵感来源于电视剧《点燃我，温暖你》中李峋的浪漫代码，旨在为用户提供一个可以输入个性化信息...
李峋爱心代码，16款爱心代码在等你嗷~
11-13
用爱心点燃我，温暖你，你还在找爱心代码嘛，来我这儿，给你看丰富多彩 的代码。 一：两姓联姻，一堂缔约，良缘永结，匹配同称。看此日桃花灼灼，宜室宜家，卜他年瓜瓞绵绵，尔昌尔炽。谨以白头之约，书向鸿笺，好将...
爱心表白（html实现，附全部源代码，可以直接运行哦！）.rar
08-03
这是一个通过前端技术实现的爱心表白的简单特效，包含全部源代码，可以直接运行，欢迎大家下载呀！
抖音超火的❤流动爱心表白(源码)
12-25
抖音超火的❤流动爱心表白(源码) 博客地址:https://blog.csdn.net/qq316148300/article/details/111691780
点燃我温暖你(李询同款动态爱心代码)
m0_69892739的博客
12-29 930
【代码】点燃我温暖你(李询同款动态爱心代码)
html爱心特效代码
热门推荐
梦游星海的博客
10-26 44万+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywor...
【爱心代码大全】——情人节表白代码送给她属于我们程序员的浪漫
超梦梦梦梦的博客
02-11 2万+
【爱心代码大全】——送给她属于我们程序员的浪漫。大多数人以为的程序员——发量少，身穿格子褂，坐在电脑前就是码字。一点也不懂浪漫！谁说我们不懂浪漫的？ 不！ 你错了 程序员一旦浪漫起来，真没其他人啥事了！！！ 谁说我们不懂浪漫的？ 不！ 你错了 程序员一旦浪漫起来，真没其他人啥事了！！！
李峋爱心代码
weixin_49796643的博客
11-08 9万+
李峋爱心代码
HTML可用于情侣表白的爱心代码~，赶紧跟着操作，让她也拥有属于你的爱心吧。
小祥编程擅长前端
11-13 1万+
html可用于情侣表白的爱心代码~，赶紧跟着操作，让她也拥有属于你的爱心吧。 最近随着电视剧《点燃我温暖你》的火热播出，剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈，爱心素材也异常火爆，我在这里整理了一份大家有需自取哦~
《点燃我，温暖你》朱韵&&李峋爱心代码
obstacle19的博客
11-08 1万+
《点燃我，温暖你》朱韵&&李峋爱心代码
点燃我温暖你爱心代码python
09-22
用Python点燃我温暖你爱心的代码可以是： ```python # 导入turtle模块 import turtle # 设置画布的大小和颜色 turtle.setup(800, 600) turtle.bgcolor("black") # 设置画笔的颜色和形状 turtle.color("red") ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值