CSS3偽放大鏡效果是一種通過CSS3技術實現的放大鏡效果,它能夠將頁面中的某一部分進行放大展示,方便用戶查看細節信息。下面我們來看一下如何使用CSS3實現偽放大鏡效果。
/* HTML部分 */ <div class="img-container"> <img src="xxx.jpg"> <div class="magnify-glass"></div> </div> /* CSS部分 */ /* 圖片容器,需設置寬度和高度 */ .img-container { position: relative; width: 400px; height: 400px; } /* 圖片 */ .img-container img { width: 100%; height: auto; } /* 放大鏡 */ .img-container .magnify-glass { position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #333; opacity: 0; background-color: #fff; } /* 鼠標移動到圖片上,顯示放大鏡 */ .img-container:hover .magnify-glass { opacity: 1; } /* 移動放大鏡位置 */ .img-container:hover .magnify-glass { background-image: url(xxx.jpg); background-size: 800px 800px; background-repeat: no-repeat; background-position: -100px -100px; /* 根據鼠標位置調整 */ transform: scale(2); /* 圖片放大2倍 */ }
通過以上代碼,我們就實現了一種通過CSS3實現的偽放大鏡效果。用戶鼠標移動到圖片上時,會顯示放大鏡,移動鼠標時,放大鏡會隨著鼠標移動而改變位置,并且會將鼠標所在的位置進行放大展示。
下一篇css3任意弧度