程序员经验分享-hwhale

七夕将至，来看看程序员的浪漫吧

2023-11-08

七夕快要到了，下面来看几个玫瑰，选一个合适的送给心仪的"ta"把

第一束

image-20230821204110309

index页面

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Beauty and The Beast rose</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="castle">
  <div id="table"></div>
  <div class="shade-wrap hover-animation" id="main">
    <div id="flower-wrap">
      <div id="stem"></div>
      <div id="petal1"></div>
      <div id="petal2"></div>
      <div id="petal3"></div>
      <div id="petal4"></div>
      <div id="petal5"></div>
      <div id="falling-petal"></div>
      <div id="leaf1"></div>
      <div id="leaf2"></div>
    </div>
  </div>
  <div class="shade-wrap" id="sub">
    <div id="shade-main-reflections"></div>
    <div id="shade-main">
      <div id="shade-handle-big"></div>
      <div id="shade-handle-small"></div>
      <div id="top-reflection"></div>
      <div id="bottom-shade"></div>
    </div>
  </div>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

js代码

(() => {

  const head = document.getElementsByTagName('head')[0];
  let animationId = 1;

  function CreateMagicDust(x1, x2, y1, y2, sizeRatio, fallingTime, animationDelay, node = 'main') {
    let dust = document.createElement('span');
    let animation = document.createElement('style');
        animation.innerHTML = '\
        @keyframes blink' + animationId + '{\
            0% {\
                top: ' + y1 + 'px;\
                left: ' + x1 + 'px;\
                width: ' + 2*sizeRatio + 'px;\
                height: ' + 2*sizeRatio + 'px;\
                opacity: .4\
            }\
            20% {\
                width: ' + 4*sizeRatio + 'px;\
                height: ' + 4*sizeRatio + 'px;\
                opacity: .8\
            }\
            35% {\
                width: ' + 2*sizeRatio + 'px;\
                height: ' + 2*sizeRatio + 'px;\
                opacity: .5\
            }\
            55% {\
                width: ' + 3*sizeRatio + 'px;\
                height: ' + 3*sizeRatio + 'px;\
                opacity: .7\
            }\
            80% {\
                width: ' + sizeRatio + 'px;\
                height: ' + sizeRatio + 'px;\
                opacity: .3\
            }\
            100% {\
                top: ' + y2 + 'px;\
                left: ' + x2 + 'px;\
                width: ' + 0 + 'px;\
                height: ' + 0 + 'px;\
                opacity: .1\
            }}';
      head.appendChild(animation);
    dust.classList.add('dustDef');
    dust.setAttribute('style', `animation: blink${animationId++} ${fallingTime}s cubic-bezier(.71, .11, .68, .83) infinite ${animationDelay}s`);
      document.getElementById(node).appendChild(dust);
  }
   
   // yes, I'm doing it manually to get the effect I want.. can be easily changed to render randomly
   [[130, 132, 150, 152, .15, 2.5,.1, 'sub'],
      [65, 63, 300, 299, .5, 2, .2, 'sub' ],
      [70, 70, 150, 150, .45, 2, .5],
      [75, 78, 160, 170, .6, 2, 1],
      [80, 82, 160, 180, .6, 1, .4],
      [85, 100, 160, 170, .5, 2, .5],
      [125, 110, 170, 180, .25, 3, 1.5],
      [90, 90, 115, 115, .4, 2, 2],
      [93, 95, 200, 200, .4, 3, 1.5],
      [100, 100, 145, 155, .45, 1, .5],
      [100, 90, 170, 230, .35, 2, .75],
      [100, 102, 115, 112, .35, 3, .25],
      [100, 95, 170, 200, .55, 1.5, .75],
      [100, 97, 150, 190, .7, 2, 1.5],
      [105, 100, 160, 180, .5, 1.5, .725],
      [125, 125, 180, 190, .25, 1, .725],
      [130, 130, 135, 135, .45, 3, 1.5],
      [135, 132, 170, 190, .25, 2.5, .75],
      [135, 132, 320, 315, .2, 5, .3, 'sub']
   ].forEach((o) => CreateMagicDust(...o));

})();

css代码

* {
  margin: 0;
  padding: 0;
}

.hover-animation {
  animation: hover 1.75s ease-in-out infinite;
}

