css实现爱心照亮表白文字交互效果代码-html代码-BFW代码库

代码语言：html
所属分类：表白
代码描述：css实现爱心照亮表白文字交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        .light {
          position: absolute;
          margin: -1vmin 0 0 -1vmin;
          height: 2vmin;
          width: 2vmin;
          border-radius: 100%;
          mix-blend-mode: color-dodge;
          transition: box-shadow 2s;
        }
        .light:before, .light:after {
          position: absolute;
          bottom: 0;
          height: 150%;
          width: 100%;
          content: "";
          background: #ff1f60;
          border-radius: 2em 2em 0 0;
        }
        .light:before {
          left: 50%;
          transform: rotate(-45deg);
          transform-origin: left bottom;
        }
        .light:after {
          right: 50%;
          transform: rotate(45deg);
          transform-origin: right bottom;
        }
        h1:hover + .light {
          box-shadow: 0 0 0 12vmin rgba(255, 133, 51, 0.125), 0 0 0 10vmin rgba(88, 51, 255, 0.125), 0 0 0 66vmin rgba(65, 255, 51, 0.125), 0 0 0 29vmin rgba(255, 170, 51, 0.125), 0 0 0 82vmin rgba(255, 85, 51, 0.125), 0 0 0 121vmin rgba(51, 255, 173, 0.125), 0 0 0 140vmin rgba(78, 255, 51, 0.125), 0 0 0 43vmin rgba(51, 255, 139, 0.125), 0 0 0 22vmin rgba(51, 228, 255, 0.125), 0 0 0 42vmin rgba(255, 85, 51, 0.125), 0 0 0 96vmin rgba(51, 255, 201, 0.125), 0 0 0 92vmin rgba(51, 160, 255, 0.125), 0 0 0 108vmin rgba(99, 255, 51, 0.125), 0 0 0 130vmin rgba(51, 255, 119, 0.125), 0 0 0 9vmin rgba(255, 170, 51, 0.125), 0 0 0 40vmin rgba(75, 255, 51, 0.125), 0 0 0 87vmin rgba(255, 241, 51, 0.125), 0 0 0 37vmin rgba(255, 139, 51, 0.125), 0 0 0 54vmin rgba(51, 71, 255, 0.125), 0 0 0 113vmin rgba(51, 109, 255, 0.125);
        }
        
        h1 {
          position: absolute;
          top: 50%;
          left: 50%;
          z-index: 200;
          max-width: 10em;
          width: 100%;
          margin: 0;
          font-size: 7vmin;
          font-weight: normal;
          background: linear-gradient(45deg, #09447B 0, #8f0044 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          transform: translate(-50%, -50%);
        }
        h1::-moz-selection {
          background: #ff5284;
        }
        h1::selection {
          background: #ff5284;
        }
        h1:hover {
          background: none;
          -webkit-background-clip: initial;
          -webkit-text-fill-color: initial;
          mix-blend-mode: color-dodge;
        }
        h1 span {
          transition: color 0.3s;
        }
        h1:hover span:nth-child(1) {
          color: #e84630;
          -webkit-animation: love-1 4s 0.05s infinite;
                  animation: love-1 4s 0.05s infinite;
        }
        h1:hover span:nth-child(2) {
          color: #43e830;
          -webkit-animation: love-2 4s 0.1s infinite;
                  animation: love-2 4s 0.1s infinite;
        }
        h1:hover span:nth-child(3) {
          color: #30e864;
          -webkit-animation: love-3 4s 0.15s infinite;
                  animation: love-3 4s 0.15s infinite;
        }
        h1:hover span:nth-child(4) {
          color: #e8a530;
          -webkit-animation: love-4 4s 0.2s infinite;
                  animation: love-4 4s 0.2s infinite;
        }
        h1:hover span:nth-child(5) {
          color: #e89f30;
          -webkit-animation: love-5 4s 0.25s infinite;
                  animation: love-5 4s 0.25s infinite;
        }
        h1:hover span:nth-child(6) {
          color: #4330e8;
          -webkit-animation: love-6 4s 0.3s infinite;
                  animation: love-6 4s 0.3s infinite;
        }
        h1:hover span:nth-child(7) {
          color: #30e8c0;
          -webkit-animation: love-7 4s 0.35s infinite;
                  animation: love-7 4s 0.35s infinite;
        }
        h1:hover span:nth-child(8) {
          color: #9fe830;
          -webkit-animation: love-8 4s 0.4s infinite;
                  animation: love-8 4s 0.4s infinite;
        }
        h1:hover span:nth-child(9) {
          color: #c9e830;
          -webkit-animation: love-9 4s 0.45s infinite;
                  animation: love-9 4s 0.45s infinite;
        }
        h1:hover span:nth-child(10) {
          color: #5b30e8;
          -webkit-animation: love-10 4s 0.5s infinite;
                  animation: love-10 4s 0.5s infinite;
        }
        h1:hover span:nth-child(11) {
          color: #5230e8;
          -webkit-animation: love-11 4s 0.55s infinite;
                  animation: love-11 4s 0.55s infinite;
        }
        h1:hover span:nth-child(12) {
          color: #e8bd30;
          -webkit-animation: love-12 4s 0.6s infinite;
                  animation: love-12 4s 0.6s infinite;
        }
        h1:hover span:nth-child(13) {
          color: #30e840;
          -webkit-animation: love-13 4s 0.65s infinite;
                  animation: love-13 4s 0.65s infinite;
        }
        h1:hover span:nth-child(14) {
          color: #30c3e8;
          -webkit-animation: love-14 4s 0.7s infinite;
                  animation: love-14 4s 0.7s infinite;
        }
        h1:hover span:nth-child(15) {
          color: #30e2e8;
          -webkit-animation: love-15 4s 0.75s infinite;
                  animation: love-15 4s 0.75s infinite;
        }
        h1:hover span:nth-child(16) {
          color: #30d9e8;
          -webkit-animation: love-16 4s 0.8s infinite;
                  animation: love-16 4s 0.8s infinite;
        }
        h1:hover span:nth-child(17) {
          color: #30e8bd;
          -webkit-animation: love-17 4s 0.85s infinite;
                  animation: love-17 4s 0.85s infinite;
        }
        h1:hover span:nth-child(18) {
          color: #30e8e5;
          -webkit-animation: love-18 4s 0.9s infinite;
                  animation: love-18 4s 0.9s infinite;
        }
        h1:hover span:nth-child(19) {
          color: #e87130;
          -webkit-animation: love-19 4s 0.95s infinite;
                  animation: love-19 4s 0.95s infinite;
        }
        h1:hover span:nth-child(20) {
          color: #e85230;
          -webkit-animation: love-20 4s 1s infinite;
                  animation: love-20 4s 1s infinite;
        }
        h1:hover span:nth-child(21) {
          color: #dce830;
          -webkit-animation: love-21 4s 1.05s infinite;
                  animation: love-21 4s 1.05s infinite;
        }
        h1:hover span:nth-child(22) {
          color: #e8c330;
          -webkit-animation: love-22 4s 1.1s infinite;
                  animation: love-22 4s 1.1s infinite;
        }
        h1:hover span:nth-child(23) {
          color: #3077e8;
          -webkit-animation: love-23 4s 1.15s infinite;
                  animation: love-23 4s 1.15s infinite;
        }
        h1:hover span:nth-child(24) {
          color: #309fe8;
          -webkit-animation: love-24 4s 1.2s infinite;
                  animation: love-24 4s 1.2s infinite;
        }
        h1:hover span:nth-child(25) {
          color: #4330e8;
          -webkit-animation: love-25 4s 1.25s infinite;
                  animation: love-25 4s 1.25s infinite;
        }
        h1:hover span:nth-child(26) {
          color: #30e834;
          -webkit-animation: love-26 4s 1.3s infinite;
                  animation: love-26 4s 1.3s infinite;
        }
        h1:hover span:nth-child(27) {
          color: #e88930;
          -webkit-animation: love-27 4s 1.35s infinite;
                  animation: love-27 4s 1.35s infinite;
        }
        h1:hover span:nth-child(28) {
          color: #e8b430;
          -webkit-animation: love-28 4s 1.4s infinite;
                  animation: love-28 4s 1.4s infinite;
        }
        h1:hover span:nth-child(29) {
          color: #e8bd30;
          -webkit-animation: love-29 4s 1.45s infinite;
                  animation: love-29 4s 1.45s infinite;
        }
        h1:hover span:nth-child(30) {
          color: #30e8a8;
          -webkit-animation: love-30 4s 1.5s infinite;
                  animation: love-30 4s 1.5s infinite;
        }
        h1:hover span:nth-child(31) {
          color: #30e861;
          -webkit-animation: love-31 4s 1.55s infinite;
                  animation: love-31 4s 1.55s infinite;
        }
        h1:hover span:nth-child(32) {
          color: #e84630;
          -webkit-animation: love-32 4s 1.6s infinite;
                  animation: love-32 4s 1.6s infinite;
        }
        h1:hover span:nth-child(33) {
          color: #30e8c0;
          -webkit-animation: love-33 4s 1.65s infinite;
                  animation: love-33 4s 1.65s infinite;
        }
        h1:hover span:nth-child(34) {
          color: #e8d930;
          -webkit-animation: love-34 4s 1.7s infinite;
                  animation: love-34 4s 1.7s infinite;
        }
        h1:hover span:nth-child(35) {
          color: #30e8c3;
          -webkit-animation: love-35 4s 1.75s infinite;
                  animation: love-35 4s 1.75s infinite;
        }
        h1:hover span:nth-chi.........完整代码请登录后点击上方下载按钮下载查看