怎么用CSS3實現(xiàn)鼠標經(jīng)過動畫時圖片變大的特效-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“怎么用CSS3實現(xiàn)鼠標經(jīng)過動畫時圖片變大的特效”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用CSS3實現(xiàn)鼠標經(jīng)過動畫時圖片變大的特效”吧!

站在用戶的角度思考問題，與客戶深入溝通，找到崗巴網(wǎng)站設計與崗巴網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋崗巴地區(qū)。

這是一款css3鼠標經(jīng)過動畫特效。在該特效中，當鼠標經(jīng)過圖片時，圖片略微放大，底部遮罩層出現(xiàn)，同時圖片的描述文字和鏈接會以動畫的方式出現(xiàn)在遮罩層之上，非常炫酷。

HTML結(jié)構(gòu)

示例中，我們使用Bootstrap布局，該css3鼠標經(jīng)過動畫特效的HTML結(jié)構(gòu)如下：

<img src="images/img-1.jpg"> <ul class="icon"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h4 class="title">Williamson</h4> Web Developer <img src="images/img-2.jpg"> <ul class="icon"> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> <h4 class="title">Kristiana</h4> Web Designer

CSS樣式

然后通過下面的CSS樣式來實現(xiàn)該css3鼠標經(jīng)過動畫特效。

.box{ text-align: center; overflow: hidden; position: relative;}.box:before{ content: ""; width: 150%; height: 150%; position: absolute; top: 50%; left: 50%; background: radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 0 0, radial-gradient(rgba(255,255,255,0.1) 15%, transparent 15%) 16px 16px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 16px 17px; background-size: 32px 32px; background-color: rgba(0,0,0,0.5); opacity: 0; z-index: 1; transform: translate(-50%, -50%) scale(0); transition: all 0.56s ease 0s;}.box:hover:before{ opacity: 1; transform: translate(-50%, -50%) scale(1);}.box img{ width: 100%; height: auto; transition: all 0.3s ease 0s;}.box:hover img{ transform: scale(1.3); }.box .box-content{ width: 100%; position: absolute; bottom: 5px; left: 0; z-index: 1; transition: all 0.3s ease 0s;}.box .title{ font-size: 22px; font-weight: 600; color: #47ddc8; text-transform: uppercase; text-shadow: 0 0 2px #000; opacity: 0; margin: 0 0 5px 0; position: relative; transform: translateY(100%); transition: all 0.5s ease 0s;}.box:hover .title{ opacity: 1; transform: translateY(0);}.box .post{ display: block; font-size: 14px; font-style: italic; color: #fff; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; transform: translateX(-100%) rotateX(90deg); transition: all 0.5s ease 0s;}.box:hover .post{ transform: translateY(0) rotate(0); }.box .icon{ padding: 0; margin: 0; list-style: none; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); transition: all 0.3s ease 0s;}.box .icon li{ display: inline-block; margin: 0 7px; transform: rotateX(90deg); transition: all 0.3s ease 0s;}.box .icon li:last-child{ transition-delay: 0.2s; }.box:hover .icon li{ transform: rotateX(0); }.box .icon li a{ display: block; width: 35px; height: 35px; line-height: 35px; border-radius: 5px; background: #fff; font-size: 17px; color: #505050; transition: all 0.3s ease 0s;}.box .icon li a:hover{ background: #47ddc8; box-shadow: 0 0 10px #000; color: #fff;}@media only screen and (max-width:990px){ .box{ margin-bottom: 30px; }}

到此，相信大家對“怎么用CSS3實現(xiàn)鼠標經(jīng)過動畫時圖片變大的特效”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

當前標題：怎么用CSS3實現(xiàn)鼠標經(jīng)過動畫時圖片變大的特效-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://www.muchs.cn/article18/dpgggp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、App開發(fā)、虛擬主機、自適應網(wǎng)站、網(wǎng)站建設、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容