ภาพเคลื่อนไหว CSS: บทนำและตัวอย่าง

เอฟเฟกต์ภาพเคลื่อนไหวพื้นฐานที่สุดใน CSS สามารถทำได้ผ่านคุณสมบัติ เช่น transform และ transition อย่างไรก็ตาม แบบร่างการทำงานของ CSS Animations ระดับ 1 ให้สภาพแวดล้อมที่ซับซ้อนมากขึ้นโดยใช้คุณสมบัติ animation และ @keyframes เพื่อให้ได้เอฟเฟกต์แอนิเมชั่นถาวร สิ่งนี้เข้าใจได้ดีที่สุดผ่านตัวอย่างที่ชัดเจน

การระบุกฎแอนิเมชั่นโดยใช้ @keyframes

กฎ @keyframes ใช้เพื่อระบุพฤติกรรมของแอนิเมชันที่เราต้องการนำไปใช้กับตัวระบุแอนิเมชั่นในเลย์เอาต์ของหน้า ตัวระบุถูกระบุผ่าน animation-name หรือโดยใช้ animation: name; ชวเลข

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

ในบริบทนี้ ตัวอย่างด้านบนจะเปลี่ยน background-color ขาวเป็นสีดำตลอดระยะเวลาของแอนิเมชัน from หมายถึงจุดเริ่มต้น (0%) และหมาย to จุดสิ้นสุด (100%) ดังนั้น กฎสามารถเขียนใหม่ด้วยค่าเปอร์เซ็นต์ได้

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

ด้วยตัวของมันเอง สิ่งนี้จะไม่ทำอะไรเลยเว้นแต่เราจะระบุองค์ประกอบที่เราต้องการทำให้เคลื่อนไหว นอกจากนี้ คุณต้องระบุ animation-duration เนื่องจากค่าเริ่มต้นคือ 0

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

จากนั้นเราสามารถเรียกคอนเทนเนอร์ของเราโดยใช้ div และผลลัพธ์จะเป็นดังนี้:

โดยทั่วไป แอนิเมชั่น CSS ส่วนใหญ่ที่เขียนด้วย CSS ล้วนๆ ใช้ชวเลขเพราะจะช่วยประหยัดการเขียนลอจิกแอนิเมชั่นหลายบรรทัด ดังนั้น นี่คือข้อมูลอ้างอิงสำหรับค่าคุณสมบัติ animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

อ่านเพิ่มเติม

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแอนิเมชั่น CSS ในเชิงลึก ต่อไปนี้คือแหล่งข้อมูลที่ฉันแนะนำ:

• การอ้างอิง CSS ของ Codrops – นี่คือข้อมูลอ้างอิงที่ครอบคลุมซึ่งเขียนและจัดระเบียบโดย Sara Soueidan (@SaraSoueidan) และมีตัวอย่างเชิงลึกเกี่ยวกับวิธีการทำงานของคุณสมบัติ CSS บางอย่าง
• แอนิเมชั่น CSS ของ MDN – บทแนะนำเกี่ยวกับแอนิเมชั่น CSS ในรูปแบบเอกสารที่ครอบคลุมบนหน้า MDN Web Docs
• Introduction to cubic-bezier() – บทความเชิงลึกที่เขียนโดย Temani Afif (@ChallengesCss) สำหรับ CSS-Tricks เกี่ยวกับการใช้คุณสมบัติ cubic-bezier() เพื่อสร้างแอนิเมชั่น CSS ขั้นสูง

ตัวอย่างของ CSS Animations

วิธีที่ดีที่สุดในการเรียนรู้ทุกสิ่งคือผ่านตัวอย่าง ส่วนต่อไปนี้ทุ่มเทให้กับเอฟเฟกต์ต่างๆ ที่ทำได้ผ่านคุณสมบัติแอนิเมชั่น CSS

สิ่งสุดท้าย! ตัวอย่างแอนิเมชั่นด้านล่างจำนวนมากมีโค้ดที่เกี่ยวข้องอยู่เล็กน้อย ดังนั้น ฉันได้เพิ่ม โอเวอร์โฟลว์ความสูงสูงสุด ในบทความนี้เพื่อเปิดใช้งานแถบเลื่อน คุณยังสามารถวางเมาส์เหนือข้อมูลโค้ดแต่ละรายการแล้วคัดลอกไปยังคลิปบอร์ดเพื่อนำเข้าสู่โปรแกรมแก้ไขโค้ดของคุณ

