การเปลี่ยน CSS คืออะไรและจะใช้งานอย่างไร

เผยแพร่แล้ว: 2022-02-16

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

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

ในบทช่วยสอนนี้ เราจะมาเรียนรู้แนวคิดพื้นฐานของการเปลี่ยน CSS ด้วยตัวอย่างที่นำไปใช้ได้จริง นอกจากนี้ คุณจะได้เรียนรู้วิธีใช้ภาพสไปรท์ด้วย CSS

เริ่มกันเลย!

ขั้นตอนที่ 1. - เค้าโครงที่เสนอ

การเปลี่ยน CSS & วิธีใช้งาน

เรามีการ์ด 4 ใบที่โปรโมตบริการปกติของเว็บเอเจนซี่ เมื่อวางเมาส์เหนือองค์ประกอบเหล่านี้ แต่ละองค์ประกอบภายในการ์ดจะมีการเปลี่ยนแปลงที่แตกต่างกันเพื่อให้ได้เอฟเฟกต์ที่ต้องการ

ขั้นตอนที่ # 2 - HTML

  • เปิดตัวแก้ไขรหัสที่คุณต้องการ
  • สร้างไฟล์ HTML ชื่อ index.html
  • คัดลอกและวางรหัสนี้:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
เปิดในป๊อปอัป
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 การเปลี่ยน css 001

กล่องใส่การ์ดบริการมี 4 ใบ การ์ดแต่ละใบประกอบด้วยไอคอน ชื่อเรื่อง ข้อความบางส่วน และลิงก์ไปยังข้อมูลที่เกี่ยวข้องบนไซต์ ข้อความและลิงก์จะแสดงเมื่อวางเมาส์เหนือการ์ด ไม่เช่นนั้นจะถูกซ่อน

ขั้นตอนที่ #3 - สไตล์ CSS พื้นฐาน

  • สร้างไฟล์ CSS และเรียกมันว่า style.css — ในโค้ด HTML มีลิงก์ไปยังไฟล์นี้และ Google Fonts แล้ว
  • คัดลอกและวางลักษณะเหล่านี้เพื่อเปลี่ยนรูปแบบตัวพิมพ์และสีพื้นหลังของการ์ด:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
เปิดในป๊อปอัป
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 การเปลี่ยน css 002

ขั้นตอนที่ #4 - รูปแบบเค้าโครง

ลองใช้ CSS Grid เพื่อสร้างการ์ดและจัดเรียงในแนวนอน

  • แก้ไขโค้ด CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

คอนเทนเนอร์การ์ดบริการเป็นตารางแนวนอนที่มี 4 คอลัมน์ การ์ดแต่ละใบได้รับการประกาศให้เป็นคอนเทนเนอร์กริดที่มี 2 แถว โปรดทราบว่าเราได้ประกาศความสูงคงที่สำหรับการ์ดแต่ละใบ

191125 การเปลี่ยน css 003

ขั้นตอนที่ #5 - ภูติภาพ

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

191125 การเปลี่ยน css 004

รูปภาพกว้าง 240px และสูง 480px แต่ละไอคอนครอบคลุมพื้นที่ 120x120px ในการทำแผนที่แต่ละภาพ เราเริ่มต้นที่มุมซ้ายบนของภาพด้วยพิกัด (0px 0px) โดยเรียงตามลำดับ "ซ้าย - บน"

ด้วยวิธีนี้ รูปภาพในคอลัมน์ด้านซ้ายของสไปรท์จะอยู่ที่:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

นี่คือภาพที่จะใช้ก่อนวางเมาส์เหนือ

รูปภาพในคอลัมน์ด้านขวาของสไปรท์อยู่ที่:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • แก้ไขโค้ด CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
เปิดในป๊อปอัป
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

คอนเทนเนอร์การ์ดบริการเป็นตารางแนวนอนที่มี 4 คอลัมน์ การ์ดแต่ละใบได้รับการประกาศให้เป็นคอนเทนเนอร์กริดที่มี 2 แถว โปรดทราบว่าเราได้ประกาศความสูงคงที่สำหรับการ์ดแต่ละใบ