#castle {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(#293c4d, #001920);
  overflow: hidden;
}
#castle #table {
  position: absolute;
  left: calc(50% - 200px);
  top: calc(50% - 50px);
  width: 400px;
  height: 400px;
  background: radial-gradient(#a3727e, #af7279, #a16674);
  border-radius: 100%;
  border-bottom: 80px solid #623c53;
  transform: scaleY(0.225);
}
#castle .shade-wrap {
  position: absolute;
  left: calc(50% - 100px);
  top: calc(52% - 250px);
  width: 200px;
  height: 400px;
}
#castle .shade-wrap #shade-main {
  position: absolute;
  left: 20px;
  top: 100px;
  width: 160px;
  height: 300px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom: none;
  transform: perspective(200px) rotateX(8deg) scale(1.075, 1);
}
#castle .shade-wrap #shade-main #shade-handle-big {
  position: absolute;
  left: 55px;
  top: -14px;
  width: 50px;
  height: 30px;
  border-radius: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  transform: scaleY(0.9);
}
#castle .shade-wrap #shade-main #shade-handle-small {
  position: absolute;
  left: 70px;
  top: -33px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: none;
}
#castle .shade-wrap #shade-main #bottom-shade {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 40px;
  transform: scaleY(0.5);
  border-radius: 100%;
  background: radial-gradient(#d287a5, #da9db6, #985e74);
  animation: floatAnimate 1.75s ease-in-out infinite;
}
#castle .shade-wrap #shade-main-reflections {
  position: relative;
  left: 20px;
  top: 100px;
  width: 160px;
  height: 300px;
  border-top-left-radius: 50% 30%;
  border-top-right-radius: 50% 30%;
  border-bottom: none;
  background-color: #6d6179;
  transform: perspective(200px) rotateX(8deg) scale(1.075, 1);
  opacity: 0.15;
}
#castle .shade-wrap #shade-main-reflections:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-top-right-radius: 50% 30%;
  border-right: 20px solid rgba(255, 255, 255, 0.5);
  transform: scale(0.7, 0.85);
  filter: blur(5px);
}
#castle .shade-wrap #shade-main-reflections:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-top-left-radius: 50% 30%;
  border-left: 8px solid rgba(255, 255, 255, 0.6);
  transform: scale(0.85, 0.85);
  filter: blur(5px);
}
#castle .shade-wrap #flower-wrap {
  position: relative;
  top: -50px;
}
#castle .shade-wrap #flower-wrap #stem {
  position: absolute;
  left: 82px;
  top: 187px;
  width: 100px;
  height: 150px;
  background-color: transparent;
  border: solid 4px #a1b965;
  border-color: transparent transparent transparent #a1b965;
  border-radius: 50%/120px 100px 0 0;
  transform: rotate(-3deg) scale(1.1, 0.9);
}
#castle .shade-wrap #flower-wrap #petal1 {
  position: absolute;
  left: 97px;
  top: 188px;
  width: 25px;
  height: 25px;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background-color: #c82b60;
  box-shadow: 1px -1px 1px 0 #6f1232;
  transform: rotate(32deg) scale(1.6, 1.6);
}
#castle .shade-wrap #flower-wrap #petal1:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background-color: transparent;
  box-shadow: 0 0 10px 0 #e8b2ca;
  opacity: 0.9;
}
#castle .shade-wrap #flower-wrap #petal1:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 10%;
  border-bottom-left-radius: 50% 40%;
  border-bottom-right-radius: 50% 40%;
  background-color: transparent;
  box-shadow: 0 0 35px 0 #e8b2ca;
  animation: glow 3s ease-in-out infinite;
}
#castle .shade-wrap #flower-wrap #petal2 {
  position: absolute;
  left: 85px;
  top: 185px;
  width: 25px;
  height: 30px;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  border-bottom-right-radius: 50% 10%;
  background-color: #d05478;
  transform: rotate(35deg) scale(1.2, 1);
  box-shadow: 1px -1px 1px 0 #6f1232;
  opacity: 0.9;
}
#castle .shade-wrap #flower-wrap #petal3 {
  position: absolute;
  left: 105px;
  top: 197px;
  width: 25px;
  height: 28px;
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 10% 10%;
  border-bottom-left-radius: 10% 10%;
  border-bottom-right-radius: 50% 50%;
  background-color: #cb5275;
  transform: rotate(25deg) scale(1, 1.05) skew(-8deg);
  box-shadow: 1px -1px 1px 0 #6f1232;
  opacity: 0.9;
}
#castle .shade-wrap #flower-wrap #petal4 {
  position: absolute;
  left: 80px;
  top: 191px;
  width: 25px;
  height: 25px;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  border-bottom-right-radius: 50% 10%;
  background-color: #d26484;
  transform: rotate(30deg) scale(1.1, 0.9) skew(10deg);
  box-shadow: 1px -1px 1px 0 #a53d60;
  opacity: 0.9;
}
#castle .shade-wrap #flower-wrap #petal5 {
  position: absolute;
  left: 105px;
  top: 207px;
  width: 25px;
  height: 20px;
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 10% 10%;
  border-bottom-left-radius: 10% 10%;
  border-bottom-right-radius: 50% 50%;
  background-color: #d26484;
  transform: rotate(28deg) scale(1, 1.05) skew(-18deg);
  box-shadow: 1px -1px 1px 0 #a53d60;
  opacity: 0.9;
}
#castle .shade-wrap #flower-wrap #falling-petal {
  position: absolute;
  left: 105px;
  top: 209px;
  width: 22px;
  height: 18px;
  border-top-left-radius: 50% 50%;
  border-top-right-radius: 10% 10%;
  border-bottom-left-radius: 10% 10%;
  border-bottom-right-radius: 50% 50%;
  background-color: #da7290;
  transform: rotate(32deg) scale(0.9, 0.95) skew(-18deg);
  box-shadow: 1px -1px 1px 0 #a53d60;
  opacity: 0.9;
  animation: 7s fall 4s ease-in-out infinite;
}
#castle .shade-wrap #flower-wrap #leaf1 {
  position: absolute;
  left: 75px;
  top: 225px;
  width: 13px;
  height: 20px;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  border-bottom-right-radius: 50% 10%;
  background-color: #a1b965;
  transform: rotate(5deg);
}
#castle .shade-wrap #flower-wrap #leaf2 {
  position: absolute;
  left: 82px;
  top: 265px;
  width: 12px;
  height: 16px;
  border-top-left-radius: 50% 10%;
  border-top-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  border-bottom-right-radius: 50% 10%;
  background-color: #a1b965;
  transform: rotate(-97deg);
}

.dustDef {
  position: absolute;
  background-color: white;
  border-radius: 100%;
  box-shadow: 0 0 3px 1px white;
  opacity: 0;
}

@keyframes hover {
  0% {
    margin-top: 60px;
  }
  50% {
    margin-top: 50px;
  }
  100% {
    margin-top: 60px;
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 25px 0 #e8b2ca;
  }
  50% {
    box-shadow: 0 0 45px 0 #e8b2ca;
  }
  100% {
    box-shadow: 0 0 25px 0 #e8b2ca;
  }
}
@keyframes fall {
  5% {
    top: 209px;
    left: 105px;
    transform: rotate(55deg) scale(0.9, 0.95) skew(-18deg);
    opacity: 0.9;
  }
  30% {
    left: 90px;
  }
  55% {
    left: 130px;
  }
  60%, 100% {
    top: 380px;
    transform: rotate(30deg) scale(0.9, 0.95) skew(-32deg);
    opacity: 0;
  }
}
@keyframes floatAnimate {
  0% {
    background-size: 105% 120%;
    background-position: 0 0;
    opacity: 0.7;
  }
  50% {
    background-size: 100% 100%;
    background-position: 0 0;
    opacity: 0.5;
  }
  100% {
    background-size: 105% 120%;
    background-position: 0 0;
    opacity: 0.7;
  }
}

