純CSS3放大鏡效果是比較常見的一種效果,主要通過CSS3的transform、transition以及偽元素來實現的。下面是一個簡單的純CSS3放大鏡效果的實現:
<div class="container"> <img src="example.jpg" alt="image"> <div class="magnify"></div> </div>
其中,container是圖片和放大鏡的容器,magnify是放大鏡本身的樣式,需要通過偽元素來生成:
.container { position: relative; width: 500px; height: 500px; } .magnify { position: absolute; width: 150px; height: 150px; background-color: #fff; border: 3px solid #ccc; border-radius: 50%; cursor: none; opacity: 0; pointer-events: none; transition: all .3s ease-in-out; transform: scale(1.5); } .container:hover .magnify { opacity: 1; pointer-events: auto; transform: scale(1); } .magnify::before { content: ""; position: absolute; top: 0; left: 0; width: 150%; height: 150%; border: 3px solid #ccc; border-radius: 50%; transform: translate(-25%, -25%); z-index: -1; }
上述代碼中,先定義了圖片和容器的大小和定位,然后定義放大鏡的樣式和動畫效果,其中使用偽元素生成了一個放大鏡的外圈。最后,在容器上hover時,通過改變放大鏡的透明度和transform屬性,來實現放大鏡的展開和關閉。
上一篇純css代碼照片墻
下一篇mysql 第二大時間