วิธีการสร้างเอฟเฟกต์การพิมพ์ภาพเคลื่อนไหว

Sep 14, 2025
วิธีการ

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

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

  • สำรวจชายแดนใหม่ของภาพเคลื่อนไหว CSS

01. การเริ่มต้นเอกสาร

ขั้นตอนแรกคือการเริ่มต้นโครงสร้างของเว็บเพจ ประกอบด้วยคอนเทนเนอร์ HTML ที่รับผิดชอบในการจัดเก็บส่วนหัวและร่างกาย ในขณะที่ความรับผิดชอบหลักของส่วนหัวคือการโหลด CSS ภายนอกส่วนของร่างกายจะเก็บเนื้อหา HTML ที่สร้างขึ้นในขั้นตอนที่ 2 

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; หัว & gt;
& lt; ชื่อ & gt; การพิมพ์เอฟเฟกต์ & lt; / ชื่อ & gt;
& lt; link rel = "stylesheet" type = "text / css" href = "styles.css" / & gt;
& lt; / head & gt;
& lt; ร่างกาย & gt;
*** ขั้นตอนที่ 2 ที่นี่
& lt; / body & gt;
& lt; / html & gt;

02. เนื้อหา HTML

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

 & lt; div class = "typing" & gt;
  & lt; h1 & gt; ใส่ชื่อของคุณที่นี่ ... & lt; / h1 & gt;
& lt; / div & gt;

03. การเริ่มต้น CSS

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

 ​​ร่างกาย, html {
  จอแสดงผล: บล็อก;
  ความกว้าง: 100%;
  ความสูง: 100%;
  พื้นหลัง: # 000;
  สี: #FFF;
  padding: 0;
  มาร์จิ้น: 0;
}

04. การพิมพ์เด็ก

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

. typing & gt; * {
  ล้น: ซ่อน;
  พื้นที่สีขาว: ตอนนี้;
  แอนิเมชัน: Trypinganim 5S ขั้นตอน (50);
}

05. ตาหน้า

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

. typing & gt; *::หลังจาก{
  เนื้อหา: ". .";
  จอแสดงผล: บล็อก;
  ตำแหน่ง: แน่นอน;
  ด้านบน: 1em;
  ซ้าย: .35em;
}

06. ปากต่อปาก

เช่นเดียวกับดวงตาปากของใบหน้าทำจากองค์ประกอบเสมือนจริงของ CSS - คราวนี้ใช้ ก่อน ตัวเลือก ปากอยู่ในตำแหน่งที่เกี่ยวข้องกับองค์ประกอบข้อความหลักเช่นเดียวกับการมีรัศมีเส้นขอบปรากฏขึ้นพร้อมกับรูปร่างโค้งมน

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

. typing & gt; *::ก่อน{
  เนื้อหา: "";
  ตำแหน่ง: แน่นอน;
  จอแสดงผล: บล็อก;
  ด้านบน: 2.1Em;
  ซ้าย: .25em;
  ความกว้าง: 1em;
  ความสูง: .1em;
  รัศมีชายแดน: 100%;
  พื้นหลัง: #fff;
  แอนิเมชัน: TypingsPeak. 5S ขั้นตอน (2);
  แอนิเมชัน - การทำซ้ำนับ: 5;
}

07. นิยามภาพเคลื่อนไหว

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

 ​​@Keyframes typinganim {
  จาก {width: 0}
  ถึง {width: 100%}
}
@Keyframes typingspeak {
  0% {ความกว้าง: 1em; ความสูง: .1em}
  100% {ความกว้าง: 1em; ความสูง: .5em; }
}
***

มีไฟล์การออกแบบเพื่อบันทึก?อัพเกรดของคุณ การจัดเก็บเมฆ ดังนั้นจึงขึ้นอยู่กับงาน

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 275 ของผู้ออกแบบเว็บออกแบบเว็บสร้างสรรค์ ซื้อปัญหา 275 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

  • สร้างภาพเคลื่อนไหว Slick UI
  • ทำความเข้าใจกับ CSS Display Property
  • สร้างเอฟเฟกต์ข้อความไอน้ำเคลื่อนไหว

วิธีการ - บทความยอดนิยม

วิธีการวาดคอและไหล่

วิธีการ Sep 14, 2025

เมื่อเรียนรู้วิธีการวาดคอและไหล่มันมักจะมีความท้าทายในการแสดงปร�..

วิธีสร้างภาพตัดปะภาพใน Photoshop CC

วิธีการ Sep 14, 2025

การเรียนรู้วิธีการสร้างภาพตัดปะภาพใน Photoshop จะมีประโยชน์ในสถานการณ์ท..

รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

วิธีการ Sep 14, 2025

กริด CSS เหมาะสำหรับการสร้างเลย์เอาต์สองแกนของ�..

วิธีการแกะสลักแบบดิจิทัลใน zbrushcore

วิธีการ Sep 14, 2025

zbrushcore ($ 149.95 สำหรับใบอนุญาตผู้ใช้คนเดียว) เป็น�..

สีเปียกในน้ำมัน

วิธีการ Sep 14, 2025

ภาพวาด 'Alla Prima' (นั่นคือจิตรกรรมเปียกบนเปียกในหนึ..

วิธีการทาสีกระจกโค้งบนหมวกกันน็อกอวกาศ

วิธีการ Sep 14, 2025

Spacesuits เป็นเรื่องสนุกที่จะทาสี แต่ชิ้นส่วนหมวกอ..

สร้างโปสเตอร์จากเทมเพลตใน Photoshop

วิธีการ Sep 14, 2025

Adobe กำลังเปิดตัวชุดวิดีโอชุดใหม่วันนี้เรียกว่าตอนนี้ซึ่งมีวัตถุปร�..

ความลับในการวาดภาพเหมือน Monet

วิธีการ Sep 14, 2025

ด้วย MasterClass นี้เราจะพยายามเข้าไปในหัวของ Monet เล็ก�..

หมวดหมู่