第二束

image-20230821204237039

html部分

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - blooming rose</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div>
<?xml version="1.0" encoding="utf-8"?>
<svg  id='svg' width='400px' viewBox="0 0 188 264" xmlns="http://www.w3.org/2000/svg">
 <defs>
    <radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.181" gradientTransform="matrix(0.261752, 0.411262, -0.686293, 0.596934, 160.094667, 49.38985)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-1" gradientUnits="userSpaceOnUse" cx="113.342" cy="62.644" r="53.882" gradientTransform="matrix(-0.169507, 1.182475, -0.714039, -0.308382, 160.212434, -46.522622)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-4" gradientUnits="userSpaceOnUse" cx="127.727" cy="116.674" r="45.581" gradientTransform="matrix(-0.468422, -1.651974, 0.962071, -0.272798, 74.446964, 391.898588)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-6" gradientUnits="userSpaceOnUse" cx="43.926" cy="85.895" r="44.319" gradientTransform="matrix(1.145876, -0.154456, 0.133585, 0.991037, 18.521778, 10.448842)">
      <stop offset="0" style="stop-color: rgb(56, 16, 16);"/>
      <stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
    </radialGradient>
    <radialGradient id="gradient-7" gradientUnits="userSpaceOnUse" cx="70.257" cy="63.907" r="38.537" gradientTransform="matrix(-0.480251, 0.463812, -0.694689, -0.719311, 216.251059, 74.926092)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-8" gradientUnits="userSpaceOnUse" cx="99.231" cy="116.778" r="19.209" gradientTransform="matrix(0.18829, -1.009689, 0.983052, 0.183324, -48.104751, 172.536193)">
      <stop offset="0" style="stop-color: rgb(51, 13, 13);"/>
      <stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
    </radialGradient>
    <radialGradient id="gradient-9" gradientUnits="userSpaceOnUse" cx="77.314" cy="119.309" r="20.726" gradientTransform="matrix(-1.623871, -1.229366, 0.603596, -0.79729, 122.245012, 298.564429)">
      <stop offset="0" style="stop-color: rgb(115, 42, 42);"/>
      <stop offset="1" style="stop-color: rgb(255, 0, 0);"/>
    </radialGradient>
    <radialGradient id="gradient-10" gradientUnits="userSpaceOnUse" cx="91.275" cy="115.836" r="34.163">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-11" gradientUnits="userSpaceOnUse" cx="87.793" cy="121.847" r="7.864" gradientTransform="matrix(-0.305698, -2.998266, 0.994843, -0.101432, -6.587452, 397.432981)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(95, 30, 30);"/>
    </radialGradient>
    <radialGradient id="gradient-12" gradientUnits="userSpaceOnUse" cx="77.806" cy="136.077" r="46.618" gradientTransform="matrix(1.007103, 0, 0, 1.028773, 3.509742, -3.183751)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
    <radialGradient id="gradient-13" gradientUnits="userSpaceOnUse" cx="34.864" cy="119.976" r="36.699" gradientTransform="matrix(-0.483999, -0.503131, 0.29077, -1.102951, 30.968876, 262.661348)">
      <stop offset="0" style="stop-color: rgb(67, 88, 0);"/>
      <stop offset="1" style="stop-color: rgb(173, 183, 141);"/>
    </radialGradient>
    <radialGradient id="gradient-14" gradientUnits="userSpaceOnUse" cx="41.572" cy="155.958" r="37.322" gradientTransform="matrix(0.598359, 0, -0.729427, 1.012048, 147.786285, -2.069081)">
      <stop offset="0" style="stop-color: rgb(64, 78, 18);"/>
      <stop offset="1" style="stop-color: #758d29"/>
    </radialGradient>
    <radialGradient id="gradient-15" gradientUnits="userSpaceOnUse" cx="107.613" cy="177.189" r="41.15" gradientTransform="matrix(0.722745, 0, 0, 0.553521, 18.427466, 66.94198)">
      <stop offset="0" style="stop-color: rgb(99, 121, 28);"/>
      <stop offset="1" style="stop-color: rgb(62, 76, 14);"/>
    </radialGradient>
    <linearGradient id="gradient-16" gradientUnits="userSpaceOnUse" x1="79.232" y1="148.661" x2="79.232" y2="267.785" gradientTransform="matrix(0.025831, -0.999666, 0.153237, 0.00396, 43.953685, 274.434674)">
      <stop offset="0" style="stop-color: #bada55"/>
      <stop offset="1" style="stop-color: rgb(59, 72, 14);"/>
    </linearGradient>
    <radialGradient id="gradient-2" gradientUnits="userSpaceOnUse" cx="33.089" cy="83.922" r="27.475" gradientTransform="matrix(0.758528, 1.916342, -0.693287, 0.585241, 83.304087, -39.360742)">
      <stop offset="0" style="stop-color: rgb(255, 0, 0);"/>
      <stop offset="1" style="stop-color: rgb(141, 41, 41);"/>
    </radialGradient>
  </defs>
  <path d="M 73.281 159.571 C 72.647 190.375 75.055 224.982 80.506 263.392 C 81.129 267.785 93.817 263.392 93.817 263.392 C 92.284 264.35 81.135 187.678 88.112 161.093 C 90.388 152.419 77.266 148.661 73.281 159.571 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-16);"><animate repeats='1' id='animate0' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 69.281 159.571 C 68.647 190.375 71.055 224.982 76.506 263.392 C 77.129 267.785 89.817 263.392 89.817 263.392 C 88.284 264.35 77.135 187.678 84.112 161.093 C 86.388 152.419 73.266 148.661 69.281 159.571 Z"/> </path>
  <path d="M 46.953 119.95 C 45.235 117.533 42.584 112.794 41.114 110.103 C 40.46 108.906 40.478 108.549 40.039 108.114 C 35.996 104.1 26.687 103.38 26.687 103.38 C 26.687 103.38 34.854 97.115 39.086 97.698 C 44.858 98.492 50.547 103.452 55.298 110.008 C 62.512 119.962 72.703 149.303 72.703 149.303 C 72.703 149.303 55.029 131.31 46.953 119.95 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-13);"><animate repeats='1' id='animate1' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 31.631 125.725 C 28.891 123.784 24.662 119.977 22.317 117.816 C 21.274 116.854 21.302 116.567 20.603 116.218 C 14.153 112.994 -0.694 112.415 -0.694 112.415 C -0.694 112.415 12.333 107.383 19.082 107.851 C 28.289 108.489 37.364 112.473 44.942 117.739 C 56.448 125.735 72.703 149.303 72.703 149.303 C 72.703 149.303 44.513 134.85 31.631 125.725 Z"/> </path>
  <path d="M 125.945 180.107 L 109.454 169.372 C 106.365 165.002 109.271 159.533 100.933 155.899 C 94.395 153.05 66.464 149.933 78.394 155.058 C 93.119 161.382 82.057 170.1 125.945 180.107 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-15);"><animate repeats='1' id='animate2' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 148.763 204.446 L 125.945 185.051 C 121.672 177.156 125.693 167.276 114.156 160.712 C 105.11 155.565 66.464 149.933 82.971 159.191 C 103.344 170.617 88.039 186.367 148.763 204.446 Z"/> </path>
  <path d="M 90.099 156.29 C 88.891 153.292 90.921 155.595 93.141 153.247 C 98.208 147.888 95.989 137.519 101.888 133.092 C 108.341 128.25 113.536 123.721 107.972 117.88 C 97.368 106.747 107.951 83.841 112.536 84.414 C 112.536 84.414 113.025 78.245 118.24 79.85 C 123.087 81.341 135.801 78.415 137.255 83.273 C 138.221 86.5 136.354 90.548 133.832 92.78 C 131.69 94.675 127.25 92.447 125.466 94.682 C 124.517 95.871 123.465 94.713 122.424 95.822 C 121.033 97.303 119.381 99.626 119.381 99.626 C 119.381 99.626 121.654 92.196 120.141 104.95 C 119.318 111.882 120.656 105.712 117.48 117.879 C 115.795 124.332 120.84 127.039 111.015 143.74 C 108.626 147.8 106.597 153.874 101.888 154.008 C 98.64 154.1 91.313 159.304 90.099 156.29 Z" style="fill: url(#gradient-4); stroke: rgba(255, 0, 0, 0);"><animate repeats='1' id='animate3' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 88.958 161.994 C 87.75 158.996 90.921 155.595 93.141 153.247 C 98.208 147.888 106.637 147.026 112.536 142.599 C 118.989 137.757 124.478 131.678 129.649 125.486 C 137.065 116.606 149.425 96.964 149.425 96.964 C 149.425 96.964 160.562 94.598 165.777 96.203 C 170.624 97.694 176.493 100.472 177.947 105.33 C 178.913 108.557 177.046 112.605 174.524 114.837 C 172.382 116.732 167.942 114.504 166.158 116.739 C 165.209 117.928 167.199 120.193 166.158 121.302 C 164.767 122.783 160.073 121.683 160.073 121.683 C 160.073 121.683 155.121 139.733 149.044 146.402 C 144.342 151.562 137.389 154.391 130.79 156.67 C 124.486 158.847 117.417 157.843 111.015 159.712 C 106.493 161.032 102.794 165.283 98.085 165.417 C 94.837 165.509 90.172 165.008 88.958 161.994 Z"/> </path>
  <path d="M 62.176 137.894 C 59.831 133.766 59.753 126.528 57.254 118.879 C 55.976 114.967 56.069 106.679 54.167 102.907 C 52.326 99.257 52.23 94.76 50.378 91.118 C 47.918 86.281 50.766 86.433 41.044 80.85 C 36.499 78.24 31.211 82.949 33.109 78.188 C 36.417 69.886 50.787 73.079 57.47 68.3 C 60.05 66.455 63.869 64.244 67.014 63.357 C 68.178 63.028 70.383 64.878 70.383 64.878 C 70.383 64.878 71.908 61.837 75.047 62.975 C 75.047 62.975 76.907 66.637 80.141 64.117 C 83.6 61.423 82.944 65.721 86.799 67.54 C 94.384 71.119 94.482 74.765 94.482 74.765 C 128.904 119.447 94.989 195.653 62.176 137.894 Z" style="fill: url(#gradient-0); stroke: rgba(255, 0, 0, 0);"><animate repeats='1' id='animate4' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 44.942 120.781 C 41.293 117.204 34.996 117.021 31.631 113.175 C 28.748 109.88 28.911 104.778 26.688 101.006 C 24.536 97.356 20.866 94.76 18.701 91.118 C 15.826 86.281 12.931 81.109 12.236 75.526 C 11.587 70.314 12.3 64.695 14.518 59.934 C 18.386 51.632 24.959 44.177 32.772 39.398 C 35.788 37.553 39.364 37.623 43.04 36.736 C 44.401 36.407 43.421 32.553 43.421 32.553 C 43.421 32.553 44.315 31.034 47.984 32.172 C 47.984 32.172 51.048 22.903 54.829 20.383 C 58.872 17.689 64.775 16.663 69.281 18.482 C 78.148 22.061 87.155 40.919 87.155 40.919 C 129.95 85.497 103.042 177.736 44.942 120.781 Z"/> </path>
  <path d="M 70.914 71.237 L 76.638 69.198 C 77.362 66.255 89.209 45.785 90.524 68.715 C 90.661 71.103 93.14 66.504 93.14 66.504 C 93.14 66.504 98.766 61.707 101.007 62.911 C 106.081 65.636 109.6 59.835 112.863 65.977 C 118.208 76.036 108.947 85.333 108.52 96.88 C 108.213 105.193 114.806 116.288 111.821 123.103 C 109.37 128.702 107.584 146.029 107.584 146.029 C 80.053 193.792 53.77 100.982 70.914 71.237 Z" style="fill: url(#gradient-1); stroke: rgba(255, 0, 0, 0);" transform="matrix(0.99135, 0.131244, -0.131244, 0.99135, 15.956242, -10.615298)"><animate repeats='1' id='animate5' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 73.464 53.849 L 87.535 41.68 C 87.535 41.68 105.977 36.949 113.775 40.919 C 116.376 42.243 118.719 48.145 118.719 48.145 C 118.719 48.145 125.275 48.072 128.227 49.286 C 134.91 52.035 141.618 56.401 145.34 62.596 C 151.436 72.743 153.533 85.935 151.425 97.583 C 149.908 105.969 143.531 112.765 138.495 119.64 C 134.358 125.288 124.424 135.233 124.424 135.233 C 79.951 183.412 45.768 83.853 73.464 53.849 Z"/> </path>
  <path d="M 79.028 139.796 C 79.028 139.796 70.453 142.266 65.687 144.415 C 61.432 146.333 57 148.408 52.224 151.728 C 47.552 154.975 42.312 161.308 37.936 163.659 C 34.523 165.493 30.327 164.428 30.327 164.428 C 40.91 171.741 56.429 169.047 76.884 156.346 C 84.002 151.926 84.717 146.409 79.028 139.796 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-14);"><animate repeats='1' id='animate6' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 55.97 140.176 C 55.97 140.176 44.615 142.617 39.237 144.74 C 34.437 146.635 29.53 148.686 25.547 151.966 C 21.65 155.175 20.521 161.432 16.039 163.755 C 12.543 165.567 4.25 164.515 4.25 164.515 C 30.744 171.741 53.435 169.079 72.323 156.529 C 78.894 152.162 73.443 146.711 55.97 140.176 Z"/> </path>
  <path d="M 105.028 130.668 C 98.146 97.987 126.006 49.499 85.253 68.681 C 54.631 83.094 48.236 181.015 105.028 130.668 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-7);"><animate repeats='1' id='animate7' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 112.254 128.767 C 132.537 99.358 127.585 45.893 100.845 62.596 C 72.14 80.525 55.462 179.114 112.254 128.767 Z"/> </path>
  <path d="M 67.428 133.685 L 66.92 115.513 C 58.539 81.763 60.825 70.019 73.777 80.279 C 88.292 91.779 95.234 113.66 94.601 145.924 C 94.329 159.843 85.271 155.764 67.428 133.685 Z" style="fill: url(#gradient-2); stroke: rgba(0, 0, 0, 0);"><animate repeats='1' id='animate8' begin='infinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 47.239 119.453 L 46.478 100.819 C 33.928 66.212 37.351 54.17 56.746 64.691 C 78.482 76.482 88.877 98.92 87.93 132.003 C 87.522 146.276 73.958 142.092 47.239 119.453 Z"/> </path>
  <path d="M 100.085 83.132 C 88.793 39.094 59.208 77.578 68.14 112.415 C 81.999 195.394 111.856 135.608 100.085 83.132 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-6);"><animate repeats='1' id='animate9' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 108.832 77.808 C 97.54 33.77 37.151 58.943 46.083 93.78 C 73.235 179.557 125.789 131.376 108.832 77.808 Z"/> </path>
  <path d="M 72.703 94.161 C 82.337 75.526 90.45 75.906 97.042 95.301 C 102.305 110.787 96.981 126.253 81.07 141.698 Q 63.887 158.377 72.703 94.161 Z" style="fill: url(#gradient-8); stroke: rgba(23, 11, 11, 0);"><animate repeats='1' id='animate10' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 72.703 94.161 C 82.337 75.526 90.45 75.906 97.042 95.301 C 102.305 110.787 96.981 126.253 81.07 141.698 Q 63.887 158.377 72.703 94.161 Z"/> </path>
  <path d="M 79.929 94.921 C 79.929 110.386 82.718 124.838 88.296 138.275 C 94.391 152.956 95.658 137.111 92.099 90.738 C 92.233 91.34 89.707 99.625 79.929 94.921 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-11);"><animate repeats='1' id='animate11' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 79.929 94.921 C 79.929 110.386 82.718 124.838 88.296 138.275 C 94.391 152.956 95.658 137.111 92.099 90.738 C 92.233 91.34 89.707 99.625 79.929 94.921 Z"/> </path>
  <path d="M 73.464 85.414 C 69.982 90.035 68.588 93.977 70.421 104.429 C 72.308 115.19 88.12 121.815 82.971 132.951 C 77.322 145.168 90.148 136.061 94 103.288 C 92.924 104.58 91.84 102.508 73.464 85.414 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-9);"><animate repeats='1' id='animate12' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 60.914 84.273 C 54.322 88.203 52.547 95.936 55.59 107.471 C 58.634 119.012 64.719 129.28 73.844 138.275 C 83.429 147.724 90.148 136.061 94 103.288 C 92.924 104.58 79.29 101.367 60.914 84.273 Z"/> </path>
  <path d="M 68.14 97.964 C 70.663 106.543 101.871 103.202 99.324 94.541 C 100.286 103.186 107.338 120.762 86.013 126.486 C 69.818 130.833 68.761 122.681 68.14 97.964 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-10);"><animate repeats='1' id='animate13' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 55.21 105.95 C 57.733 114.529 114.801 99.399 112.254 90.738 C 123.536 115.964 118.212 136.627 97.042 142.078 C 80.803 146.259 65.338 131.428 55.21 105.95 Z"/> </path>
  <path d="M 65.621 71.386 C 73.187 66.787 74.757 123.742 73.282 132.028 C 73.282 132.028 73.916 123.242 72.899 120.682 C 65.839 102.914 78.876 22.508 100.091 72.56 C 102.929 79.255 98.089 86.6 106.603 88.21 C 109.251 88.711 110.816 108.552 110.816 108.552 C 110.816 108.552 109.611 116.801 111.581 117.942 C 112.973 118.748 110.433 126.551 110.433 126.551 C 110.433 126.551 111.19 129.51 109.283 131.244 C 103.986 136.064 105.8 144.744 99.709 148.46 C 97.396 149.87 101.41 154.006 98.943 155.111 C 95.538 156.636 91.926 157.948 88.219 158.24 C 85.14 158.483 81.973 158.015 79.027 157.067 C 74.07 155.474 73.98 150.948 70.219 147.286 C 67.857 144.986 67.952 132.013 65.622 129.679 C 63.214 127.267 64.91 123.17 64.091 112.466 C 63.678 107.072 64.091 91.729 64.091 91.729 C 64.091 91.729 59.049 86.584 59.877 79.211 C 60.224 76.12 63.005 72.977 65.621 71.386 Z" style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-12);"><animate repeats='1' id='animate14' begin='indefinite' fill='freeze' calcMode='spline' keySplines='0 .06 0 .97' keyTimes='0;1' attributeName='d' dur='12000ms' to="M 39.237 122.683 C 46.749 118.213 62.759 115.009 61.295 123.063 C 61.295 123.063 66.241 120.779 68.9 120.401 C 73.55 119.739 78.314 120.546 82.971 121.162 C 91.45 122.284 99.617 125.191 108.071 126.486 C 110.714 126.891 116.057 127.246 116.057 127.246 C 116.057 127.246 120.185 127.658 122.142 128.767 C 123.524 129.55 124.424 132.951 124.424 132.951 C 124.424 132.951 121.753 137.349 119.86 139.035 C 114.6 143.72 107.654 146.072 101.606 149.684 C 99.31 151.055 97.21 152.793 94.761 153.867 C 91.38 155.35 87.793 156.625 84.112 156.909 C 81.055 157.145 77.91 156.69 74.985 155.769 C 70.063 154.22 65.03 152.103 61.295 148.543 C 58.95 146.308 58.664 142.444 56.351 140.176 C 53.96 137.831 50.7 136.511 47.604 135.233 C 42.743 133.227 32.392 131.049 32.392 131.049 C 32.392 131.049 31.189 128.709 31.631 127.627 C 32.774 124.828 36.639 124.229 39.237 122.683 Z"/> </path>
