怎么用CSS3實現(xiàn)百葉窗式鼠標(biāo)滑過hover圖片動畫效果-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“怎么用CSS3實現(xiàn)百葉窗式鼠標(biāo)滑過hover圖片動畫效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么用CSS3實現(xiàn)百葉窗式鼠標(biāo)滑過hover圖片動畫效果”吧!

創(chuàng)新互聯(lián)建站是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站制作、網(wǎng)站設(shè)計、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

準(zhǔn)備

示例基于bootstrap3，所以在頁面中引入bootstrap和font-awesome字體圖標(biāo)文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css"><link rel="stylesheet" href="path/to/font-awesome.min.css">

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

該CSS3百葉窗式鼠標(biāo)hover圖片動畫效果的HTML結(jié)構(gòu)如下：

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

CSS樣式

然后通過下面的CSS代碼來實現(xiàn)百葉窗式鼠標(biāo)hover圖片動畫效果，直接上代碼。

.box{ text-align: center; overflow: hidden; position: relative;}.box img{ width: 100%; height: auto; transform: scale(1.6); transition: all 0.3s ease 0s;}.box:hover img{ filter: grayscale(100%); transform: scale(1.2);}.box .box-content{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; transition: all 0.2s ease 0s;}.box:before,.box:after,.box .box-content:before,.box .box-content:after{ content: ""; width: 100%; height: 25%; background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),transparent,rgba(0,0,0,0.7),rgba(0,0,0,0.9)); z-index: 1; position: absolute; top: 0; left: 0; transition: all 0.3s ease 0s;}.box:before{ transform: translateX(100%); }.box:after{ height: 25.1%; top: 25%; transform: translateX(-100%); transition-delay: 0.05s;}.box .box-content:before{ top: 50%; transform: translateX(100%); transition-delay: 0.1s;}.box .box-content:after{ top: 75%; transform: translateX(-100%); transition-delay: 0.15s;}.box:hover:before,.box:hover:after,.box:hover .box-content:before,.box:hover .box-content:after{ transform: translateX(0); }.box .inner-content{ padding: 7px 0; text-align: right; position: absolute; bottom: 10px; right: 20px; z-index: 2; transition: all 0.3s ease 0s;}.box .title{ font-size: 22px; font-weight: 700; color: #faac01; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 3px 0; opacity: 0; transform: translateY(150px); transition: all 0.4s ease 0s;}.box .post{ display: inline-block; padding: 0 5px; font-size: 16px; font-style: italic; color: #fff; opacity: 0; transform: translateY(50px); transition: all 0.4s ease 0s;}.box:hover .title,.box:hover .post{ opacity: 1; transform: translate(0, 0);}.box .icon{ padding: 0; margin: 0; list-style: none; position: absolute; top: -200px; left: 10px; z-index: 2; transition: all 0.4s ease 0.2s;}.box:hover .icon{ top: 15px; }.box .icon li a{ display: block; width: 40px; height: 40px; line-height: 40px; background: #faac01; font-size: 20px; color: #fff; margin-bottom: 10px; position: relative; transition: all 0.3s ease 0s;}.box .icon li a:hover{ text-decoration: none; border-radius: 30%; background: #fff; color: #faac01;}@media only screen and (max-width:990px){ .box{ margin-bottom: 30px; }}@media only screen and (max-width:479px){ .box .title{ font-size: 18px }}

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

文章題目：怎么用CSS3實現(xiàn)百葉窗式鼠標(biāo)滑過hover圖片動畫效果-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://bm7419.com/article34/dpdpse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、用戶體驗、網(wǎng)站導(dǎo)航、全網(wǎng)營銷推廣、搜索引擎優(yōu)化

聲明：本網(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)容