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: 1fr 1fr;
          --mask-image: radial-gradient(circle at center, transparent 40%, black 50%);
          -webkit-mask-image: var(--mask-image);
          mask-image: var(--mask-image);
          overflow: hidden;
          z-index: -1;
        }
        .orbits :is(.left, .right, .outer, .inner) { display: grid; aspect-ratio: 1/1 }
        .orbits .left { place-items: center end }
        .orbits .right { place-items: center start }
        
        .orbits :is(.outer, .inner){
          grid-area: 1/1;
          width: calc(var(--width) - var(--orbit-image-size));
          border: var(--orbit-ring-thickness) solid var(--orbit-ring-color);
          border-radius: 50%;
          animation: orbit-rotate var(--orbit-animation-duration) linear infinite;
        }
        .orbits .outer { --width: var(--orbit-outer-size) }
        .orbits .inner { --width: var(--orbit-inner-size) }
        
        .orbits [data-orbit-rotate="left"] { --orbit-rotate-to: -360deg }
        .orbits [data-orbit-rotate="right"]{ --orbit-rotate-to:  360deg }
        
        .orbits img { 
          grid-area: 1/1;
          width: var(--orbit-image-size);
          aspect-ratio: 1/1;
          border-radius: 50%;
          object-fit: cover;
          --translate: translateX(var(--tx, 0)) translateY(var(--ty, 0));
          transform: var(--translate);
          animation: orbit-image-rotate var(--orbit-animation-duration) linear infinite;
          place-self: var(--ps)
        }
        .orbits img:nth-child(1) { --ps: start center; --ty: -50% }
        .orbits img:nth-child(2) { --ps: center end  ; --tx:  50% }
        .orbits img:nth-child(3) { --ps: end center  ; --ty:  50% }
        .orbits img:nth-child(4) { --ps: center start; --tx: -50% }
        
        /* .orbits :is(.outer, .inner):hover,
        .orbits :is(.outer, .inner):hover img{
          animation-play-state: paused;
        } */
        
        @keyframes orbit-rotate { to { transform: rotate(var(--orbit-rotate-to)) } }
        @keyframes orbit-image-rotate { to { transform: var(--translate) rotate(calc(var(--orbit-rotate-to) * -1)) } }
    </style>



</head>

<body translate="no">
    <header>
        <div class="orbits">
            <div class="left">
                <div class="outer" data-orbit-rotate="right">
                    <img src="//repo.bfw.wiki/bfwr.........完整代码请登录后点击上方下载按钮下载查看