svg+css实现爱心旋转舞台动画效果代码-html代码-BFW代码库

svg+css实现爱心旋转舞台动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现爱心旋转舞台动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
.display{
  --width: 20rem;
  --color: hsl(333 66% 75%);
  --skew: 1rem;
  --animation-duration: 10s;
  aspect-ratio: 1/.5;
  width: var(--width);
  border-top-left-radius: 50% var(--skew);
  border-top-right-radius: 50% var(--skew);
  background:
    radial-gradient( 100% 100%,
      var(--color) calc(50% - 1px), #0000 calc(50% + 1px)
    ) top center / 100% calc(var(--skew) * 2) no-repeat,
    linear-gradient(  90deg,
      color-mix(in oklch, var(--color), hsl(0 0% 100% / .75)),
      #0000 40% 60%,
      color-mix(in oklch, var(--color), hsl(0 0% 0% / .5))
    ),
    radial-gradient( 100% 100%,
      color-mix(in oklch, var(--color), hsl(0 0% 20%)) calc(50% - 1px), #0000 calc(50% + 1px)
    ) top center / 100% calc(var(--skew) * 2 + 7.5%) no-repeat,
    repeating-linear-gradient(90deg,
      #0000 0 1.25%, hsl(0 0% 0% / .125) 1.25% 2.5%
    ) center left / 200% 100%,
    var(--color);
  box-shadow:
    calc(var(--width) * .125) 
    calc(var(--width) * .125) 
    calc(var(--width) * .25) 
    color-mix(in oklch, var(--color), hsl(0 0%.........完整代码请登录后点击上方下载按钮下载查看