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

代码语言:html

所属分类:表白

代码描述:css实现爱心照亮表白文字交互效果代码

代码标签: 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-child(36) {
          color: #55e830;
          -webkit-animation: love-36 4s 1.8s infinite;
                  animation: love-36 4s 1.8s infinite;
        }
        h1:hover span:nth-child(37) {
          color: #30e5e8;
          -webkit-animation: love-37 4s 1.85s infinite;
                  animation: love-37 4s 1.85s infinite;
        }
        h1:hover span:nth-child(38) {
          color: #30e889;
          -webkit-animation: love-38 4s 1.9s infinite;
                  animation: love-38 4s 1.9s infinite;
        }
        
        h1 span::-moz-selection {
          background: #ff5284;
          color: #fff;
          -webkit-text-fill-color: #fff;
        }
        
        h1 span::selection {
          background: #ff5284;
          color: #fff;
          -webkit-text-fill-color: #fff;
        }
        
        @-webkit-keyframes love-1 {
          10% {
            color: #3034e8;
          }
          20% {
            color: #304fe8;
          }
          30% {
            color: #6ee830;
          }
          40% {
            color: #3086e8;
          }
          50% {
            color: #3de830;
          }
          60% {
            color: #b1e830;
          }
          70% {
            color: #30e8e5;
          }
          80% {
            color: #305ee8;
          }
          90% {
            color: #8ce830;
          }
        }
        
        @keyframes love-1 {
          10% {
            color: #3034e8;
          }
          20% {
            color: #304fe8;
          }
          30% {
            color: #6ee830;
          }
          40% {
            color: #3086e8;
          }
          50% {
            color: #3de830;
          }
          60% {
            color: #b1e830;
          }
          70% {
            color: #30e8e5;
          }
          80% {
            color: #305ee8;
          }
          90% {
            color: #8ce830;
          }
        }
        @-webkit-keyframes love-2 {
          10% {
            color: #e88c30;
          }
          20% {
            color: #30c0e8;
          }
          30% {
            color: #3095e8;
          }
          40% {
            color: #5230e8;
          }
          50% {
            color: #30d9e8;
          }
          60% {
            color: #e8ab30;
          }
          70% {
            color: #e8b130;
          }
          80% {
            color: #30c0e8;
          }
          90% {
            color: #30e8b7;
          }
        }
        @keyframes love-2 {
          10% {
            color: #e88c30;
          }
          20% {
            color: #30c0e8;
          }
          30% {
            color: #3095e8;
          }
          40% {
            color: #5230e8;
          }
          50% {
            color: #30d9e8;
          }
          60% {
            color: #e8ab30;
          }
          70% {
            color: #e8b130;
          }
          80% {
            color: #30c0e8;
          }
          90% {
            color: #30e8b7;
          }
        }
        @-webkit-keyframes love-3 {
          10% {
            color: #30b1e8;
          }
          20% {
            color: #d3e830;
          }
          30% {
            color: #e84c30;
          }
          40% {
            color: #3049e8;
          }
          50% {
            color: #a5e830;
          }
          60% {
            color: #e86b30;
          }
          70% {
            color: #a8e830;
          }
          80% {
            color: #30aee8;
          }
          90% {
            color: #e8b430;
          }
        }
        @keyframes love-3 {
          10% {
            color: #30b1e8;
          }
          20% {
            color: #d3e830;
          }
          30% {
            color: #e84c30;
          }
          40% {
            color: #3049e8;
          }
          50% {
            color: #a5e830;
          }
          60% {
            color: #e86b30;
          }
          70% {
            color: #a8e830;
          }
          80% {
            color: #30aee8;
          }
          90% {
            color: #e8b430;
          }
        }
        @-webkit-keyframes love-4 {
          10% {
            color: #30e834;
          }
          20% {
            color: #e83430;
          }
          30% {
            color: #9ce830;
          }
          40% {
            color: #30e8d3;
          }
          50% {
            color: #5be830;
          }
          60% {
            color: #b7e830;
          }
          70% {
            color: #b7e830;
          }
          80% {
            color: #303de8;
          }
          90% {
            color: #306ee8;
          }
        }
        @keyframes love-4 {
          10% {
            color: #30e834;
          }
          20% {
            color: #e83430;
          }
          30% {
            color: #9ce830;
          }
          40% {
            color: #30e8d3;
          }
          50% {
            color: #5be830;
          }
          60% {
            color: #b7e830;
          }
          70% {
            color: #b7e830;
          }
          80% {
            color: #303de8;
          }
          90% {
            color: #306ee8;
          }
        }
        @-webkit-keyframes love-5 {
          10% {
            color: #305ee8;
          }
          20% {
            color: #3092e8;
          }
          30% {
            color: #30e8dc;
          }
          40% {
            color: #e8ae30;
          }
          50% {
            color: #30e8df;
          }
          60% {
            color: #30e8a5;
          }
          70% {
            color: #e8d930;
          }
          80% {
            color: #307ae8;
          }
          90% {
            color: #d0e830;
          }
        }
        @keyframes love-5 {
          10% {
            color: #305ee8;
          }
          20% {
            color: #3092e8;
          }
          30% {
            color: #30e8dc;
          }
          40% {
            color: #e8ae30;
          }
          50% {
            color: #30e8df;
          }
          60% {
            color: #30e8a5;
          }
          70% {
            color: #e8d930;
          }
          80% {
            color: #307ae8;
          }
          90% {
            color: #d0e830;
          }
        }
        @-webkit-keyframes love-6 {
          10% {
            color: #30d6e8;
          }
          20% {
            color: #d6e830;
          }
          30% {
            color: #30e855;
          }
          40% {
            color: #30e83a;
          }
          50% {
            color: #30e83d;
          }
          60% {
            color: #30d0e8;
          }
          70% {
            color: #40e830;
          }
          80% {
            color: #30e843;
          }
          90% {
            color: #e8c030;
          }
        }
        @keyframes love-6 {
          10% {
            color: #30d6e8;
          }
          20% {
            color: #d6e830;
          }
          30% {
            color: #30e855;
          }
          40% {
            color: #30e83a;
          }
          50% {
            color: #30e83d;
          }
          60% {
            color: #30d0e8;
          }
          70% {
            color: #40e830;
          }
          80% {
            color: #30e843;
          }
          90% {
            color: #e8c030;
          }
        }
        @-webkit-keyframes love-7 {
          10% {
            color: #c0e830;
          }
          20% {
            color: #30e8cd;
          }
          30% {
            color: #dfe830;
          }
          40% {
            color: #30e8bd;
          }
          50% {
            color: #e89830;
          }
          60% {
            color: #30bde8;
          }
          70% {
            color: #bae830;
          }
          80% {
            color: #d3e830;
          }
          90% {
            color: #77e830;
          }
        }
        @keyframes love-7 {
          10% {
            color: #c0e830;
          }
          20% {
            color: #30e8cd;
          }
          30% {
            color: #dfe830;
          }
          40% {
            color: #30e8bd;
          }
          50% {
            color: #e89830;
          }
          60% {
            color: #30bde8;
          }
          70% {
            color: #bae830;
          }
          80% {
            color: #d3e830;
          }
          90% {
            color: #77e830;
          }
        }
        @-webkit-keyframes love-8 {
          10% {
            color: #30e8d3;
          }
          20% {
            color: #30e8c9;
          }
          30% {
            color: #d9e830;
          }
          40% {
            color: #98e830;
          }
          50% {
            color: #92e830;
          }
          60% {
            color: #3092e8;
          }
          70% {
            color: #a8e830;
          }
          80% {
            color: #30e83d;
          }
          90% {
            color: #e87a30;
          }
        }
        @keyframes love-8 {
          10% {
            color: #30e8d3;
          }
          20% {
            color: #30e8c9;
          }
          30% {
            color: #d9e830;
          }
          40% {
            color: #98e830;
          }
          50% {
            color: #92e830;
          }
          60% {
            color: #3092e8;
          }
          70% {
            color: #a8e830;
          }
          80% {
            color: #30e83d;
          }
          90% {
            color: #e87a30;
          }
        }
        @-webkit-keyframes love-9 {
          10% {
            color: #49e830;
          }
          20% {
            color: #7de830;
          }
          30% {
            color: #e85b30;
          }
          40% {
            color: #30e2e8;
          }
          50% {
            color: #30bde8;
          }
          60% {
            color: #30dce8;
          }
          70% {
            color: #30e89f;
          }
          80% {
            color: #b7e830;
          }
          90% {
            color: #306ee8;
          }
        }
        @keyframes love-9 {
          10% {
            color: #49e830;
          }
          20% {
            color: #7de830;
          }
          30% {
            color: #e85b30;
          }
          40% {
            color: #30e2e8;
          }
          50% {
            color: #30bde8;
          }
          60% {
            color: #30dce8;
          }
          70% {
            color: #30e89f;
          }
          80% {
            color: #b7e830;
          }
          90% {
            color: #306ee8;
          }
        }
        @-webkit-keyframes love-10 {
          10% {
            color: #30e886;
          }
          20% {
            color: #30e868;
          }
          30% {
            color: #e8d330;
          }
          40% {
            color: #d9e830;
          }
          50% {
            color: #30e84f;
          }
          60% {
            color: #40e830;
          }
          70% {
            color: #30b7e8;
          }
          80% {
            color: #30dce8;
          }
          90% {
            color: #30bde8;
          }
        }
        @keyframes love-10 {
          10% {
            color: #30e886;
          }
          20% {
            color: #30e868;
          }
          30% {
            color: #e8d330;
          }
          40% {
            color: #d9e830;
          }
          50% {
            color: #30e84f;
          }
          60% {
            color: #40e830;
          }
          70% {
            color: #30b7e8;
          }
          80% {
            color: #30dce8;
          }
          90% {
            color: #30bde8;
          }
        }
        @-webkit-keyframes love-11 {
          10% {
            color: #30e8b7;
          }
          20% {
            color: #e8c630;
          }
          30% {
            color: #e87730;
          }
          40% {
            color: #30cde8;
          }
          50% {
            color: #e88030;
          }
          60% {
            color: #30e8d0;
          }
          70% {
            color: #46e830;
          }
          80% {
            color: #30a2e8;
          }
          90% {
            color: #309ce8;
          }
        }
        @keyframes love-11 {
          10% {
            color: #30e8b7;
          }
          20% {
            color: #e8c630;
          }
          30% {
            color: #e87730;
          }
          40% {
            color: #30cde8;
          }
          50% {
            color: #e88030;
          }
          60% {
            color: #30e8d0;
          }
          70% {
            color: #46e830;
          }
          80% {
            color: #30a2e8;
          }
          90% {
            color: #309ce8;
          }
        }
        @-webkit-keyframes love-12 {
          10% {
            color: #30e868;
          }
          20% {
            color: #30b7e8;
          }
          30% {
            color: #3068e8;
          }
          40% {
            color: #3030e8;
          }
          50% {
            color: #30b4e8;
          }
          60% {
            color: #e83730;
          }
          70% {
            color: #30e858;
          }
          80% {
            color: #30e871;
          }
          90% {
            color: #8fe830;
          }
        }
        @keyframes love-12 {
          10% {
            color: #30e868;
          }
          20% {
            color: #30b7e8;
          }
          30% {
            color: #3068e8;
          }
          40% {
            color: #3030e8;
          }
          50% {
            color: #30b4e8;
          }
          60% {
            color: #e83730;
          }
          70% {
            color: #30e858;
          }
          80% {
            color: #30e871;
          }
          90% {
            color: #8fe830;
          }
        }
        @-webkit-keyframes love-13 {
          10% {
            color: #30d6e8;
          }
          20% {
            color: #30e837;
          }
          30% {
            color: #3ae830;
          }
          40% {
            color: #8fe830;
          }
          50% {
            color: #30e883;
          }
          60% {
            color: #e85e30;
          }
          70% {
            color: #e8b430;
          }
          80% {
            color: #e89230;
          }
          90% {
            color: #30e880;
          }
        }
        @keyframes love-13 {
          10% {
            color: #30d6e8;
          }
          20% {
            color: #30e837;
          }
          30% {
            color: #3ae830;
          }
          40% {
            color: #8fe830;
          }
          50% {
            color: #30e883;
          }
          60% {
            color: #e85e30;
          }
          70% {
            color: #e8b430;
          }
          80% {
            color: #e89230;
          }
          90% {
            color: #30e880;
          }
        }
        @-webkit-keyframes love-14 {
          10% {
            color: #30e8a5;
          }
          20% {
            color: #30e868;
          }
          30% {
            color: #3092e8;
          }
          40% {
            color: #e83730;
          }
          50% {
            color: #30e8ba;
          }
          60% {
            color: #7de830;
          }
          70% {
            color: #305be8;
          }
          80% {
            color: #95e830;
          }
          90% {
            color: #d6e830;
          }
        }
        @keyframes love-14 {
          10% {
            color: #30e8a5;
          }
          20% {
            color: #30e868;
          }
          30% {
            color: #3092e8;
          }
          40% {
            color: #e83730;
          }
          50% {
            color: #30e8ba;
          }
          60% {
            color: #7de830;
          }
          70% {
            color: #305be8;
          }
          80% {
            color: #95e830;
          }
          90% {
            color: #d6e830;
          }
        }
        @-webkit-keyframes love-15 {
          10% {
            color: #e85830;
          }
          20% {
            color: #5e30e8;
          }
          30% {
            color: #30e8d6;
          }
          40% {
            color: #e8cd30;
          }
          50% {
            color: #3046e8;
          }
          60% {
            color: #30c9e8;
          }
          70% {
            color: #e87130;
          }
          80% {
            color: #e83d30;
          }
          90% {
            color: #30e846;
          }
        }
        @keyframes love-15 {
          10% {
            color: #e85830;
          }
          20% {
            color: #5e30e8;
          }
          30% {
            color: #30e8d6;
          }
          40% {
            color: #e8cd30;
          }
          50% {
            color: #3046e8;
          }
          60% {
            color: #30c9e8;
          }
          70% {
            color: #e87130;
          }
          80% {
            color: #e83d30;
          }
          90% {
            color: #30e846;
          }
        }
        @-webkit-keyframes love-16 {
          10% {
            color: #46e830;
          }
          20% {
            color: #3730e8;
          }
          30% {
            color: #304fe8;
          }
          40% {
            color: #e8e830;
          }
          50% {
            color: #30a5e8;
          }
          60% {
            color: #30bde8;
          }
          70% {
            color: #30e8c3;
          }
          80% {
            color: #30e883;
          }
          90% {
            color: #30e846;
          }
        }
        @keyframes love-16 {
          10% {
            color: #46e830;
          }
          20% {
            color: #3730e8;
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0