css实现轨道图片旋转背景效果代码-html代码-BFW代码库

css实现轨道图片旋转背景效果代码

代码语言：html

所属分类：动画

代码描述：css实现轨道图片旋转背景效果代码，图片轨道旋转动画，上面是文字。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html { color-scheme: dark }
        body { padding: 2rem; font-family: system-ui, sans-serif }
        
        /* header */
        header { 
          display: grid; 
          align-items: center;
          width: min(60rem, 100%);
          margin-inline: auto;
        }
        header :is(.orbits, .content){ grid-area: 1/1 }
        
        /* content */
        .content { place-self: center; text-align:center; max-width: 40ch }
        .content > p:nth-of-type(1) { text-transform: uppercase; font-size: .8rem }
        .content > h1 { font-size: 2.5rem; font-weight: 800 }
        .content > h1 > span { color: hsl(350 100% 50%) }
        .content > p:nth-of-type(2){ font-size: 1.2rem }
        
        /* orbits */
        .orbits {  
          --orbit-outer-size: 100%;
          --orbit-inner-size: 75%;
          --orbit-image-size: min(4vw, 3rem);
          --orbit-ring-color: hsl(0 0% 50% / .75);
          --orbit-ring-thickness: 1px;
          --orbit-animation-duration: 10s;
        
          display: grid;
          grid-template-columns.........完整代码请登录后点击上方下载按钮下载查看