home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

วิธีทำให้ไอคอน SVG เด้งขึ้นมาด้วย CSS

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

วิธีทำให้ไอคอน SVG เด้งขึ้นมาด้วย CSS

ทำไมสิ่งนี้จึงมีประโยชน์

แอนิเมชั่นเมื่อทำถูกต้องแล้วสามารถ:

  • แนะนำผู้ใช้ของคุณ
  • กระตุ้นให้ผู้ใช้ดำเนินการ
  • ดึงดูดความสนใจของผู้ใช้ (ในขณะที่คุณยังมีอยู่)

ข้อกำหนด

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

เอาล่ะ มาเริ่มกันเลย!

HTML:เพิ่มคอนเทนเนอร์ &ลูกศร

ในการสร้างตัวอย่างการสาธิตใหม่ คุณต้องมีองค์ประกอบ HTML สี่องค์ประกอบ:

  • องค์ประกอบรูปภาพสำหรับไอคอนลูกศร
  • องค์ประกอบช่วงสำหรับป้ายกำกับข้อความเหนือลูกศร
  • องค์ประกอบคอนเทนเนอร์-ส่วนท้ายสำหรับล้อมรอบลูกศรและป้ายกำกับข้อความ
  • องค์ประกอบคอนเทนเนอร์ที่ล้อมรอบองค์ประกอบทั้งหมด

ไปที่โปรแกรมแก้ไข HTML ของคุณและเพิ่มมาร์กอัปต่อไปนี้ใน <body></body> . ของคุณ องค์ประกอบ:

<div class="container">
  <div class="container-footer">
    <span class="text-label">Explore</span>
    <svg
      class="arrow-circle-down bounce"
      viewbox="0 0 1792 1792"
      xmlns="https://www.w3.org/2000/svg"
    >
      <path
        d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
        fill="#fff"
      ></path>
    </svg>
  </div>
</div>

รหัสลูกศรที่เราเพิ่มด้านบนอยู่ในรูปแบบ SVG อิงจากไลบรารีไอคอน Font Awesome CSS

คุณสามารถเลือกไอคอน Font Awesome ได้หลายร้อยไอคอนในรูปแบบ SVG จากที่เก็บ GitHub นี้

ประหยัดทรัพยากรของคุณ!

เว็บไซต์จำนวนมากโหลดไลบรารี Font Awesome ทั้งหมดบนเว็บไซต์ของพวกเขา แต่ใช้ไอคอนเพียงเล็กน้อยเท่านั้น ซึ่งทำให้แบนด์วิดท์เสียเปล่า คุณสามารถประหยัดทรัพยากรได้มากโดยการดาวน์โหลดไอคอน 5-10 ไอคอนที่คุณต้องการจริงๆ ในรูปแบบ SVG

สำหรับตัวอย่างนี้ เรากำลังฝังไฟล์ SVG ในมาร์กอัป HTML โดยตรง วิธีการนี้เรียกว่า SVG แบบอินไลน์ มีวิธีอื่นๆ มากมายในการเพิ่ม SVG เพื่อวัตถุประสงค์ที่แตกต่างกัน — แต่ฉันจะบันทึกไว้ในบทแนะนำอื่น

ฉันใช้ไอคอน SVG นี้ในบทช่วยสอนนี้

หากคุณเปรียบเทียบซอร์ส SVG ดั้งเดิมกับซอร์สที่คุณเห็นในมาร์กอัป HTML ด้านบน คุณจะเห็นว่าเราได้ทำการเปลี่ยนแปลงบางอย่าง:

  • ฉันลบคุณสมบัติความกว้างและความสูง (ไฟล์ต้นฉบับใหญ่เกินไป)
  • เพิ่มคลาส:arrow-circle-down ซึ่งเราต้องการในส่วน CSS

โอเค ต่อไป มาเพิ่มสไตล์กัน จากนั้นเราจะเข้าสู่ส่วนที่สนุกด้วย CSS แอนิเมชั่น!

จัดรูปแบบคอนเทนเนอร์และลูกศรด้วย CSS

ภายในสไตล์ชีต CSS ของคุณ ให้เพิ่มชุดกฎต่อไปนี้ (คลาส คุณสมบัติ และค่า):

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  background-color: #26a1ff;
  height: 100vh;
}

.container-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 1rem auto;
}

.text-label {
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
}

.arrow-circle-down {
  display: block;
  width: 40px;
  height: 40px;
  margin: 16px 0;
}

ตอนนี้ หากคุณรีเฟรชหน้าต่างเบราว์เซอร์ ควรมีลักษณะดังนี้:

วิธีทำให้ไอคอน SVG เด้งขึ้นมาด้วย CSS

