CSS3是一種用于網頁設計的標準語言,其中最常見的功能之一便是實現卷簾門。卷簾門可以將內容以一種流暢的方式展現給用戶,體驗非常好。下面介紹如何利用CSS3實現卷簾門的效果。
/* HTML結構 */ <div class="door"> <div class="door-left"></div> <div class="door-right"></div> </div> /* CSS樣式 */ .door { width: 400px; height: 300px; position: relative; overflow: hidden; } .door-left { width: 50%; height: 100%; position: absolute; left: 0; top: 0; background-color: #f5f5f5; transform-origin: left center; transform: skewY(-30deg); transition: transform 1s; } .door-right { width: 50%; height: 100%; position: absolute; right: 0; top: 0; background-color: #f5f5f5; transform-origin: right center; transform: skewY(30deg); transition: transform 1s; } .door:hover .door-left { transform: skewY(0deg); } .door:hover .door-right { transform: skewY(0deg); }
以上代碼使用了transform屬性來改變元素的形狀,從而實現了卷簾門的效果。利用CSS3的transition來讓動畫更加流暢,用戶可以通過hover事件來激活這個效果。上面這個例子是最簡單的卷簾門,你也可以根據需要修改樣式達到更加符合自己網頁需求的效果。