主页 / 问题 / 1237355
Accepted
Проста Miha
Asked:2022-01-29 16:22:53 +0000 UTC2022-01-29 16:22:53 +0000 UTC

使用 html 和 css 滚动边框

  • 772

我怎样才能制作这个动画？

动画

到目前为止，我是这样的：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: royalblue;
}

.block {
  width: 800px;
  height: 400px;
  margin: 200px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
  -webkit-box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, .75);
}

.centerBlock {
  width: 410px;
  height: 110px;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, white, grey, grey, black, black);
  z-index: 10;
}

.back {
  width: 400px;
  height: 100px;
  border-radius: 100px;
  background-image: linear-gradient(to right, white, grey, black, black);
  z-index: 15;
}

.bl {
  position: absolute;
  width: 110px;
  height: 110px;
}

.left {
  transform: translateY(-5px) translateX(-5px);
  background-color: black;
  border: 5px solid white;
  border-radius: 50%;
  z-index: 2;
}

.right {
  transform: translateX(155px);
  background-color: black;
  z-index: 2;
  width: 110px;
  height: 110px;
  border-radius: 110px;
  border: 5px solid black;
  border-left: 5px solid white;
  animation: rotate 5s infinite linear;
}

.lineTop {
  position: absolute;
  height: 5px;
  width: 100px;
  transform: translateY(-52.5px) translateX(-100px);
  background-color: white;
  z-index: 10;
  border-radius: 25px;
  animation: anim_top 5s infinite linear;
}

.lineBottom {
  position: absolute;
  height: 5px;
  width: 0;
  transform: translateY(52px) translateX(150px);
  background-color: white;
  z-index: 10;
  border-radius: 25px;
  animation: anim_bot 5s infinite linear;
}

@keyframes rotate {
  0%,
  30% {
    transform: translateX(155px);
  }
  55%,
  100% {
    transform: translateX(155px) rotate(360deg);
  }
}

@keyframes anim_top {
  0% {
    transform: translateY(-52px) translateX(-100px);
  }
  35% {
    transform: translateY(-52px) translateX(120px);
    width: 100px;
  }
  45%,
  100% {
    transform: translateY(-52px) translateX(155px);
    width: 0;
  }
}

@keyframes anim_bot {
  45% {
    width: 0;
    transform: translateY(52px) translateX(150px);
  }
  50% {
    width: 100px;
    transform: translateY(52px) translateX(110px);
  }
  80% {
    transform: translateY(52px) translateX(-110px);
    width: 100px;
  }
  90%,
  100% {
    transform: translateY(52px) translateX(-155px);
    width: 0;
  }
}
<div class="block">
  <div class="centerBlock">
    <div class="lineTop"></div>
    <div class="lineBottom"></div>
    <div class="bl right">
      <div class="border"></div>
    </div>
    <div class="back">
      <div class="bl left"></div>
    </div>
  </div>
</div>

html

2 个回答

  1. Best Answer

    我怎样才能制作这个动画？

    简短的回答

    • 在矢量编辑器中绘制所需的形状
    • 添加 SVG 表示属性fill="url(#grad)" stroke="white" stroke-width="10"
    • 将线分成三个扇区stroke-dasharray
    • 动画扇区旋转stroke-dashoffset

    详细一点，一步一步来：

    第 1 步：绘制形状

    我们看到有必要画两个半圆和两条直线

    1.1 使用椭圆弧命令创建一个半圆- 椭圆弧 (A, a)

    从半径为A50的底部点150.250到顶部点150.150

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
  <path  fill="none" stroke="black" stroke-width="10"
     d="M 150,250 A50,50 0 0 1 150,150" />
</svg>

    1.2 添加水平线h500

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
  <path  fill="none" stroke="black" stroke-width="10"
     d="M 150,250 A50,50 0 0 1 150,150 h500" />
</svg>

    1.3 在坐标650.250 的底部点添加第二个半圆A50.50 0 0 1 650.250

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
  <path  fill="none" stroke="black" stroke-width="10"
     d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250" />