เกิดอะไรขึ้นใน CSS:

  • อันดับแรก เราให้ .container element ขององค์ประกอบ div หลัก ระดับความสูงค่า 100vh. ทำให้ต้องใช้วิวพอร์ตทั้งหมดไม่ว่าจะใช้อุปกรณ์ใดก็ตาม เราใช้ display: flex; คุณสมบัติเพื่อทำให้เป็นคอนเทนเนอร์แบบยืดหยุ่น ซึ่งเราต้องการสำหรับลูกศรและป้ายกำกับข้อความ นอกจากนี้เรายังให้สีพื้นหลังสีฟ้าอ่อนที่สวยงามอีกด้วย
  • จากนั้นเราก็ให้.arrow-circle-down จำแนกความกว้างคงที่และความสูง 40px ดังนั้นจึงไม่ใช้พื้นที่มากเกินไป ควรสังเกตได้ชัดเจนแต่ไม่เสียสมาธิ
  • The .text-label ได้สไตล์เครื่องสำอางเล็กน้อยด้วยคุณสมบัติตัวพิมพ์ใหญ่และระยะห่างระหว่างตัวอักษร คุณสามารถเปลี่ยนการตั้งค่านี้ได้ตามใจชอบ
  • เราให้ .container-footer คุณสมบัติมาร์จิ้นอัตโนมัติที่ด้านบน ขวา และซ้าย สิ่งนี้บังคับให้ส่วนท้ายของคอนเทนเนอร์และลูกของมัน (ไอคอน &ข้อความ) ไปที่ด้านล่างของคอนเทนเนอร์หลัก ซึ่งเป็นที่ที่เราต้องการ ระยะขอบด้านล่างเป็น 1rem; ค่าเพื่อให้แน่ใจว่าทุกอย่างอยู่ภายในวิวพอร์ตเมื่อลูกศรเด้ง
  • The .container-footer คลาสยังได้รับคุณสมบัติ flex บางส่วน flex-direction: column; และ align-items: center; . คุณสมบัติเหล่านี้ทำให้องค์ประกอบข้อความและไอคอนซ้อนทับกัน และจัดธีมให้ตรงกึ่งกลางของส่วนท้ายของคอนเทนเนอร์

เพื่อความกระจ่าง margin: auto auto 1rem auto การประกาศเป็นการจดชวเลขที่ดีสำหรับคำที่ละเอียดยิ่งขึ้น:

margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;

ขั้นต่อไป ได้เวลาทำให้ลูกศรของคุณเด้งด้วยภาพเคลื่อนไหว CSS!

การเลื่อนลูกศรลงด้วย CSS

มีหลายวิธีในการสร้างภาพเคลื่อนไหว ทั้งด้วย CSS, JavaScript และการผสมผสาน สำหรับตัวอย่างนี้ เราจะสร้างภาพเคลื่อนไหวใน CSS เท่านั้น

เราได้เพิ่ม .bounce . แล้ว คลาสไปยังองค์ประกอบรูปภาพที่มีลูกศร SVG จนถึงตอนนี้ก็ยังไม่ได้ทำอะไรเลยเพราะเรายังไม่ได้กำหนดหรือกำหนดรูปแบบคลาสใน CSS

เพิ่มข้อมูลต่อไปนี้ในสไตล์ชีต CSS ของคุณ:

.bounce {
  animation: bounce 2s;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-12px);
  }
}

และตอนนี้ คุณมีลูกศรเด้งแล้ว:

วิธีทำให้ไอคอน SVG เด้งขึ้นมาด้วย CSS

เกิดอะไรขึ้นในโค้ด CSS

ในองค์ประกอบ SVG ที่มีลูกศร เรามีคลาสชื่อ.bounce . คลาสนี้มีคุณสมบัติที่เรียกว่าanimation .

คุณสมบัติแอนิเมชั่นมีสองค่า bounce และ2s .

bounce value เป็นฟังก์ชันที่ทริกเกอร์แอนิเมชั่น @keyframe@keyframes bounce ซึ่งฉันจะไปถึงในอีกสักครู่

2s ค่า (สองวินาที) คือระยะเวลาทั้งหมดที่แอนิเมชั่น @keyframe ของเราควรรัน

แอนิเมชั่น @keyframe:

  • มีระยะเวลารวมสองวินาที (กำหนดโดยanimation property. )
  • มีคีย์เฟรมที่แตกต่างกันทั้งหมดเจ็ดคีย์เฟรม 0%, 25%, 40% 50%, 60% 75% และ 100%
  • มีตำแหน่งพิกัด Y ที่แตกต่างกันสามตำแหน่ง:Y(0), Y(-20px) และ Y(-12px) พิกัดเหล่านี้คือสิ่งที่กำหนดว่าองค์ประกอบลูกศรจะเคลื่อนที่ขึ้นหรือลง ณ จุดต่างๆ (คีย์เฟรม) ในเวลาต่างกันหรือไม่

บล็อก @keyframe แรก {..} กล่าวว่าที่คีย์เฟรมทั้งห้านี้:0%, 25%, 50%, 75% และ 100% — ลูกศรควรอยู่ที่ตำแหน่งเริ่มต้น ซึ่งคือ Y(0px)

0%,
25%,
50%,
75%,
100% {
  transform: translateY(0);
}

