css实现彩色原子围绕图片360旋转效果代码-html代码-BFW代码库

css实现彩色原子围绕图片360旋转效果代码

代码语言：html

所属分类：动画

代码描述：css实现彩色原子围绕图片360旋转效果代码

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

<html>

<head>
    <style>
        body {
          background: #333;
          display: flex;
          height: 100vh;
          justify-content: center;
          align-items: center;
          perspective: 1200px;
        }
        
        .box {
          position: relative;
          transform-style: preserve-3d;
          animation: hovering 1s infinite alternate-reverse ease-in-out;
        }
        
        .logo {
          display: block;
          margin-top: 50px;
          margin-left: 50px;
          width: 300px;
          height: 300px;
          position: relative;
        }
        .logo:after {
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          background: url("//repo.bfw.wiki/bfwrepo/icon/60b2c443baaca.png") no-repeat 50% 50%;
          background-size: contain;
          width: 300px;
          height: 300px;
          margin-left: -25px;
          transform: scale(0.9);
          transition: 1000ms ease-out;
        }
        .logo:hover:after {
          transform: scale(1);
        }
        
        .ring {
          pointer-events: none;
          width: 400px;
          height: 400px;
          position: absolute;
          top: 0;
          left: 0;
          transform-style: preserve-3d;
        }
        .ring .particle {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          border: 10px solid;
          width: 400px;
          height: 400px;
          border-radius: 50%;
          border-top: 0;
          border-left: 0;
          border-bottom: 0;
          box-shadow: 0 0 1px 0px currentColor;
          transform-style: preserve-3d;
        }
        .ring .particle:after {
          position: absolute;
          top: 100%;
          left: 50%;
          display: block;
          content: "";
          width: 5px;
          height: 5px;
          background: currentColor;
          border-radius: 50%;
          box-shadow: 0 0 5px 0px white;
        }
        
        .ring1 {
          color: #00ccff;
          animation: rotateAnimate1 16s infinite reverse linear;
        }
        .ring1 .particle {
          -webkit-animation: rotateAnimate1 2s infinite linear;
                  animation: rotateAnimate1 2s infinite linear;
        }
        
        .ring2 {
          color: #fffb19;
          animation: rotateAnimate1 16s infinite reverse linear;
        }
        .ring2 .particle {
          margin-top: 15px;
          margin-left: 15px;
          width: 370px;
          height: 370px;
          -webkit-animation: rotateAnimate2 2s infinite linear;
                  animation: rotateAnimate2 2s infinite linear;
        }
        .ring2 .particle:after {
          top: 0%;
        }.........完整代码请登录后点击上方下载按钮下载查看