div+css布局实现环中环动画效果代码-html代码-BFW代码库

div+css布局实现环中环动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css布局实现环中环动画效果代码

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

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

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


  
  
<style>
@property --a {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
.cover {
  width: var(--size);
}

.cover, .r {
  --size: min(max(40vmin, 300px), 500px);
  --w: 24px;
  --lum: 75%;
  --brd-hue: 270;
  --brd: hsl(var(--brd-hue) 60% var(--lum));
  --bg-hue: 30;
  --bg: hsl(var(--bg-hue) 60% 90%);
  border-radius: 100vmax;
  box-sizing: border-box;
  padding: 1px;
  aspect-ratio: 1;
  position: relative;
  transform-style: preserve-3d;
  background-color: var(--bg);
  border: var(--w) solid var(--brd);
  box-shadow: inset -5px -5px 5px #fff2, inset 5px 5px 5px #0004, inset -5px -5px 10px 5px var(--bg), inset 5px 5px 20px 5px #0004, 1px 1px 5px 2px #0004;
}

.r {
  position: absolute;
  --sz: var(--size);
  --s: calc(var(--sz) * .7);
  width: var(--s);
  height: var(--s);
  top: calc(50% - var(--s) / 2);
  left: calc(50% - var(--s) / 2);
  --d1: calc(var(--sz) - var(--w));
  --d2: var(--d1);
  --starta: 0;
  --enda: 360;
  --a: var(--starta);
  --angl: var(--a) * 1deg;
  --x: calc(cos(var(--angl))
        * (var(--d1) - var(--s) - var(--w)) * .5);
  --y: calc(sin(var(--angl))
        * (var(--d2) - var(--s) - var(--w)) * .5);
  translate: var(--x) var(--y);
  animation: rott 5s linear infinite;
  --brd-hue: 220;
  --bg-hue: 200;
}
.r > .r {
  --brd-hue: 150;
  --bg-hue: 100;
  --starta: 90;
.........完整代码请登录后点击上方下载按钮下载查看