</svg>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

css部分

div{
 margin: 0 auto;
}

body {
    background-color: black;
}

body > *  {
  width: 500px;
}

#svg{
  background-color: darkseagreen;
  background: radial-gradient(darkseagreen 0%, black 70%);
}

js部分

var svg = document.getElementById('svg');

var animation0 = document.getElementById('animate0'); 
svg.addEventListener('mouseenter', function(){ animation0.beginElement(); });
var animation1 = document.getElementById('animate1'); 
svg.addEventListener('mouseenter', function(){ animation1.beginElement(); });
var animation2 = document.getElementById('animate2'); 
svg.addEventListener('mouseenter', function(){ animation2.beginElement(); });
var animation3 = document.getElementById('animate3'); 
svg.addEventListener('mouseenter', function(){ animation3.beginElement(); });
var animation4 = document.getElementById('animate4'); 
svg.addEventListener('mouseenter', function(){ animation4.beginElement(); });
var animation5 = document.getElementById('animate5'); 
svg.addEventListener('mouseenter', function(){ animation5.beginElement(); });
var animation6 = document.getElementById('animate6'); 
svg.addEventListener('mouseenter', function(){ animation6.beginElement(); });
var animation7 = document.getElementById('animate7'); 
svg.addEventListener('mouseenter', function(){ animation7.beginElement(); });
var animation8 = document.getElementById('animate8'); 
svg.addEventListener('mouseenter', function(){ animation8.beginElement(); });
var animation9 = document.getElementById('animate9'); 
svg.addEventListener('mouseenter', function(){ animation9.beginElement(); });
var animation10 = document.getElementById('animate10'); 
svg.addEventListener('mouseenter', function(){ animation10.beginElement(); });
var animation11 = document.getElementById('animate11'); 
svg.addEventListener('mouseenter', function(){ animation11.beginElement(); });
var animation12 = document.getElementById('animate12'); 
svg.addEventListener('mouseenter', function(){ animation12.beginElement(); });
var animation13 = document.getElementById('animate13'); 
svg.addEventListener('mouseenter', function(){ animation13.beginElement(); });
var animation14 = document.getElementById('animate14'); 
svg.addEventListener('mouseenter', function(){ animation14.beginElement(); });