คลื่น

แอนิเมชั่นคลื่นถูกสร้างขึ้นโดยการวาดเส้นทาง SVG สำหรับรูปแบบคลื่นก่อน แล้วจึงกำหนด ID ให้กับมัน หลังจากนั้น เราระบุคลาส nth-child สี่คลาสด้วยตัวแปร animation-delay animation-duration และระยะเวลาภาพเคลื่อนไหวที่กำหนดเอง ตัวแปรแต่ละตัวแสดงถึงคลื่นแต่ละอันภายในแอนิเมชั่น และแต่ละคลื่นสามารถกำหนดสไตล์ได้อย่างอิสระ

ข้อดีของการกำหนดรูปแบบด้วย SVG คือโค้ดนี้ใช้ซ้ำได้ง่าย

หากคุณดูเส้นทางที่เราวาด เราจะระบุเลเยอร์ที่แตกต่างกันสี่ชั้นสำหรับ wave (โดยใช้แกนที่กำหนดเอง) จากนั้นอ้างอิง #wave-pattern id ที่เราตั้งค่าสำหรับเส้นทางเริ่มต้น นี่คือที่ที่คุณสามารถเปลี่ยนลักษณะสีของแต่ละคลื่นได้

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

กำลังโหลดข้อความ

เอฟเฟกต์การโหลดนี้ค่อนข้างง่ายต่อการใช้งาน เนื่องจากใช้คุณสมบัติแอนิเมชั่นที่ใช้งานได้จริงเพียงไม่กี่อย่าง ขั้นแรก คุณต้องการระบุค่า content: attr() ซึ่งคุณนำไปใช้กับองค์ประกอบข้อความที่คุณต้องการทำให้เคลื่อนไหว หลังจากนั้น คุณระบุแอนิเมชั่นเอง ซึ่งในกรณีของเราคือ animation: loading 5s linear infinite; .

ระยะเวลาของเอฟเฟกต์การโหลดสามารถแก้ไขได้โดยการเปลี่ยนคุณสมบัติ 5s และสุดท้าย เราใช้ @keyframes เพื่อเรียกแอนิเมชั่นการโหลดและเปลี่ยนความกว้างจาก 0% เป็น 100% ในช่วง 5 วินาทีนั้น ยิ่งค่าของระยะเวลาของแอนิเมชั่นสูงเท่าไหร่ เอฟเฟกต์การโหลดก็จะช้าลงเท่านั้น

กรณีการใช้งานเฉพาะสำหรับแอนิเมชั่นเช่นนี้คือเอฟเฟกต์การเปลี่ยนภาพสำหรับการโหลดหน้าเว็บ แต่ยังเป็นโซลูชันที่เชื่อถือได้สำหรับโครงการแอปพลิเคชันเมื่อคุณไม่ต้องการพึ่งพาไลบรารีใดๆ

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

คลื่นข้อความ

สิ่งแรกที่คุณจะสังเกตเห็นเกี่ยวกับแอนิเมชั่นนี้คือความ ลื่นไหล สิ่งนี้เป็นไปได้เพราะเราใช้ฟังก์ชัน calc() เพื่อคำนวณการเปลี่ยนแปลงแต่ละครั้งทางคณิตศาสตร์ เนื่องจากเราเขียนแอนิเมชั่นด้วย CSS ล้วนๆ เราจึงต้องใช้อิลิเมนต์ส span นหลายตัวเพื่อระบุตัวอักษรแต่ละตัวต่อเนื่องกันในแอนิเมชั่น

สำหรับการปรับเปลี่ยนความลึกของคลื่น ขั้นแรก คุณสามารถเปลี่ยนระยะเวลาจาก 3s เป็นจำนวนที่น้อยกว่าหรือมากกว่านั้นได้ สูงหมายถึงเอฟเฟกต์คลื่นจะช้าลงและในทางกลับกัน และภายใน @keyframes คุณสามารถเปลี่ยนข้อกำหนด -24px เพื่อเปลี่ยนความสูงของคลื่นได้

ยิ่งค่าลบสูงเท่าใด ผลกระทบของคลื่นก็จะยิ่งเด่นชัดมากขึ้นเท่านั้น

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

เอฟเฟกต์พัลส์ / ระลอกคลื่น

