আমি কীভাবে CSS "রোলার কোস্টার" অ্যানিমেশনটিতে একটি রেখা বক্ররেখা করতে পারি?

15

আমি সিএসএস সহ রোলার কোস্টার স্টাইল অ্যানিমেশন তৈরি করার চেষ্টা করছি।

"কোস্টার "টি যখন লুপের পর্যায়ে থাকে তখন কীভাবে বাঁকানো যায় তা আমি জানতে চাই।

আমি একটি সমস্ত সিএসএস সমাধান সন্ধান করছি তবে জাভাস্ক্রিপ্টের কিছুটা প্রয়োজন থাকলে আমি ঠিক আছি।

এখন পর্যন্ত আমার কোড:

#container {
  width: 200px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  animation: 10s infinite loop;
  animation-timing-function: linear;
}

#coaster {
  width: 100px;
  height: 10px;
  background: lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
}

@keyframes loop {
  from {
    margin-left: -200px;
  }
  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }
  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}
<div id="container">
  <div id="coaster"></div>
</div>
স্নিপেট প্রসারিত করুন

html  css  css-animations  css-transforms 
— মতান সানবিরা
সূত্র

উত্তর:

12

আপনি বিবেচনা করতে পারেন border-radius। এখানে উন্নত করতে পারেন এমন একটি প্রাথমিক উদাহরণ

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

আরেকটি উন্মাদ ধারণা যেখানে আপনি স্বচ্ছ বাঁকা পথের পিছনে একটি আয়তক্ষেত্রাকার আকৃতি সঞ্চার করতে পারেন:

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

কোডের কম এবং স্বচ্ছতার সাথে একটি অনুকূলিত সংস্করণ (এটি বিবেচনা করবে mask)

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

কম পিক্সেল মান এবং সিএসএস ভেরিয়েবল সহ আরও একটি সংস্করণ যেখানে আপনি সহজেই সবকিছু সামঞ্জস্য করতে পারেন।

পুরো পৃষ্ঠায় স্নিপেট চালান এবং সমস্ত কোস্টারদের সাথে মজা করুন!

.box {
  --w:400px; /* Total width of the coaster */
  --h:180px; /* Height of the coaster */
  --b:90px;  /* width of the small bar */
  --t:15px;  /* height of the small bar */
  --c:blue;  /* Color of the small bar */
  
  width:var(--w);
  height:var(--h);
}

.box > div {
  height: 100%;
  position:relative;
  width: calc(50% + var(--h)/2 + var(--b)/2);
  border-radius: 0 1000px 1000px 0;
  animation: hide 3s infinite linear alternate;
  -webkit-mask:
    linear-gradient(#fff,#fff) top left   /calc(100% - var(--h)/2) var(--t),
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   -webkit-mask-repeat:no-repeat; 
   mask:
    linear-gradient(#fff,#fff) top left   /calc(100% - var(--h)/2) var(--t),
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   mask-repeat:no-repeat;
}
.box > div:last-child {
  margin-top:calc(-1*var(--h));
  margin-left:auto;
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.box > div:before {
  content: "";
  position: absolute;
  width: var(--b);
  height: 50%;
  background: var(--c);
  bottom: -25%;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -50%;
}

.box > div:last-child:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(calc(var(--w)/2)) rotate(0deg);
  }
  40% {
    transform: translateX(calc(var(--w)/2)) rotate(-180deg);
  }
  50%,100% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(-180deg);
  }
}

@keyframes hide {
  50% {
    visibility: visible;
  }
  50.1%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}
<div class="box">
<div></div><div></div>
</div>

<div class="box" style="--w:500px;--h:80px;--b:50px;--c:red;--t:5px">
<div></div><div></div>
</div>

<div class="box" style="--w:90vw;--h:200px;--b:100px;--c:purple;--t:20px">
<div></div><div></div>
</div>
স্নিপেট প্রসারিত করুন

কৌশলটি বুঝতে, আসুন মাস্কটি সরিয়ে একটি সাধারণ গ্রেডিয়েন্ট দিয়ে এটি প্রতিস্থাপন করুন এবং লুকান অ্যানিমেশনটি সরিয়ে ফেলুন:

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

গ্রেডিয়েন্টের তৈরি পথটি আমাদের মুখোশ এবং আমরা কেবল সেই অংশটি দেখতে পাব। তারপরে আমরা পথটি অনুসরণ করতে আমাদের আয়তক্ষেত্রটি তৈরি করি এবং কৌশলটি লুপ এফেক্ট তৈরি করতে দুটি প্রতিসাম্য উপাদান থাকে। আড়াল অ্যানিমেশন তাদের একমাত্র দেখার অনুমতি পায় এবং নিখুঁত ওভারল্যাপ একটি ক্রমাগত অ্যানিমেশন তৈরি করবে।

আপনি কোস্টারের জন্য একটি চেনাশোনা চান এমন ক্ষেত্রে এখানে একটি সংস্করণ দেওয়া আছে

.box {
  --w:400px; /* Total width of the coaster */
  --h:180px; /* Height of the coaster */
  --b:90px;  /* width of the small bar */
  --t:15px;  /* height of the small bar */
  --c:blue;  /* Color of the small bar */
  
  width:var(--w);
  height:var(--h);
}

.box > div {
  height: 100%;
  position:relative;
  width: calc(50% + var(--h)/2);
  border-radius: 0 1000px 1000px 0;
  animation: hide 3s infinite linear alternate;
  -webkit-mask:
    radial-gradient(farthest-side at bottom right,transparent calc(100% - var(--t)),#fff 0 100%,transparent 100%) top 0 right calc(var(--h)/2)/calc(var(--h)/2) 50%,
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   -webkit-mask-repeat:no-repeat; 
   mask:
    radial-gradient(farthest-side at bottom right,transparent calc(100% - var(--t)),#fff 0 100%,transparent 100%) top 0 right calc(var(--h)/2)/calc(var(--h)/2) 50%,
    linear-gradient(#fff,#fff) bottom left/calc(100% - var(--h)/2) var(--t),
    radial-gradient(farthest-side at left,transparent calc(100% - var(--t)),#fff 0) right/calc(var(--h)/2) 100%;
   mask-repeat:no-repeat;
}
.box > div:last-child {
  margin-top:calc(-1*var(--h));
  margin-left:auto;
  transform: scaleX(-1);
  animation-direction: alternate-reverse;
}

.box > div:before {
  content: "";
  position: absolute;
  width: var(--b);
  height: 50%;
  background: var(--c);
  bottom: -25%;
  animation: loop 3s infinite linear alternate;
  transform-origin: 50% -50%;
}

.box > div:last-child:before {
  animation-direction: alternate-reverse;
}

@keyframes loop {
  15% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(0deg);
  }
  50%,100% {
    transform: translateX(calc(var(--w)/2 - var(--b)/2)) rotate(-180deg);
  }
}

@keyframes hide {
  50% {
    visibility: visible;
  }
  50.1%,100% {
    visibility: hidden;
  }
}

body {
  background:linear-gradient(to right,yellow,gray);
}
<div class="box">
<div></div><div></div>
</div>

<div class="box" style="--w:500px;--h:80px;--b:50px;--c:red;--t:5px">
<div></div><div></div>
</div>

<div class="box" style="--w:90vw;--h:200px;--b:100px;--c:purple;--t:20px">
<div></div><div></div>
</div>
স্নিপেট প্রসারিত করুন

— তেমনি আফিফ
সূত্র
4

আপনার অনুপ্রেরণার জন্য আপনাকে এবং বিশেষত তেমনী আফিফকে ধন্যবাদ :]

অবশেষে আমি আপনার প্রচুর উত্তরগুলি মিশ্রিত করে border-radiusউপাদানগুলি এবং লুকিয়ে থাকা আরও কিছু এইচটিএমএল ব্যবহার করে আমার মনে হয় যে আমি অ্যানিমেশনটির জন্য একটি দুর্দান্ত সমাধান তৈরি করেছি।

* {
  box-sizing: border-box;
}

#container {
  width: 100px;
  height: 100px;
  margin-top: 50px;
  position: relative;
  animation: 5s infinite loop linear;
}

#coasterLine {
  height: 10px;
  background: lightblue;
  position: absolute;
  z-index: 20;
  bottom: 0;
  animation: 5s infinite c-line linear;
}

#coasterRound {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid transparent 10px;
  border-bottom: solid lightblue 10px;
  position: relative;
  animation: 5s infinite c-round linear;
}

#whiteScreen {
  width: 100%;
  background: white;
  position: absolute;
  z-index: 10;
  top: 0;
  animation: 5s infinite white-screen linear;
}

@keyframes loop {
  0% {
    margin-left: -200px;
  }
  38%,
  43% {
    margin-left: calc(50% - 50px);
  }
  58%,
  63% {
    margin-left: calc(50% - 50px);
  }
  100% {
    margin-left: 100%;
  }
}

@keyframes c-round {
  0%,
  43% {
    transform: rotate(-45deg);
  }
  58%,
  100% {
    transform: rotate(-315deg);
  }
}

@keyframes c-line {
  0%,
  38% {
    left: 0;
    width: 60px;
  }
  43% {
    left: 50px;
    width: 0;
  }
  58% {
    left: 40px;
    width: 0;
  }
  63%,
  100% {
    left: 40px;
    width: 60px;
  }
}

@keyframes white-screen {
  0%,
  38% {
    height: 100%;
    transform: rotate(0deg);
  }
  43% {
    height: 50%;
    transform: rotate(0deg);
  }
  44%,
  57% {
    height: 0;
    transform: rotate(0deg);
  }
  58% {
    height: 50%;
    transform: rotate(180deg);
  }
  63%,
  100% {
    height: 100%;
    transform: rotate(180deg);
  }
}
<div id="container">
  <div id="coasterLine"></div>
  <div id="coasterRound"></div>
  <div id="whiteScreen"></div>
</div>
স্নিপেট প্রসারিত করুন

এটা মহান হয়েছে!

— মতান সানবিরা
সূত্র
0

সত্যিই প্রাকৃতিক border-radiusবলে মনে হচ্ছে না তবে এটি শুরু করার ভাল উপায় বলে মনে হচ্ছে:

#container {
  width: 200px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  animation: 10s infinite loop;
  animation-timing-function: linear;
}

#coaster {
  width: 100px;
  height: 10px;
  background: lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  animation: 10s infinite coasterAnimation;
}

@keyframes loop {
  from {
    margin-left: -200px;
  }

  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }

  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }

  to {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}

@keyframes coasterAnimation {

  29% {
    border-radius: 0;
  }

  30% {
    border-radius: 0 0 50% 50%;
  }

  59% {
    border-radius: 0 0 50% 50%;
  }

  60% {
    border-radius: 0;
  }

  70% {
    border-radius: 0;
  }
}
<div id="container">
  <div id="coaster"></div>
</div>
স্নিপেট প্রসারিত করুন

— johannchopin
সূত্র
0

আমি মনে করি যে নীচের পদ্ধতিরটি কম বেশি সাউন্ড (যদিও আমি এই বিষয়ে প্রথম যে তাড়াতাড়ি এটির বাস্তবায়ন নিখুঁত নয়) agree

রোলারকোস্টার পরিবর্তে একটি প্রতিনিধিত্ব করা হচ্ছে <div>এটি দ্বারা প্রতিনিধিত্ব করা হয় border-bottomএকটি এর <div>।

সেই সীমান্তের নিজস্ব একযোগে অ্যানিমেশনটিতে, ফিরে আসার আগে border-bottom-left-radiusএবং সময়ের সাথে সাথে border-bottom-left-radiusমোড় ।50%0

কাজের উদাহরণ:

#container {
  width: 180px;
  height: 180px;
  position: relative;
  animation: 10s loop-container linear infinite;
}

#coaster {
  width: 180px;
  height: 180px;
  border-bottom: 10px solid lightblue;
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 1px;
  margin: 0 auto;
  animation: 10s loop-coaster linear infinite;
}

@keyframes loop-container {
  0% {
    margin-left: -200px;
  }
  30% {
    margin-left: calc(50% - 75px);
    transform: rotate(0deg);
  }
  60% {
    margin-left: calc(50% - 125px);
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
    margin-left: 100%;
  }
}

@keyframes loop-coaster {
  30% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  31% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 25%;
  }
  35%, 55% {
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  59% {
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 0;
  }
  60% {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
<div id="container">
  <div id="coaster"></div>
</div>
স্নিপেট প্রসারিত করুন

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