บล็อก @keyframe ที่สอง บอกว่าที่เครื่องหมาย 40% ลูกศรควรเลื่อนขึ้นโดยกำหนดตำแหน่ง Y(-20px)

40% {
  transform: translateY(-20px);
}

บล็อกคีย์เฟรมที่สาม บอกว่าที่เครื่องหมาย 60% ลูกศรควรเลื่อนขึ้นอีกครั้ง ครั้งนี้เราเลื่อนลูกศรขึ้นเพียงครึ่งเดียวของครั้งแรก โดยให้ตำแหน่งเป็น Y(-12px)

60% {
  transform: translateY(-12px);
}

สังเกตว่าอยู่ระหว่าง คีย์เฟรมทั้งสองที่ลูกศรเลื่อนขึ้น (40% และ 60%) จะย้ายกลับไปที่ Y(0) ที่คีย์เฟรม 50% นั่นคือสิ่งที่ทำให้ลูกศรเลื่อนขึ้นและลงสองครั้ง ค่อนข้างเร็วภายในระยะเวลาอันสั้น

ฉันตัดสินใจขยับลูกศรเพียง -12px ในตำแหน่งที่สามเพราะมันเลียนแบบลูกบอลกระดอนในชีวิตจริง ครั้งที่สอง ลูกบอลที่กระทบพื้นจะเคลื่อนที่ขึ้นน้อยกว่าครั้งแรก แน่นอนว่าลูกบอลกระดอนได้มากแค่ไหน (และสูงแค่ไหน) นั้นพิจารณาจากปัจจัยหลายประการ เช่น น้ำหนัก ความเร็ว ประเภทของวัสดุ ฯลฯ แต่นั่นทำให้เรามีพื้นที่กระดิกมากขึ้นเท่านั้น เนื่องจากไม่มีทางเดียว ที่จะทำ

หาก CSS สำหรับภาพเคลื่อนไหวสร้างความสับสน ให้ลองใช้ระยะเวลาและ CSSแปลงการแปล คุณสมบัติ. เมื่อฝึกฝนสักหน่อย การเชื่อมต่อจุดต่างๆ จะง่ายขึ้นมาก

  • ลองให้คีย์เฟรม 40% เป็นคุณสมบัติการแปลการแปลงเป็น -48px แล้วดูว่าเกิดอะไรขึ้น
  • พยายามให้ CSSanimation คุณสมบัติเป็นระยะเวลา 5 วินาทีแทนที่จะเป็น 2 จากนั้นลองให้ค่า 100ms (คุณสามารถใช้มิลลิวินาทีแทนวินาที)

การขับรถแนวคิดกลับบ้านมักจะง่ายกว่า หากคุณทดลองกับความสุดขั้ว ปกติแล้วฉันจะมีช่วงเวลา "aha" ของฉัน

ทดลอง!

ภาพเคลื่อนไหว CSS มีความเป็นไปได้มากมาย มาดูรูปแบบสั้นๆ ที่เราสามารถสร้างให้กับแอนิเมชั่นที่มีอยู่ของเรากัน

คุณสมบัติการเลื่อนภาพเคลื่อนไหว

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

คุณสามารถทำได้โดยเพิ่มanimation delay คุณสมบัติไปยัง .bounce . ของคุณ คลาสเช่นนี้:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
}

ตอนนี้แอนิเมชั่นคีย์เฟรม 2 วินาทีจะไม่เริ่มทำงานจนกว่าจะโหลดหน้าเว็บของคุณครบ 5 วินาที

คุณสมบัติการนับซ้ำของแอนิเมชั่น

บางครั้งคุณต้องการเล่นแอนิเมชั่นซ้ำสองสามครั้ง ในการทำซ้ำภาพเคลื่อนไหวเราใช้animation-iteration-count คุณสมบัติเช่นนี้:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: 2;
}

ตอนนี้ลูกศรของคุณเริ่มกระเด้งหลังจากผ่านไป 5 วินาที แต่คราวนี้จะเล่นแอนิเมชั่นคีย์เฟรมซ้ำอีกครั้ง

ภาพเคลื่อนไหว CSS ที่ไม่มีที่สิ้นสุด

บางครั้ง ในบางกรณี คุณต้องการให้แอนิเมชั่น CSS ทำงานอย่างไม่สิ้นสุด ในการทำเช่นนั้น คุณต้องเปลี่ยนการวนซ้ำของแอนิเมชันเป็นinfinite; แบบนี้:

.bounce {
  animation: bounce 2s;
  animation-iteration-count: infinite;
}

แต่ก้าวอย่างระมัดระวังด้วยแอนิเมชั่นที่ไม่มีที่สิ้นสุด ไม่มีใครชอบแอนิเมชั่นที่หมุนวนไปตลอดกาล

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

คำนำหน้าอัตโนมัติ

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

ทรัพยากรอนิเมชั่น CSS

  • MDN Web Docs:ภาพเคลื่อนไหว CSS