เราเริ่มต้นด้วยการสร้างคอนเทนเนอร์สำหรับวงกลมที่เราต้องการใช้เอฟเฟกต์ นี่เป็นข้อมูลเฉพาะสำหรับการสาธิต แต่คุณสามารถใช้รหัสซ้ำสำหรับองค์ประกอบอื่นๆ บนหน้าเว็บของคุณได้ หลังจากนั้น เราสร้างคลาสชื่อ .circle ซึ่งจะทำหน้าที่เป็นเอฟเฟกต์ระลอกคลื่นแบบเคลื่อนไหว

คุณสมบัติเด่นสองอย่างที่เราใช้ในคลาสนี้คือ opacity: 0.5; และ animation: ease-out; . ความทึบคือสิ่งที่สร้างภาพลวงตาของการมีคลื่น/ชีพจร และการเปลี่ยนการคลายตัวทำให้ระลอกคลื่นเหล่านั้นคลายออกจากภาชนะเดิม

ต่อไป เราใช้คลาส .circle และนำไปใช้กับคุณสมบัติ nth-of-type() สำหรับตัวอย่างนี้ เราใช้วงกลม 3 วง ซึ่งช่วยให้ออกจากคอนเทนเนอร์เดิมได้ง่ายขึ้น ในการเรียก nth-of-type เราใช้ animation-delay ด้วยค่า -0.5s;-1s;-1.5s ยิ่งค่าลบสูงเท่าไร เอฟเฟกต์ก็จะยิ่งใช้เวลานานขึ้นเท่านั้น

และสุดท้าย เราใช้ @keyframes กับแอนิเมชั่นพัลส์ที่เราระบุ ในตัวอย่างนี้ เราใช้คุณสมบัติ transform: scale() สิ่งนี้กำหนดขนาดของพัลส์สำหรับแอนิเมชั่นแต่ละรายการ ยิ่งค่าสูงเท่าไหร่ ระลอกคลื่นที่ส่งออกก็จะยิ่งมากขึ้นเท่านั้น

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

เคาน์เตอร์ (ตัวเลข)

คุณสมบัติตัวนับนั้นมองข้ามได้ง่ายเพราะโดยปกติคุณเพิ่มตัวเลขให้กับองค์ประกอบบางอย่างด้วยมือ อย่างไรก็ตาม มีประโยชน์เมื่อคุณต้องการทำการมอบหมายแบบซ้อนในเชิงลึกให้กับรายการเมนูหรือหน้าเอกสารขนาดใหญ่

นอกจากนี้ คุณสามารถรวมตัวนับอัตโนมัติสำหรับหัวข้อโพสต์ในบล็อก เช่น คุณกำลังเขียนรีวิวเกี่ยวกับเครื่องมือต่างๆ และเหนือสิ่งอื่นใด เคาน์เตอร์สามารถจัดสไตล์ให้มีเอกลักษณ์เฉพาะตัว เพื่อให้คุณมีอิสระในการออกแบบมากขึ้น

แต่สำหรับการสาธิตนี้ – เรากำลังมุ่งเน้นไปที่การใช้คุณสมบัติตัว counter เพื่อสร้างเอฟเฟกต์ตัวนับอัตโนมัติ ดังนั้น มาเจาะลึกและทำความเข้าใจว่ามันทำงานอย่างไร สำหรับตัวอย่างนี้ ก่อนอื่นเราสร้างคอนเทนเนอร์ที่จะมีแอนิเมชั่นตัวนับ คุณสามารถปรับแต่งสิ่งนี้ได้ตามที่คุณต้องการ ต่อไป เราสร้าง .count-numbers ซึ่งรวมถึงไวยากรณ์แอนิเมชั่น ในกรณีนี้ มันคือ animation: count-numbers 10s linear infinite forwards; .

ในการแยกย่อย เราระบุชื่อสำหรับแอนิเมชันของเรา เราตั้งระยะเวลาเป็น 10 วินาที และตั้ง ทิศทางของแอนิเมชัน ให้เป็นปกติเพราะเราไม่ต้องการให้นับถอยหลังจาก 10 แม้ว่าคุณสามารถตั้งค่าเป็น ทางเลือก หากคุณต้องการให้ตัวนับของคุณนับถอยหลังเช่นกัน

ต่อไป เราระบุคลาสใหม่ที่เรียกว่า .count-numbers::before ซึ่งเราใช้ตั้งชื่อตัวนับของเรา ในกรณีนี้ content: counter(count); . นี่เป็นสิ่งสำคัญเพราะขั้นตอนต่อไปคือการใช้ counter-name เพื่อทำให้เอฟเฟกต์เคลื่อนไหวผ่าน @keyframes

