วิธีการ 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 ของคุณในทุกอนิเมชั่น.
และนั่นคือการห่อ คุณสามารถลองแทนที่เส้นประด้วยเส้นประ แต่เอฟเฟกต์อาจไม่ดีเท่าที่ควร นอกจากนี้คุณยังสามารถเปลี่ยนประเภทเค้าร่างในระหว่างการเคลื่อนไหวเพื่อเอฟเฟกต์เพิ่มเติมได้.