এসভিজি সিএসএস একাধিক অ্যানিমেশন

9

আমি একটি ট্রেজার ম্যাপ অ্যানিমেশন তৈরি করেছি, প্রথমত, এটি হালকা ধূসরতে পথ প্রদর্শন করবে তবে অ্যানিমেশন শুরু হওয়ার সাথে সাথে আমি চাই যে হালকা ধূসর ড্যাশগুলি অদৃশ্য হয়ে যাবে বা ফিল অ্যানিমেশন হিসাবে "কালো" রঙে ফিরে যেতে চাই I হালকা ধূসর রঙের ড্যাশগুলি পাওয়ার জন্য লড়াই করে "। পদক্ষেপ" অদৃশ্য হওয়ার জন্য ফিল অ্যানিমেশনগুলি সেই অবস্থানটি অতিক্রম করতে চলেছে।

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.road {
  stroke-dasharray: 744;
  stroke-dashoffset: -744;
  animation: draw-road 10s infinite;
}

.steps {
  stroke-dasharray: -744;
  stroke-dashoffset: 744;
  animation: draw-steps 10s reverse;
}

@keyframes draw-road {
  0% {
    stroke-dashoffset: 744;
    stroke: #000000;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #000000;
  }
}

@keyframes draw-steps {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <style>
        .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
      </style>
      <g id="Layer_1">
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" class="road" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073"/>
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073" class="steps"/>
        <path class="st0" d="M273.84 65.49c1.64-.16 3.3-.32 4.98-.48"/>
        <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
      </g>
    </svg>
স্নিপেট প্রসারিত করুন

css  svg 
— saiyan101
সূত্র
1
class="road"গোষ্ঠীর শেষে পথটি সরান ।
— এনেক্সানেট

উত্তর:

4

সিএসএস ব্যবহার করে সমাধান

svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
} 

.road{
  fill:none;
  stroke:black;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
}
.steps{
   fill:none;
   stroke:#999;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
  mask:url(#msk1);
      }


#stepMask{
   fill:none;
   stroke:black;
   stroke-width:2;
   stroke-dashoffset: 744;
   stroke-dasharray:744,744;
   animation: draw-steps 10s linear infinite;
}
@keyframes draw-steps {
100% {stroke-dashoffset:0;}
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <style>
    .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
  </style>
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
			  
	   </mask>
	</defs>
  <g id="Layer_1">
     <path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
     <path class="steps"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
   <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
  </g>
</svg>
স্নিপেট প্রসারিত করুন

এসভিজি মাস্ক ব্যবহার করে সমাধান।

  • নীচে একটি কালো রেখা আছে class="road"
  • উপরে একটি ধূসর রেখা আছে class="steps"
  • ধূসর রেখায় একটি মাস্ক প্রয়োগ করা হয় যা সরে যাওয়ার পরে, কালো রেখাটি দেখায় ধূসর রেখাটি মুছে দেয়

এটি কালো দিয়ে ধূসর রেখাটি পূরণের প্রভাব তৈরি করে

কোড স্নিপেট দেখান

— Alexandr_TT
সূত্র
2

রাস্তায় ট্রেজার সন্ধানকারী অ্যানিমেশন

এখানে চিত্র বর্ণনা লিখুন

লেখক সম্ভবত ট্রেজার হান্টের রুটের নীচে কোনও মানচিত্র বা ল্যান্ডস্কেপ যুক্ত করতে চাইবেন। পর্দার রেজোলিউশন পরিবর্তন করার সময় রুট এবং চিত্রটি অভিযোজিত হতে এবং লেআউটটি লঙ্ঘন না করার জন্য আপনাকে এসভিজির অভ্যন্তরে চিত্রটি যুক্ত করতে হবে

<image xlink:href="https://i.stack.imgur.com/ncK6A.jpg" width="100%" height="100%" />

আমি রাস্তা দিয়ে হাঁটতে থাকা একজন ব্যক্তির একটি অ্যানিমেটেড ফিগার যুক্ত করেছি 

<use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:#990E0E; fill:black;"> 
    <animateMotion id="an2"
      begin="0s"
      dur="40s"
      repeatCount="indefinite"  >
         <mpath xlink:href="#steps"/>
    </animateMotion>    

   </use>

রাস্তা রঙিন অ্যানিমেশন এবং মানব আন্দোলন অ্যানিমেশন সমন্বয় উভয় অ্যানিমেশন একই সময়কাল দ্বারা অর্জন করা হয়। 

.container {
 width:100%;
  height:100%;
}
svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
 
} 

.road{
  fill:none;
  stroke:blue;
  stroke-dasharray:12 10;
  stroke-dashoffset:0;
  stroke-width:3;
}
#steps{
   fill:none;
   stroke:white;
  stroke-dasharray:12 10;
  stroke-dashoffset:0;
  stroke-width:3;
   
}

#stepMask{
   fill:none;
   stroke:black;
   stroke-width:3;
   stroke-dashoffset: 1887;
   stroke-dasharray:1887,1887;
 
  
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1200 890" >
  
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" >
		   <animate attributeName="stroke-dashoffset" begin="0s" dur="40s" values="1887;0" repeatCount="1" fill="freeze"/> 
		  </path> 
	   </mask> 
	    <g id="Man" transform="translate(0,0) scale(1,-1)">
    <path   fill="none">
         <animate
          attributeName="d"
          begin="0s"
          dur="0.4s"
          repeatCount="indefinite"
          values="M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0;
                  M 0,0 0,10 0,0 M0,10 0,16 l 0,-5 M0,16 l 0,-5 M0,16 c4,4 -4,4 0,0;
                  M-3,0 0,10 3,0 M0,10 0,16 l 4,-5 M0,16 l-4,-5 M0,16 c4,4 -4,4 0,0"/>
    </path> 
	  </g> 
	</defs> 
	 <image xlink:href="https://i.stack.imgur.com/Gmr13.jpg"
	 width="100%" height="100%" />
  <g id="Layer_1">
   
   <path class="road" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
   <path id="steps" mask="url(#msk1)" d="m398.8 299.8c0 0 70.7-30.6 108.4-33.9 44.2-3.9 88.7 7.5 132 17 73.3 16 144.1 42.3 215 66.9 22.3 7.8 45.8 13.2 66 25.5 14.7 8.9 32.8 17.8 38.7 33.9 5.1 14-6.6 29.4-6.6 44.3 0.1 76 68.8 157.8 33.9 225.3-25.2 48.8-97.9 50-147.1 74.5-32.6 16.2-62.8 38.9-98.1 48.1-34.1 8.9-70.4 6.9-105.6 5.7-72.5-2.5-163.4 23.6-215.9-26.4-31.9-30.3-9.5-88.1-22.6-130.1-8-25.8-9.6-61.8-33.9-73.5-54.1-26.2-175.4 42.4-175.4 42.4" />
   
  
  </g>  
  
    <use xlink:href="#Man" transform="translate(0,0) scale(2.5)" style="stroke:blue; fill:black;"> 
     <animateMotion id="an2"
       begin="0s"
       dur="40s"
       repeatCount="1"  >
          <mpath xlink:href="#steps"/>
     </animateMotion>	 

	</use>	
</svg>
</div>
স্নিপেট প্রসারিত করুন

— Alexandr_TT
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.