</svg>

    1.4 添加第二条（底部）水平线h -500

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
      <path  fill="none" stroke="black" stroke-width="10"
         d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" />
    </svg>

    图已经准备好了，我们可以在没有矢量编辑器的情况下绘制它！

    步骤 2. 使用将线分成三个扇区stroke-dasharray

    使用该方法getTotalLength()，我们找到了线的总长度——1314px

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
      <path  id="path" fill="none" stroke="black" stroke-width="10"
         d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" />
    </svg>

 <script>
  let total = Math.round(path.getTotalLength()); 
   console.log(total + ` px`); 
</script>

    每个扇区的长度1314 / 3 = 438px

    添加到stroke-dasharray="280,158"，其中第一个数字是破折号的长度，第二个是空格的长度。
    总和应该是：438px

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
      <path  id="path" fill="none" stroke="black" stroke-width="10" stroke-dasharray="280,158" stroke-dashoffset="1314" stroke-lineCap="round"
         d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" />
    </svg>

    第 3 步：为线条的旋转设置动画

    <animate attributeName="stroke-dashoffset" values="1314;0" dur="10s"
  fill="freeze" repeatCount="indefinite" />


    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://www.w3.org/1999/xlink"  width="800" height="400" viewBox="0 0 800 400" style="border:1px solid gray;" > 
      <path  id="path" fill="none" stroke="black" stroke-width="10" stroke-dasharray="280,158"      stroke-dashoffset="1314" stroke-lineCap="round"
         d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" >
           <animate attributeName="stroke-dashoffset" values="1314;0" dur="10s" fill="freeze" repeatCount="indefinite" />
     </path>     
    </svg>

    第 4 步。制作图形细节

    • 添加一个左侧的白色圆圈

    <circle cx="150" cy="200" r="50" fill="#151515" stroke="white" stroke-width="10" />

    • 添加背景和线条渐变

    请参阅代码中的注释。

    .container {
width:75vw;
height:auto;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 <defs>
   <linearGradient id="grad1" x2="1" y2="0">
      <stop offset="0.1" stop-color="white" stop-opacity="0.8"/>
      <stop offset="0.8" stop-color="black" />
      <stop offset="1" stop-color="transparent"/>
    </linearGradient> 
      <linearGradient id="grad2" x2="1" y2="0">
      <stop offset="0.25" stop-color="white"  />
      <stop offset="0.95" stop-color="black"  />
      <stop offset="1" stop-color="transparent" />
      
    </linearGradient>
</defs> 
    <rect width="100%" height="100%" fill="#151515" />
    
    <path fill="url(#grad1)" stroke="none" stroke-width="10"   
     d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" />
      <!-- Трасса движения -->
    <path fill="none" stroke="url(#grad2)" stroke-width="10" stroke-lineCap="round"  stroke-dasharray="657" stroke-dashoffset="250" 
     d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" />
            
    <!-- Анимация 3-х секторов  -->  
      <path  fill="none" stroke="white" stroke-width="10" stroke-lineCap="round" stroke-dasharray="239,199" stroke-dashoffset="1314" d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" >
           <!-- Анимация вращения белой линии -->
         <animate attributeName="stroke-dashoffset" values="1314;0" dur="10s" fill="freeze" repeatCount="indefinite" />
       </path>  
          <!-- Окружность слева     -->
    <circle cx="150" cy="200" r="50" fill="#151515" stroke="white" stroke-width="10" />     
 </svg>
</div>

    • 8

  2. 根据第一个答案，只需进行最小的更改，您就可以制作链条、齿轮等。

    • 使用以下方法将线分成相等的段stroke-dasharray="15.7, 15.7"

    点击开始动画：

    .container {
width:75vw;
height:auto;
}
    <div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 
    <rect width="100%" height="100%" fill="#151515" />
               <!-- Цепь между двумя шестеренками -->
<path  fill="none" stroke="grey" stroke-width="10"
  stroke-dasharray="15.7, 15.7"  d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" > 
  <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" />
</path>     
 </svg>
</div>

    • 以同样的方式，在我们的帮助下，stoke-dasharray我们将圆圈分成相等的部分（牙齿）

    .container {
width:75vw;
height:auto;
}
    <div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 
      <rect width="100%" height="100%" fill="#151515" /> 
    <!-- Левая шестеренка     -->
     <g id="left">
     <circle cx="150" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="150" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
         
    </g>  
               <!-- Цепь между двумя шестеренками -->
    <path  fill="none" stroke="grey" stroke-width="10"  stroke-dasharray="15.7, 15.7" 
        d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" > 
            <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </path>     
 </svg>
</div>

    • 添加对称二档

    .container {
width:75vw;
height:auto;
}
    <div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 
      <rect width="100%" height="100%" fill="#151515" /> 
    <!-- Левая шестеренка     -->
     <g id="left">
      <circle cx="150" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />    
        <circle cx="150" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
          <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" />          
    </g>  
       <!-- Правая шестеренка     -->
 <g id="right">
     <circle cx="650" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="650" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
        
    </g>        
               <!-- Цепь между двумя шестеренками -->
    <path  fill="none" stroke="grey" stroke-width="10"  stroke-dasharray="15.7, 15.7" 
        d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" > 
            <animate attributeName="stroke-dashoffset" values="1314;0" begin="svg1.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </path>     
 </svg>
</div>

    单击时更改旋转的示例

    让我们把动画复杂一点：当你点击左边的齿轮时，链条和齿轮顺时针旋转。当您单击右齿轮时，旋转为逆时针方向。

    改变旋转方向是通过改变值来实现的：values="1314;0"- 正向和 values="0;1314"- 反向

    .container {
width:75vw;
height:auto;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 
    <rect width="100%" height="100%" fill="#151515" />
      
          <!-- Окружность слева     -->  
           
     <g id="left">
     <circle cx="150" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="150" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
         <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </g>  
        <!-- Окружность справа      -->  
           
     <g id="right">
     <circle cx="650" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="650" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
         <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </g>    
     <path  fill="none" stroke="grey" stroke-width="10"  stroke-dasharray="15.7"  d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" > 
           <!-- Анимация вращения белой линии -->
         <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
            <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
       </path>   
   <text x="121" y="205" font-size="18px" fill="white" pointer-events="none"> Вперёд </text> 
     <text x="625" y="205" font-size="18px" fill="white" pointer-events="none"> Назад </text>
       
 </svg>
</div>

    3d 尝试

    .container {
width:75vw;
height:auto;
}
#p1{
transform: rotateX(24deg) rotateY(-10deg) rotateZ(12deg) skew(-15deg);
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 800 400" style="border:1px solid gray;" > 
 
    <rect width="100%" height="100%" fill="#151515" />
      
          <!-- Окружность слева     -->  
    <g   id="p1" > 
     <g id="left">
     <circle cx="150" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="150" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
         <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </g>  
        <!-- Окружность справа      -->  
           
     <g id="right">
     <circle cx="650" cy="200" r="40" fill="#151515" stroke="white" stroke-width="10"  />     
    <circle cx="650" cy="200" r="50" fill="none" stroke="white" stroke-width="10" stroke-dasharray="15.7" />  
       <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
         <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
    </g>    
     <path  fill="none" stroke="grey" stroke-width="10"  stroke-dasharray="15.7"  d="M 150,250 A50,50 0 0 1 150,150 h500 A50,50 0 0 1  650,250 h-500" > 
           <!-- Анимация вращения белой линии -->
         <animate attributeName="stroke-dashoffset" values="1314;0" begin="left.click" dur="10s" fill="freeze" repeatCount="indefinite" /> 
            <animate attributeName="stroke-dashoffset" values="0;1314" begin="right.click" dur="10s" fill="freeze" repeatCount="indefinite" />
       </path>   
   <text x="121" y="205" font-size="18px" fill="white" pointer-events="none"> Вперёд </text> 
     <text x="625" y="205" font-size="18px" fill="white" pointer-events="none"> Назад </text>
    </g>   
 </svg>
</div>

    • 4

相关问题