爱心代码-HTML

编程基础 • 2025-03-24 15:40 • 阅读 16

效果图：
代码生成的是动态的，跳动的心
可复制直接用
在这里插入图片描述

<!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="Keywords" content="" />
    <meta name="Description" content="" />
    <style> html, body { 
      height: 100%; padding: 0; margin: 0; background: #000; } canvas { 
      position: absolute; width: 100%; height: 100%; } .a { 
      width: 100px; height: 100px; position: absolute; left: 40%; top: 25%; } h3 { 
      font-family: "fangsong"; font-size: 6em; color: transparent; } span { 
      display: table-cell; animation: san 3s linear infinite; } h3 span:nth-child(1) { 
      animation-delay: 0s; } h3 span:nth-child(2) { 
      animation-delay: 0.1s; } h3 span:nth-child(3) { 
      animation-delay: 0.2s; } h3 span:nth-child(4) { 
      animation-delay: 0.3s; } h3 span:nth-child(5) { 
      animation-delay: 0.4s; } h3 span:nth-child(6) { 
      animation-delay: 0.5s; } h3 span:nth-child(7) { 
      animation-delay: 0.6s; } h3 span:nth-child(8) { 
      animation-delay: 0.7s; } h3 span:nth-child(9) { 
      animation-delay: 0.8s; } h3 span:nth-child(10) { 
      animation-delay: 0.9s; } @keyframes san { 
      0%, 100% { 
      color: rgb(255, 255, 255); text-shadow: 0 0 5px rgb(234, 128, 176), 0 0 15px rgb(234, 128, 176), 0 0 25px rgb(234, 128, 176), 0 0 50px rgb(234, 128, 176), 0 0 80px rgb(234, 128, 176), 0 0 120px rgb(234, 128, 176), 0 0 160px rgb(234, 128, 176), 0 0 200px rgb(234, 128, 176), 0 0 300px rgb(234, 128, 176), 0 0 400px rgb(234, 128, 176), 0 0 500px rgb(234, 128, 176); } 20%, 80% { 
      color: transparent; text-shadow: none; } } </style>
  </head>

  <body>
    <div class="a">
      <h3>

爱心代码-HTML

相关推荐