ขั้นตอนสุดท้ายคือการเขียนข้อกำหนดของเราสำหรับแอนิเมชั่นที่จะแสดง ในการสาธิตของเรา เรานับตั้งแต่ 1 ถึง 10 ดังนั้นเราจึงระบุค่า @keyframes ของเราจาก 0% ถึง 100% โดยเพิ่มขึ้นทีละ 10% การเพิ่มขึ้นแต่ละครั้งประกอบด้วยคำสั่งการเพิ่มขึ้นเคาน์เตอร์ที่ใช้ชื่อนับของเรา: counter-increment: count 0; .

ดังนั้น ที่ 0% การเพิ่มของเราถูกกำหนดเป็น 0 และที่ 10% จะถูกตั้งค่าเป็น 1 เพื่อฉายเอฟเฟกต์ของตัวนับ

นอกจากนี้ ให้ลองเปลี่ยน content: counter(count); ข้อกำหนดสำหรับ เนื้อหา: ตัวนับ (นับ, โรมันบน); และดูว่าเกิดอะไรขึ้น!

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

ลูกเด้ง

เราเริ่มต้นด้วยการสร้างคอนเทนเนอร์สำหรับลูกบอลของเรา ในกรณีนี้คือ .ball-container

ต่อไป เราระบุขนาดของลูกบอลและลักษณะของลูกบอลโดยใช้สีพื้นหลังและเอฟเฟกต์เงาผสมกัน ในการสาธิตของเรา เราได้เพิ่มเอฟเฟกต์ที่สว่างกว่า แต่คุณสามารถปรับเปลี่ยนสิ่งนี้ได้ตามความต้องการของคุณ และสุดท้าย เราระบุแอนิเมชั่น ในกรณีนี้ เราตั้งระยะเวลาเป็น 5 วินาที และปรับใช้ ease-in-out ซึ่งหมายความว่าการเปลี่ยนแปลงมีทั้งการเริ่มต้นและสิ้นสุดที่ช้า

หลังจากที่ดึงลูกบอลและตั้งค่าแอนิเมชั่นแล้ว เราสามารถเขียนกฎ @keyframes ของเราได้ เพื่อให้บรรลุผลการตีกลับ เราใช้ transform: translatey(); โดยเพิ่มขึ้น 50% ดังนั้น 0% ถึง 50% ถึง 100% เน้นที่ 50% เพราะที่นี่เรากำหนดความสูงของการตีกลับโดยการระบุ transform: translatey(-50px); – การเด้ง/ลอยจะมีความสูง 50px (เทียบกับคอนเทนเนอร์) ยิ่งตัวเลขติดลบมากเท่าไหร่ ลูกบอลก็จะยิ่งเด้งสูงขึ้นเท่านั้น

ในทำนองเดียวกัน การระบุจำนวนที่น้อยกว่าจะลดขนาดของการตีกลับ

ส่วนสุดท้ายคือการเพิ่มเงา แม้ว่าคุณสามารถลบส่วนนี้ออกได้เนื่องจากจะไม่มีผลกับแอนิเมชั่นของลูกบอล ความแตกต่างเพียงอย่างเดียวของเงาคือเราใช้คุณสมบัติ transform: scale() เพื่อปรับขนาดเงาในบริบท 2 มิติ เราตั้งค่าตามระดับของผลกระทบที่เราต้องการทำให้สำเร็จ

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

พลิกเหรียญ

สิ่งที่ฉันชอบเกี่ยวกับแอนิเมชั่นนี้คือเราสามารถตั้งค่ารัศมีการหมุนที่แม่นยำอย่างเหลือเชื่อเพื่อให้ได้เอฟเฟกต์ที่รู้สึกเหมือนเหรียญกำลังพลิกอย่างแท้จริง ดังนั้น ในการเริ่มต้น คุณจะต้องมี 2 ภาพ (ฉันกำลังใช้ SVG สำหรับการสาธิตนี้ แต่ภาพถ่ายปกติก็ใช้ได้ดีเช่นกัน เพียงตรวจสอบให้แน่ใจว่าได้ใช้คลาสที่ถูกต้องกับแต่ละภาพ) และตั้งค่าเป็น opacity: 0; . เราตั้งค่าเป็น 0 เพราะหลังจากนั้น เราใช้ @keyframes เพื่อเปลี่ยนความทึบเพื่อให้รูปภาพปรากฏในตำแหน่งบางตำแหน่งระหว่างแอนิเมชัน

