CSS นิเมชั่นและความเป็นไปของมัน

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

ความลับของการพัฒนาที่เหมาะ

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

ลักษณะ CSS ภาพเคลื่อนไหว

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

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

นี่คือตัวอย่างรหัส

ปรับปรุงปุ่มการทำงาน

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

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

CSS-นิเมชั่นเมื่อคุณเลื่อนเมาส์ไปตัวอย่างเว็บไซต์

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

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

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

ในช่วงบางเวลา CSS ภาพเคลื่อนไหวเมื่อคุณเลื่อนเมาส์ไปที่ชิ้นส่วนของรหัสนี้จะเปลี่ยน เวลาที่ถูกกำหนดโดยคุณสมบัติระยะเวลา นั่นคือเมื่อคุณเลื่อนเมาส์ไปที่รายการที่จะเริ่มต้นการเปลี่ยนแปลงที่แปลกประหลาดทรัพย์สินใด ๆ ที่เราตั้งอยู่ในตัวเลือก ในกรณีของเราก็คือ - .element (จุดไปข้างหน้า) ค่อนข้างต่ำคือตัวอย่างของรหัสเมื่อเปลี่ยนจาก div ภาชนะซึ่งมี .hover หลอกการเปลี่ยนแปลงพื้นหลังจากสีแดงเป็นสีเขียว

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

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

รหัสตัวอย่างดังต่อไปนี้แทน

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

บางความแตกต่างของการใช้ประเภทของการเคลื่อนไหวนี้บนปุ่ม

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

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

ภาพเคลื่อนไหวข้อความ

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

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

เคลื่อนไหวข้อความในรูปแบบของภาพยนตร์สยองขวัญที่

อันที่จริงความคิดทั้งหมดคือการทำให้ข้อความในจดหมายที่คลุมเครือเล็กน้อยและจะหมุน ขัดแย้งระหว่างตัวอักษรที่ควรจะเป็นพื้นที่ เราจะใช้เฉดสี interalphabetic เช่นเดียวกับช่วงเวลา เพื่อที่จะใช้ความคิดที่เราต้องสคริปต์ Lettering.js ประพันธ์เดฟรูเพิร์ต เขาต้องการที่จะตัดคำบวกตัวอักษรไม่กี่ในช่วงแท็ก แรกที่คุณต้องห่อวลีในแท็ก * h2 นี่คือตัวอย่างรหัส

จากนั้น obernom ทุกคำในแท็ก H2 ในช่วงแท็ก

มันเกิดขึ้นเช่นนี้

ก็จะมีลักษณะค่อนข้างยุ่งยาก แต่ไม่ได้ให้ที่รบกวน

คลั่งไคล้ได้รับโครงสร้างเพียงพอ

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

เราสรุปการทำงานของเราเล็ก ๆ น้อย ๆ สวยเก๋ หนังสือทั้งหมดของเราในตัวอย่างข้างต้นจะตั้งอยู่ในความกว้างทั้งหมดของหน้าจอ และพวกเขาจะใช้เวลาถึงเกือบทุกพื้นที่ว่าง

เนื่องจากเรากำลังจะวางอักษรทุกตัวของเราเป็นศูนย์กลางบนหน้าจอแล้วสำหรับภาชนะของเราและเรายังต้อง flexbox

นี่คือตัวอย่างของรหัสของมัน

ตอนนี้เราได้ทำเพื่อให้ตัวอักษรทั้งหมดซึ่งถูกห่อในชั้นเรียนช่วงซึ่งเป็นชั้นผู้ปกครอง .os วลีจะตั้งอยู่และจะถูกแนบมากับมันอยู่ตรงกลาง

อย่าลืมที่จะเพิ่มบิตของพื้นที่ว่างที่เป็นตัวเองระยะห่างระหว่างตัวอักษร

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

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

นอกจากนี้ยังเป็นสิ่งสำคัญที่จะกำหนดวิธีการและกับสิ่งที่ล่าช้าจะปรากฏประโยคและวลีของเรา ซึ่งชิ้นส่วนของข้อความจะปรากฏเร็วกว่าหนึ่งก่อนหน้านี้และวิธีการมาก รหัสจะมีลักษณะเช่นนี้

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

ในท้ายที่สุดเราอีกครั้งเพิ่มตัวอักษรไม่กี่หรือใกล้สูญพันธุ์ promasshtabiruem พวกเขา นี้จะให้ผลเบลอขนาดเล็กใหม่

และในที่สุดก็วลีสุดท้าย CSS ภาพเคลื่อนไหว

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

อย่าลืมเกี่ยวกับแรงบันดาลใจ

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

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