191125 การเปลี่ยน css 003

ขั้นตอนที่ #5 - ภูติภาพ

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

191125 การเปลี่ยน css 004

รูปภาพกว้าง 240px และสูง 480px แต่ละไอคอนครอบคลุมพื้นที่ 120x120px ในการทำแผนที่แต่ละภาพ เราเริ่มต้นที่มุมซ้ายบนของภาพด้วยพิกัด (0px 0px) โดยเรียงตามลำดับ "ซ้าย - บน"

ด้วยวิธีนี้ รูปภาพในคอลัมน์ด้านซ้ายของสไปรท์จะอยู่ที่:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

นี่คือภาพที่จะใช้ก่อนวางเมาส์เหนือ

รูปภาพในคอลัมน์ด้านขวาของสไปรท์อยู่ที่:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • แก้ไขโค้ด CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 การเปลี่ยน css 005

ไม่เลวใช่มั้ย มาเพิ่มสัมผัสเครื่องสำอางเพื่อจบส่วนนี้ด้วยการเติมบางส่วน

  • แก้ไขโค้ด CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
เปิดในป๊อปอัป
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 การเปลี่ยน css 006

ขั้นตอนที่ #6 - การเปลี่ยน CSS

คุณสมบัติการเปลี่ยน CSS มีคุณสมบัติลูกที่แตกต่างกัน 4 คุณสมบัติ:

  • คุณสมบัติการเปลี่ยนแปลง (คุณสมบัติขององค์ประกอบที่จะใช้การเปลี่ยนแปลง)
  • เปลี่ยน-duration
  • ทรานซิชั่น-ไทม์มิ่ง-ฟังก์ชัน
  • เปลี่ยน-ล่าช้า

ชวเลขคือ:

การเปลี่ยนแปลง: [คุณสมบัติการเปลี่ยนผ่าน] [ระยะเวลาการเปลี่ยนผ่าน] [ฟังก์ชั่นเวลาการเปลี่ยน] [การเปลี่ยนแปลงระยะเวลาล่าช้า]

  • แก้ไขโค้ด CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


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

ในการทำให้บัตรม้วนขึ้น คุณต้องตั้งค่าระยะขอบติดลบที่ด้านบนและเพิ่มค่าสัมบูรณ์ของระยะขอบนี้กับความสูงขององค์ประกอบ (320px == 20em)

191125 การเปลี่ยน css 008

ถึงเวลาแล้วที่จะกำหนดเป้าหมายรูปภาพและเปลี่ยนแปลงตามการเปลี่ยนแปลง

  • แก้ไขโค้ด CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

อีกครั้ง:

  • คุณสมบัติการเปลี่ยนแปลง: พื้นหลัง
  • ระยะเวลาการเปลี่ยนภาพ: 0.4s
  • ฟังก์ชันการเปลี่ยนจังหวะเวลา: step-end

ส่วนที่เหลือเป็นเพียงการจับคู่กับพิกัดที่แน่นอน (รายละเอียดด้านบน) บนสไปรท์ของรูปภาพ

191125 การเปลี่ยน css 009

สุดท้าย มากำหนดเป้าหมายคอนเทนเนอร์ . hidden

  • แก้ไขโค้ด CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

มีสองรายละเอียดที่นี่ที่จะแจ้งให้ทราบ:

  • การเปลี่ยนสีของข้อความมี ความล่าช้าในการเปลี่ยน 0.2s
  • คุณสมบัติ ความสูง ขององค์ประกอบจะเปลี่ยนเมื่อวางเมาส์ไว้โดยไม่มีการเปลี่ยนแปลง 
191125 การเปลี่ยน css 010

การเปลี่ยนผ่านได้รับการสนับสนุนโดยเบราว์เซอร์หลักทั้งหมด

191125 การเปลี่ยน css 011

ฉันหวังว่าคุณจะชอบแบบฝึกหัดนี้ ขอบคุณที่อ่าน!

รหัสสามารถพบได้ที่นี่