CSS 頭像裝扮圖動畫能夠為網頁帶來更加生動的視覺效果,讓頁面更加動態有趣。以下是一個簡單的例子。
.avatar { width: 100px; height: 100px; border-radius: 50%; background-image: url("avatar.png"); background-size: cover; background-position: center; position: relative; } .avatar:before { content: ""; width: 20%; height: 20%; background-color: #fff; position: absolute; top: 10%; left: 20%; border-radius: 50%; transform: scale(0); transition: transform .6s ease-in-out; } .avatar:hover:before { transform: scale(1.2); } .avatar:after { content: ""; width: 80%; height: 80%; background-color: #fff; position: absolute; bottom: 0; right: -10%; border-radius: 50%; transform: scale(0); transition: transform .6s ease-in-out; } .avatar:hover:after { transform: scale(1.2); }
該代碼中,使用一個 div 元素作為頭像的容器,并使用 border-radius 屬性制作圓形頭像。再通過 background-image 屬性添加頭像圖片,并使用 background-size 和 background-position 屬性使圖片居中填充整個容器。
接著,在容器中通過偽元素 :before 和 :after 構建兩個圓形白色遮罩層,并設置其初始 transform 值為 scale(0),即不可見。并在 :hover 時將 transform 值修改為 scale(1.2),使其變大。
最終效果是,當鼠標懸停在頭像上時,頭像會被兩個圓形白色遮罩層包裹,并隨之放大。
上一篇vue怎么裝環境
下一篇css 中讓圖片劇中