第三束

image-20230821204338422

html部分

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Enchanted Rose</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
   <div class="glass"></div>
   <div class="thorns">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <div class="glow"></div>
   <div class="rose-leaves">
      <div></div>
      <div></div>
   </div>
   <div class="rose-petals">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <div class="sparkles">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>
<!-- partial -->
  
</body>
</html>

css部分

html, body {
  height: 100%;
  width: 100%;
  background: #122139;
  overflow: hidden;
}

.container {
  width: 100px;
  height: 300px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  -moz-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -webkit-transform: scale(0.6);
  transform: scale(0.6);
}
.container div {
  position: absolute;
}
.container .glass {
  height: 420px;
  width: 250px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  -moz-border-radius: 300px 300px 0px 0px;
  -webkit-border-radius: 300px;
  border-radius: 300px 300px 0px 0px;
  left: -80px;
  top: -100px;
  border-bottom: 15px solid rgba(255, 255, 255, 0.5);
}
.container .glass:after {
  width: 8px;
  background: rgba(255, 255, 255, 0.28);
  content: '';
  position: absolute;
  height: 80px;
  top: 430px;
  border-radius: 100px;
  left: 10px;
  top: 180px;
}
.container .glass:before {
  width: 8px;
  background: rgba(255, 255, 255, 0.28);
  content: '';
  position: absolute;
  height: 15px;
  top: 430px;
  border-radius: 100px;
  left: 10px;
  top: 280px;
}
.container .glow {
  position: absolute;
  width: 170px;
  height: 170px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 1px solid rgba(245, 148, 184, 0.47);
  box-shadow: 0px 0px 10px #f594b8;
  left: -40px;
  top: -40px;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -moz-animation: glowing 2.5s ease-in-out infinite;
  -webkit-animation: glowing 2.5s ease-in-out infinite;
  animation: glowing 2.5s ease-in-out infinite;
}
.container .rose-petals > div {
  background: #d52d58;
  width: 45px;
  height: 80px;
  position: absolute;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.container .rose-petals > div:nth-child(1) {
  border-radius: 15px;
  left: 20px;
  top: -6px;
  background: #d52d58;
}
.container .rose-petals > div:nth-child(2), .container .rose-petals > div:nth-child(4), .container .rose-petals > div:nth-child(6) {
  border-radius: 0px 30px 0px 30px;
  background: #b81b43;
  left: 0;
  transform-origin: bottom right;
}
.container .rose-petals > div:nth-child(3), .container .rose-petals > div:nth-child(5), .container .rose-petals > div:nth-child(7) {
  border-radius: 30px 0px 30px 0px;
  left: 40px;
  transform-origin: bottom left;
}
.container .rose-petals > div:nth-child(2) {
  -moz-animation: openRose2 3s ease-in-out;
  -webkit-animation: openRose2 3s ease-in-out;
  animation: openRose2 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 5;
  background: #9e183a;
  top: 10px;
  height: 70px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(3) {
  -moz-animation: openRose3 3s ease-in-out;
  -webkit-animation: openRose3 3s ease-in-out;
  animation: openRose3 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 4;
  background: #9e183a;
  top: 10px;
  height: 70px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(4) {
  -moz-animation: openRose4 3s ease-in-out;
  -webkit-animation: openRose4 3s ease-in-out;
  animation: openRose4 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 3;
  background: #b81b43;
  top: 5px;
  height: 75px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(5) {
  -moz-animation: openRose5 3s ease-in-out;
  -webkit-animation: openRose5 3s ease-in-out;
  animation: openRose5 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 2;
  background: #b81b43;
  top: 5px;
  height: 75px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(6) {
  -moz-animation: openRose6 3s ease-in-out;
  -webkit-animation: openRose6 3s ease-in-out;
  animation: openRose6 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 1;
  background: #c9204b;
  top: "";
  height: "";
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-petals > div:nth-child(7) {
  -moz-animation: openRose7 3s ease-in-out;
  -webkit-animation: openRose7 3s ease-in-out;
  animation: openRose7 3s ease-in-out;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  z-index: 0;
  background: #c9204b;
  top: "";
  height: "";
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .rose-leaves > div:nth-last-child(1) {
  width: 55px;
  height: 30px;
  background: #338f37;
  position: absolute;
  top: 60px;
  left: 15px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
}
.container .rose-leaves > div:nth-child(1) {
  width: 6px;
  height: 230px;
  border: none;
  top: 80px;
  background: #066406;
  left: 40px;
}
.container .thorns > div {
  width: 30px;
  height: 30px;
  background: #066406;
  top: 100px;
  left: 10px;
}
.container .thorns > div:after {
  width: 41px;
  height: 31px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #122139;
  content: "";
  position: absolute;
  left: -12px;
  top: 17px;
}
.container .thorns > div:before {
  width: 41px;
  height: 31px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #122139;
  content: "";
  position: absolute;
  left: -11px;
  top: -11px;
  z-index: 0;
}
.container .thorns > div:nth-child(2) {
  top: 150px;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 45px;
}
.container .thorns > div:nth-child(3) {
  top: 180px;
}
.container .thorns > div:nth-child(4) {
  top: 220px;
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  left: 45px;
}
.container .sparkles {
  bottom: -40px;
}
.container .sparkles > div {
  width: 4px;
  height: 4px;
  border-radius: 100px;
  background: #ff96c0;
  box-shadow: 0px 0px 12px 2px #ff4e85;
  bottom: 0;
  opacity: 0;
  -moz-animation: sparkle 4s ease-in-out infinite;
  -webkit-animation: sparkle 4s ease-in-out infinite;
  animation: sparkle 4s ease-in-out infinite;
}
.container .sparkles > div:nth-child(1) {
  left: 95px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(2) {
  left: 66px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(3) {
  left: -50px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(4) {
  left: -55px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(5) {
  left: -48px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(6) {
  left: 91px;
  -moz-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.container .sparkles > div:nth-child(7) {
  left: 70px;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.container .sparkles > div:nth-child(8) {
  left: 10px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.container .sparkles > div:nth-child(9) {
  left: 102px;
  -moz-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

@-webkit-keyframes $animationName {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-moz-keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-ms-keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@keyframes sparkle {
  50% {
    opacity: 1;
  }
  100% {
    bottom: 250px;
  }
}
@-webkit-keyframes $animationName {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-moz-keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-ms-keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@keyframes openRose2 {
  50% {
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 80px;
    left: 100px;
  }
  100% {
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg);
    top: 210px;
    left: -30px;
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-moz-keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-ms-keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@keyframes openRose3 {
  100% {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-moz-keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-ms-keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@keyframes openRose4 {
  100% {
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }
}
@-webkit-keyframes $animationName {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-moz-keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-ms-keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@keyframes openRose5 {
  100% {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-webkit-keyframes $animationName {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@-moz-keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@-ms-keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}
@keyframes glowing {
  50% {
    box-shadow: 0px 0px 60px #f594b8;
  }
}

最后，这里是三个玫瑰花的在线演示地址：玫瑰导航 (guoyaxue.top)

以及这三个的源码打包地址：http://love.guoyaxue.top/pan/down.php/ad6c0159c9650659b4b90a389a7b0a56.zip

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

CSS3

七夕将至，来看看程序员的浪漫吧 的相关文章

  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中

  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code

  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc

  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi

  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注

  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些

  • 如何消除 HTML 内容周围的边距？

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div

  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un

  • jQuery - 如何从 div > p 获取文本

    如何从 div 类中获取主题名称 div class subject img src image eng jpg p English p div div class subject img src image bio jpg p Biolo

  • socket.io 的良好初学者教程？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • @media语法/可能的组合

    我见过其中一些 media print media screen handheld print projection media all media all and property value media screen and prope

  • 删除子元素上的 CSS 过滤器

    我的 CSS 代码有问题 正如您所看到的 我在 li 元素上有过滤器 但它覆盖了其他元素 我需要使其他两个元素没有过滤器 有没有可能这样做 main width 300px height 300px background color blu

  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html

  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o

  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其

  • 可以设置标题样式吗？ （并且使用CSS或js？）[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C

  • 使用css bootstrap时如何仅向一列添加右边框？

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

  • HTML 锚点，禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 前端使用mqtt协议

    前端调用 mqtt协议 简单介绍下mqtt他就是和websocket基本类似 但实质上还是不同的 这个可以查阅更准确的内容 这个js用在react还是vue中没有实质的区别都是类似了 以下的代码我用在了react中 mqtt协议主要流程 1

  • No accessible constructors were found for the type‘XXXXXX‘

    abp框架新建了一个模版项目 启动报错 报错实例 Autofac Core Activators Reflection NoConstructorsFoundException No accessible constructors were

  • java学习的准备

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 前言 一 Java JavaEE JavaSE JavaME的区别 二 JDK JRE JVM 三 JDK目录 四 Java程序开发运行流程 五 注释 前言 突然发

  • vue项目SEO优化方案——prerender-spa-plugin插件实现预渲染

    安装插件 npm install prerender spa plugin save 代码应用 vue config js const PrerenderSPAPlugin require prerender spa plugin cons

  • 卡尔曼滤波系列（五）——奇异值鲁棒的卡尔曼滤波算法

    目录 1 简介 2 原理 3 实验 4 参考文献 1 简介 传统的卡尔曼滤波算法假定了噪声服从高斯分布 而实际应用场景中 由于传感器受到各种因素的影响 可能存在部分远偏离预期值的观测结果 称为奇异值 此时观测噪声不再是高斯分布的 而类似于s

  • 通信线路工程设计

    目录 通信线路工程设计 施工与维护 第一 四章部分内容 第一章 通信线路基础知识 第二章 通信线路工程设计要点 第三章 通信线路工程勘测 第四章 光缆线路工程设计 else 分光器和分纤盒 单模光纤和多模光纤 通信线路工程设计 施工与维护

  • 编程对小学生重要吗？看完小学生机器人编程学习线路图就知道了

    孩子步入小学阶段以后 很多家长都会把大部分时间经精力用在孩子的学科辅导上 过于看中孩子的学习分数 往往会忽视孩子的兴趣培养和综合能力的提升 近两年 少儿编程赛道受到了资本的广泛关注 伴随着诸多教育新政和利好政策的出台 很多家长已经把孩子的编

  • springboot+vue前后端分离项目，拦截器获取不到session的问题，和解决思路

    前后端分离的项目 浏览器发送请求给服务器通常都要发送两次 其中一次是options类型的请求 可打开network查看 主要是为了验证服务器是否可用 而options请求又不会携带我们自定义的header数据 所以必然会被拦截器给拦截 导致

  • vue3父组件给子组件传值

    父组件

  • Could not acquire change log lock. Currently locked by XXXXXX

    最近公司项目使用到了flowable 为了方便业务开发人员使用流程设计器画流程图 使用了flowable的原生流程设计器modeler 用docker部署非常方便 参考flowable流程设计器部署官网文档 用docker部署flowabl

  • JAVA 10

    重写 一 重写是父类与子类之间多态的一种表现 二 重写方法的参数列表必须与被重写的方法完全相同 三 重写方法的访问符一定要大于被重写方法的访问修饰符 要保证public gt protected gt default gt private

  • Node-包管理工具整套下载使用讲解(nvm、npm、yarn、cnpm、pnpm、nrm)

    前言 包管理工具npm Node Package Manager 就是Node包管理器 现在已经不仅仅是node的包管理器了 我们前端项目也都会用它来进行管理项目依赖的包 如何下载和安装npm工具 npm属于node的一个管理工具 所以我们

  • 管螺纹如何标注_螺纹画法图解，你了解多少？

    螺纹是机械产品中常见的联接件 在绘制机械图纸时 螺纹的画法是有讲究的 国家机械制图标准中对螺纹画法做出了详细的规定 不同螺纹画法也不尽相同 螺纹的画法图解 01 外螺纹 外螺纹不论其牙形如何 螺纹的牙顶 大径 及螺纹终止线用粗实线表示 螺杆

  • merge into 的用法

    1 语法 merge into 的语法如下所示 MERGE INTO target table T USING source table sql S ON conditional expression and WHEN MATCHED TH

  • apache-Tomcat 8.5.39安装包 安装过程以及启动文件详解

    1 apache tomcat8 5 39 安装包地址 链接 https pan baidu com s 1 EIftvG A XM8VEfkDlJLQ 提取码 fxpp 复制这段内容后打开百度网盘手机App 操作更方便哦 说明 tomca

  • MQTT Paho + Mosquitto 快速搭建 & 双向认证

    今天继续聊SOA的话题 前面聊过了SOME IP和DDS 很多文章提到SOA协议 还会把HTTP和MQTT也放进来讨论 但个人认为 目前只有SOME IP和DDS适合作为车载SOA的中间件方案 而HTTP和MQTT则更适合应用于车联网云端交

  • tf并行计算学习

    Tensorflow并行计算 Liu91 2018 08 13 14 09 19 字数 1 294 阅读 8 724 在真正开始Tensorflow并行运算代码实现之前 我们首先了解一下Tensorflow系统结构设计是如何完美的支持并行运

  • JDBC连接MySQL并且查询操作。

    1 package com imooc db 2 3 4 import java sql Connection 5 import java sql DriverManager 6 import java sql ResultSet 7 im

  • 路由器NAT功能配置简介

    路由器NAT功能配置简介 随着internet的网络迅速发展 IP地址短缺已成为一个十分突出的问题 为了解决这个问题 出现了多种解决方案 下面几绍一种在目前网络环境中比较有效的方法即地址转换 NAT 功能 一 NAT简介 NAT Netwo

  • 七夕将至，来看看程序员的浪漫吧

    七夕快要到了 下面来看几个玫瑰 选一个合适的送给心仪的 ta 把 第一束 index页面 div div div div div div

热门标签