วิธีการ Animate Dashed Border ด้วย CSS

เส้นขอบที่ตกแต่งสามารถประดับองค์ประกอบใด ๆ ในหน้า แต่เส้นขอบ CSS จะถูก จำกัด เมื่อมันมาถึงสไตล์ นักพัฒนามักจะคิดหาวิธีแก้ปัญหาเช่น CSS-gradient border, SVG border, หลายเส้นขอบและอื่น ๆ เพื่อเลียนแบบและอัพเกรดรูปลักษณ์ของเส้นขอบของกล่องและภาพเคลื่อนไหว.

วันนี้เราจะดูการแฮ็กเส้นขอบประที่ง่ายกว่านั่นคือแอนิเมชั่นเส้นขอบประ เส้นขอบประที่เคลื่อนไหวจะถูกสร้างขึ้นโดยใช้เท่านั้น เค้าโครง และ กล่องเงา, ไม่ต้องวุ่นวายกับเรื่องทางเลือกตั้งแต่ เค้าโครง ได้รับการสนับสนุนจาก IE8 เป็นต้นไป ด้วยวิธีนี้ผู้ใช้จะยังสามารถเห็นเส้นขอบไม่เหมือนเมื่อใช้ SVG หรือการไล่ระดับสี ด้วยวิธีนี้คุณสามารถสร้างเครื่องหมายขีดกลางสองสี ลองมาดูกัน.

การสร้างเส้นขอบ

ก่อนอื่นเราจะสร้างเส้นขอบ สำหรับสิ่งนี้เราจะใช้เค้าโครงที่เป็นเส้นประและเงาของกล่อง.

 .แบนเนอร์ outline: 6px ประสีเหลือง; box-shadow: 0 0 0 6px # EA3556; … 

เค้าโครง จะต้องมีค่าทั้งหมด; ความกว้างประเภทและสี กล่องเงา เพียงต้องการค่าสำหรับ กระจาย ซึ่งควรจะเหมือนกับความกว้างของโครงร่างและสีของมัน ทั้งโครงร่างและกล่องเงาเข้าด้วยกันจะสร้างเอฟเฟกต์ของเส้นประสองสี.

จากนั้นคุณสามารถปรับความกว้างหรือความสูงของกล่องเพื่อให้เส้นขอบที่คุณต้องการดูที่มุม.

แอนิเมชั่นเส้นขอบ

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

@keyframes animateBorder ถึง outline-color: # EA3556; กล่องเงา: 0 0 0 6px สีเหลือง; 

คุณสามารถกำหนดเป้าหมายสีของโครงร่างโดยใช้ ร่างสี คุณสมบัติ longhand อย่างไรก็ตามสำหรับ shadow box คุณจะต้องให้ค่าทั้งหมดกับคุณสมบัติแบบย่อสำหรับตอนนี้.

เมื่อภาพเคลื่อนไหวพร้อมแล้วให้เพิ่มลงในกล่อง.

.แบนเนอร์ outline: 6px ประสีเหลือง; box-shadow: 0 0 0 6px # EA3556; แอนิเมชั่น: 1 วินาที animateBorder infinite; ... 

การเปลี่ยนผ่านบนพรมแดน

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

.photos outline: 20px dashed # 006DB5; กล่องเงา: 0px 0px 0px 20px # 3CFDD3; การเปลี่ยนแปลง: ทั้งหมด 1s; …. รูปถ่าย: โฮเวอร์ outline-color: # 3CFDD3; กล่องเงา: 0 0 0 20px # 006DB5; 

ตอนนี้เลื่อนเมาส์ไปที่ภาพเหล่านี้เพื่อดู CSS ของคุณในทุกอนิเมชั่น.

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