คลาส . .image-container ใช้เพื่อระบุขนาดของรูปภาพภายในเหรียญ ตรวจสอบให้แน่ใจว่าคุณได้ระบุสิ่งนี้สำหรับรูปภาพจริงตามที่แสดงในตัวอย่างด้านล่าง ต่อไปเราจะระบุ .coin-style ซึ่งเป็นส่วนนอก (ตัวเหรียญเอง) ในทางเทคนิค คุณสามารถตั้งค่านี้ให้โปร่งใสได้ แต่เพื่อการสาธิต เราจะทำให้มองเห็นได้

แนวคิดหลักสำหรับ .coin-style คือวิธีที่เราเพิ่มแอนิเมชั่น ซึ่งในกรณีนี้คือ: แอนิเมชั่น: coin-flip 1.25s ลูกบาศก์เบซิเยร์ (0.93, 0.05, 0.9, 0.71) สลับกันไม่สิ้นสุด .

จุดที่น่าสนใจคือข้อกำหนด cubic-bezier() ซึ่งทำให้เรามีเอฟเฟกต์เส้นโค้งที่หมุนได้สำหรับที่เก็บเหรียญ แทบจะเป็นไปไม่ได้เลยที่จะเขียนด้วยตัวเอง ดังนั้นคำแนะนำของฉันคือการใช้เครื่องมือสร้างใดๆ เพื่อสร้างเอฟเฟกต์เส้นโค้งที่ต้องการ

และสุดท้าย ภายใน @keyframes ของเรา เราใช้ scaleX() เพื่อปรับขนาดรูปลักษณ์ของเหรียญบนพื้นฐาน x-axis แม้แต่การเปลี่ยนแปลงค่าที่ให้มาเพียงเล็กน้อยที่สุด (ในการสาธิตนี้) ก็จะปรับเปลี่ยนลักษณะที่ปรากฏของ "พลิก"

ฉันคิดว่าการใช้งานด้านล่างใกล้จะสมบูรณ์แบบแล้ว แต่บางทีคุณอาจจะทำได้ดีกว่านี้ก็ได้!

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

สไลด์อิน

เพื่อให้แอนิเมชั่นใช้งานได้ เราใช้ animation: ease-out; ทำงานร่วมกับค่าตำแหน่งลบภายใน @keyframes ในตัวอย่างนี้ เราระบุ 0% {opacity: 0;left: -700px;} ซึ่งทำให้องค์ประกอบการเลื่อนเข้าของเรามองไม่เห็นในตอนเริ่มต้น แต่ยังวางตำแหน่ง 700px ไว้นอกคอนเทนเนอร์ด้วย

หลังจากนั้น เราระบุ 100% {opacity: 1;left: 0;} ซึ่งเมื่อภาพเคลื่อนไหวของเราสิ้นสุด (เราตั้งค่าเป็น 2 วินาที) จะกลับมามองเห็นได้ตามปกติ และจัดตำแหน่งองค์ประกอบของเรากลับไปที่ตำแหน่งสัมพัทธ์

สิ่งที่น่าสนใจที่ควรทราบคือเอฟเฟกต์นี้ใช้งานได้ใน ทุก ทิศทาง

หากคุณต้องการเปลี่ยนเอฟเฟกต์การเลื่อนเข้าให้ปรากฏจากด้านขวา คุณต้องเปลี่ยน ทางซ้าย:; ค่าไป ทางขวา:; และในทางกลับกันสำหรับตำแหน่งเช่นบนและล่าง คุณยังสามารถชะลอการเคลื่อนไหวโดยปรับระยะเวลาที่องค์ประกอบจะเลื่อนเข้า

ค่าที่สูงขึ้นจะทำให้แอนิเมชั่นช้าลง

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

เอฟเฟกต์หยด

ก่อนอื่น Blob คืออะไร? ดังที่ Ian Latchmansingh กล่าวไว้ “The Blob เป็นรูปทรงอสัณฐานเทียมปลอม ซึ่งมักใช้เพื่อยึดหน้าที่เชื่อมโยงไปถึงด้วยสายตา มักจะทำหน้าที่เป็นหน้ากากหรือฉากหลังสำหรับภาพประกอบ ประมาณ 90% ของเวลาที่ Blob เต็มไปด้วยการไล่ระดับสีและอยู่บนเลเยอร์ต่ำสุดของการออกแบบ” . แน่นอนว่ามันเป็นหนึ่งในรูปแบบทั่วไปในการออกแบบเว็บสมัยใหม่ แต่เราจะทำให้เคลื่อนไหวได้อย่างไร

