สร้างเอฟเฟกต์การเปิดเผยอิมเมจ CSS เท่านั้นที่มีเส้นขอบโปร่งใส

ใน CSS เราใช้ ตัวแปร CSS สองตัว, --BGC และ --สลัว สำหรับ สีพื้นหลัง และ มิติ ของ .foo ตู้คอนเทนเนอร์ตามลำดับ ในตัวอย่างฉันใช้ ค่าเดียวกัน สำหรับความกว้างและความสูงเพื่อให้ได้กล่องสี่เหลี่ยมให้สร้าง ตัวแปรแยก สำหรับความสูงและความกว้างหากคุณต้องการสี่เหลี่ยม.

เรายังเพิ่ม ตำแหน่ง: ญาติ กฎเพื่อ .foo, เพื่อให้องค์ประกอบหลอกของมันที่เราจะใช้สำหรับ เปิดเผยภาพ, เป็นไปได้ ตำแหน่งอย่างแน่นอน (ดูด้านล่าง) และดังนั้น ซ้อนกัน.

 .foo --bgc: # FFCC03; - วันที่: 300px; ความกว้าง: var (- สลัว); ความสูง: var (- สลัว); สีพื้นหลัง: var (- bgc); ตำแหน่ง: ญาติ;  

เรา เพิ่มที่ว่างเปล่า เนื้อหา คุณสมบัติ ทั้งองค์ประกอบหลอก, .foo :: ก่อน และ .foo :: หลังจาก, เพื่อให้แสดงผลอย่างถูกต้อง.

 .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0; 

.foo องค์ประกอบสององค์ประกอบหลอก, .foo :: ก่อน, .foo :: หลังจาก, และพวกเขา : เลื่อน หลอกชั้นเรียน ได้รับ การเปลี่ยนแปลง คุณสมบัติ นั่นจะ เพิ่มการเปลี่ยนผ่านที่ง่ายดาย สำหรับพวกเขาเป็นเวลา 500 มิลลิวินาที (ครึ่งวินาที).

 .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: หลัง transition: แปลง 500ms ง่ายใน  

2. เพิ่มภาพ

เราเพิ่มภาพไปที่ .foo :: ก่อน องค์ประกอบหลอก เป็นภาพพื้นหลัง, และ ปรับขนาดให้ครอบคลุมองค์ประกอบหลอกทั้งหมด กับ ความกว้าง และ ความสูง คุณสมบัติ. เรา วางซ้อนอยู่ใต้ .foo ธาตุ ใช้ ดัชนี z: -1 กฎ.

 .foo :: before width: 100%; ความสูง: 100%; พื้นหลัง: url (camel.png) กึ่งกลาง / ปก; ดัชนี z: -1;  

ศูนย์ คำหลัก จัดกึ่งกลางภาพ, ในขณะที่ ปก คำหลักปรับขนาดภาพเป็น ครอบคลุมองค์ประกอบทั้งหมด ขณะที่ยังคงอัตราส่วนไว้.

บน ภาพหน้าจอด้านล่าง คุณสามารถเห็นสิ่งที่เรามีจนถึงตอนนี้ (ดัชนี z ถูกลบออกจาก .foo :: ก่อน เพื่อให้สามารถมองเห็นได้):

3. เพิ่มพื้นหลังสไลด์ออก

ในการเพิ่ม พื้นหลังมีขนาดเล็กลง (เลื่อนออก) ด้านหลังภาพ, เราจะใช้องค์ประกอบหลอกอื่น ๆ, .foo :: หลังจาก.

เราสร้างตัวแปร CSS อีกตัว, --ข, สำหรับ ความกว้างชายแดน. เราให้ เส้นขอบโปร่งใสสามเส้น ไปที่ ::หลังจาก หลอกองค์ประกอบ: ด้านบนขวาและด้านล่าง.

 .foo :: after --b: 20px; ความกว้าง: Calc (100% - var (- b)); ความสูง: Calc (100% - calc (var (- b) * 2)); เส้นขอบ: var (- b) ทึบโปร่งใส; ขอบซ้าย: ไม่มี; box-shadow: inset 0 var (- dim) 0 var (- bgc); ตัวกรอง: ความสว่าง (.8); ดัชนี z: -2;  

ความกว้าง คำนวณเป็น คำนวณ (100% - var - b)) ที่ส่งคืน ความกว้างรวมของ .foo ลบความกว้างทั้งหมดของเส้นขอบแนวนอน (เส้นขอบขวาเท่านั้นเนื่องจากไม่มีเส้นขอบด้านซ้าย).

ความสูง คำนวณเป็น คำนวณ (100% - คำนวณ (var (- b) * 2)) ที่ส่งคืน ความสูงทั้งหมดของ .foo ลบความกว้างทั้งหมดของเส้นขอบแนวตั้ง (ขอบบนและล่าง).

กับ กล่องเงา เรายัง เพิ่มเงาแทรกแนวนอน ขนาดเดียวกันกับ .foo (ซึ่งเป็น var (- มซำ)).

ตัวกรอง CSS ของ ความสว่าง (0.8) ทำให้สีพื้นหลังมืดลง นิดหน่อยและในที่สุด ดัชนี z: -2 กฎ สถานที่ ::หลังจาก องค์ประกอบเทียมภายใต้ ::ก่อน ที่มีภาพ.

นี่คือ สกรีนช็อตของการสาธิต จนถึงขณะนี้ (ด้วย ดัชนี z ลบออกจากทั้งองค์ประกอบหลอกเพื่อให้พวกเขาสามารถมองเห็น):

4. เพิ่มการเปลี่ยนแปลง

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

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

 .foo: โฮเวอร์ :: before, .foo: hover :: หลังจาก transform: translateX (100%);  

ด้านล่างคุณสามารถดู การสาธิตขั้นสุดท้าย.

โบนัส: มาร์จิ้นเสริม

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

 .foo: โฮเวอร์ margin-right: var (- สลัว);