css实现悬停太阳动画效果代码-html代码-BFW代码库

css实现悬停太阳动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬停太阳动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.backdrop {
  position: fixed;
  z-index: -1;
  background: #182430;
  height: 100vh;
  width: 100vw;
  transition: background 0.2s;
}
:root {
  --start: "M131.5 145.25L149.125 162.875L171.625 140.5L153.875 122.75L131.5 145.25ZM138 163C142 163 163 163 163 163V126.125H138V163ZM150.5 68.875C130.609 68.875 111.532 76.7768 97.467 90.842C83.4018 104.907 75.5 123.984 75.5 143.875C75.5 163.766 83.4018 182.843 97.467 196.908C111.532 210.973 130.609 218.875 150.5 218.875C170.391 218.875 189.468 210.973 203.533 196.908C217.598 182.843 225.5 163.766 225.5 143.875C225.5 102.375 191.875 68.875 150.5 68.875ZM131.5 156.375H169V131.375H131.5V156.375ZM129.375 140.5L151.875 162.875L169.5 145.25L147.125 122.75L129.375 140.5ZM171.625 140.375L154 122.75L131.5 145.125L149.25 162.875L171.625 140.375ZM163 126.125H138V163H163V126.125ZM169 131.375H131.5V156.375H169V131.375ZM169.563 145.188L147.063 122.813L129.438 140.438L151.813 162.938L169.563 145.188Z";
  --end: "M44.875 231.875L62.5 249.5L85 227.125L67.25 209.375L44.875 231.875ZM138 280.75C142 280.75 163 280.75 163 280.75V243.875H138V280.75ZM150.5 68.875C130.609 68.875 111.532 76.7768 97.467 90.842C83.4018 104.907 75.5 123.984 75.5 143.875C75.5 163.766 83.4018 182.843 97.467 196.908C111.532 210.973 130.609 218.875 150.5 218.........完整代码请登录后点击上方下载按钮下载查看