เราเริ่มต้นด้วยการสร้างคอนเทนเนอร์เอฟเฟกต์หยดและระบุองค์ประกอบช่วงแยก 3 รายการภายในคอนเทนเนอร์ เราทำสิ่งนี้เพราะว่าจริงๆ แล้วเรา "วาด" หยดเองโดยใช้คุณสมบัติเส้นขอบและรัศมีเส้นขอบร่วมกัน

เพื่อให้ได้เอฟเฟกต์ที่หลากหลาย เราใช้ nth-child เพื่อจัดรูปแบบแต่ละองค์ประกอบแยกกัน หากคุณต้องการทำตัวให้เก๋ไก๋ อย่าลังเลที่จะเปลี่ยนคุณสมบัติเปอร์เซ็นต์เพื่อปรับลักษณะหยด

แอนิเมชั่นทำได้โดยใช้คุณสมบัติ transform: rotate() ภายในข้อกำหนด @keyframes เราตั้งค่าไว้ที่ 0 ถึง 360 องศา เนื่องจากจะให้ผลถาวร การซ้อนทับสีทำได้ผ่าน :hover และให้เรากำหนดสีพื้นหลังที่กำหนดเองได้ นอกจากนี้ เรายังสร้างคอนเทนเนอร์แยกต่างหากภายใน Blob เองด้วย ซึ่งจะทำให้คุณสามารถจัดรูปแบบส่วนต่างๆ ของเลย์เอาต์หน้าเว็บของคุณเพื่อให้มีเอฟเฟกต์แอนิเมชั่นเฉพาะนี้ได้

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

สลับข้อความ

โดยทั่วไปแล้วเอฟเฟกต์แอนิเมชั่นจะสงวนไว้สำหรับการออกแบบเว็บที่สร้างสรรค์ และในกรณีนี้ เอฟเฟกต์การสลับข้อความนี้จะช่วยสร้างความประทับใจแรกพบแก่ผู้เยี่ยมชมเว็บไซต์ของคุณ เหมาะอย่างยิ่งสำหรับการแนะนำส่วนหัวหรือปรับแต่งเอง สามารถใช้เพื่อแสดงคุณลักษณะของผลิตภัณฑ์ ฯลฯ

สิ่งแรกที่เราทำคือสร้างคอนเทนเนอร์สำหรับเอฟเฟกต์จริง หลังจากนั้น เราระบุคลาส div ใหม่ที่จะมีตรรกะของแอนิเมชัน ในกรณีของเรา เราใช้ความยาวของแอนิเมชัน 8 วินาที รวมกับข้อกำหนด animation-delay 3 แบบแยกกัน

การหน่วงเวลาใช้เพื่อกำหนดว่าคำใดคำหนึ่งจะเข้ามาในมุมมองหลังจากที่เราเพิ่มตรรกะ @keyframes ของเราแล้ว

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

โฮเวอร์ไฮไลท์

เป็นที่ยอมรับว่าเอฟเฟกต์เฉพาะนี้ไม่ได้ใช้คุณสมบัติแอนิเมชั่นที่เป็นรูปธรรม อย่างไรก็ตาม การใช้ฟังก์ชัน attr() และ var() ควรสร้างแรงบันดาลใจมากพอที่จะลองปรับแต่งเอฟเฟกต์นี้เพิ่มเติม

หากคุณดูที่ ul li a::before specification – เราใช้ attr() เพื่อระบุว่าองค์ประกอบใดที่เราต้องการระบุถึงผลกระทบ นอกจากนี้ เรายังเพิ่มตัวแปรที่เรียกว่า –clr ซึ่งคุณใช้กำหนดสีที่กำหนดเองสำหรับแต่ละรายการที่คุณต้องการใช้เอฟเฟกต์โฮเวอร์

สำหรับตัวอย่างนี้ เราได้เพิ่มคุณสมบัติ border-right เพื่อระบุสีที่เราใช้สำหรับแต่ละองค์ประกอบ คุณสามารถลบออกและเอฟเฟกต์จะยังคงทำงานอยู่

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }