小編給大家分享一下如何使用CSS Transitions實現(xiàn)圓形懸停效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)主營岢嵐網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),岢嵐h5小程序開發(fā)搭建,岢嵐網(wǎng)站營銷推廣歡迎岢嵐等地區(qū)企業(yè)咨詢在線預(yù)覽 下載源碼
在今天的教程中,我們將在圓上試驗懸停效果。 自從有了border- radius屬性,我們可以創(chuàng)建圓形形狀,并且它們作為設(shè)計元素更常出現(xiàn)在網(wǎng)站中。 我特別喜歡看到的一個用途是圓形縮略圖,它看起來比通常的矩形更有趣。 因為圓是如此特殊的形狀,我們將為它創(chuàng)造一些特殊的懸停效果!
我們將在本教程中省略瀏覽器前綴。 但你當(dāng)然會在下載文件中找到它們。
那么,讓我們開始吧!
HTML結(jié)構(gòu)
對于大多數(shù)示例,我們將使用以下結(jié)構(gòu):
<ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h4>Use what you have</h4> <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-2"> <div class="ch-info"> <h4>Common Causes of Stains</h4> <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-3"> <div class="ch-info"> <h4>Pink Lightning</h4> <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p> </div> </div> </li> </ul>
雖然我們可以在這里使用圖像,但我們會通過使用背景圖像來給自己更多的選擇。 我們將在以“ch-img-”開頭的類中定義它們。
現(xiàn)在,讓我們做一些懸停效果吧!
CSS樣式
讓我們?yōu)榱斜砗土斜眄椂x一些常見的樣式:
.ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; }
一些示例將具有不同的結(jié)構(gòu),但我們將更詳細(xì)地研究每個示例。
示例1
第一個例子是通過縮放來揭示描述,我們還將為".ch-item"的內(nèi)陰影設(shè)置動畫。 所以讓我們定位".ch-item"并設(shè)置一個漂亮的,內(nèi)陰影和過渡:
.ch-item { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }
正如您之前注意到的那樣,我們已經(jīng)為列表項提供了兩個類:一個是ch-item,另一個用于定義特定的背景圖像:
.ch-img-1 { background-image: url(../images/1.jpg); } .ch-img-2 { background-image: url(../images/2.jpg); } .ch-img-3 { background-image: url(../images/3.jpg); }
".ch-info"將設(shè)置為絕對定位,我們將通過設(shè)置RGBA值為其提供半透明背景。 它的不透明度將設(shè)置為0,我們也將它縮小到0:
.ch-info { position: absolute; background: rgba(63,147,147, 0.8); width: inherit; height: inherit; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); }
標(biāo)題將具有一些padding和margin以及平滑的文本陰影:
.ch-info h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }
p元素的不透明度為0和一個過渡(我們希望在懸停時將其淡入但有延遲時間):
.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 1s ease-in-out 0.4s; }
鏈接將使用大寫字母,我們將懸停顏色設(shè)置為黃色:
.ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }
現(xiàn)在,有趣的懸停動作! ".ch-item"的內(nèi)陰影的尺寸從16px設(shè)置為1px:
.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); }
".ch-info"將淡入并縮放到1:
.ch-item:hover .ch-info { transform: scale(1); opacity: 1; }
描述的段落p將會淡入(延遲):
.ch-item:hover .ch-info p { opacity: 1; }
這是第一個例子! 我們來看看下一個。
示例2
此示例中的HTML結(jié)構(gòu)與第一個中的HTML結(jié)構(gòu)相同。
在這個例子中,我們將使用".ch-item"的陰影來填充我們的圓并作為描述的背景。 所以,這里沒什么特別的,只是多了一個陰影值:
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }
背景圖像:
.ch-img-1 { background-image: url(../images/4.jpg); } .ch-img-2 { background-image: url(../images/5.jpg); } .ch-img-3 { background-image: url(../images/6.jpg); }
".ch-info"將再次縮放:
.ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden; }
讓我們設(shè)計文本元素的風(fēng)格:
.ch-info h4 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 65px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }
在懸停時,我們會將內(nèi)陰影(偏紅的陰影)設(shè)置為110px展開半徑。 這將涵蓋所有的圓:
.ch-item:hover { box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); }
我們將縮放".ch-info"并淡化它:
.ch-item:hover .ch-info { opacity: 1; transform: scale(1); }
示例3
在這個例子中,我們將使用旋轉(zhuǎn)。 結(jié)構(gòu)將與前兩個示例略有不同,因為我們需要將".ch-thumb"添加為第二個分區(qū)。 所以列表項看起來如下:
<li> <div class="ch-item"> <div class="ch-info"> <h4>Music poster</h4> <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p> </div> <div class="ch-thumb ch-img-1"></div> </div> </li>
".ch-item"的樣式將與之前一樣(帶有微妙的陰影):
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
".ch-thumb"元素將具有特定的變換原點(位于右中間的某個位置)和過渡。 這將是我們想要在懸停時向下旋轉(zhuǎn)的元素,以便它顯示".ch-info"元素:
.ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); transform-origin: 95% 40%; transition: all 0.3s ease-in-out; }
使用偽類:創(chuàng)建一個帶有徑向漸變的小黃銅緊固件:
.ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); }
讓我們?yōu)槊總€".ch-thumb"元素定義背景圖像:
.ch-img-1 { background-image: url(../images/7.jpg); z-index: 12; } .ch-img-2 { background-image: url(../images/8.jpg); z-index: 11; } .ch-img-3 { background-image: url(../images/9.jpg); z-index: 10; }
".ch-info"元素的樣式如下:
.ch-info { position: absolute; width: inherit; height: inherit; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); }
文本元素將按以下方式定位和設(shè)置樣式:
.ch-info h4 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }
鏈接將是一個小圓圈,應(yīng)該在懸停時從右側(cè)移入:
.ch-info p a { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transform: translateX(60px) rotate(90deg); } .ch-info p a:hover { background: rgba(255,255,255,0.5); }
由于我們希望移動和不透明度發(fā)生延遲,但背景懸停沒有過渡,我們將分離過渡。
在懸停時,我們將旋轉(zhuǎn)".ch-thumb"并移動/旋轉(zhuǎn)鏈接元素:
.ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); transform: rotate(-110deg); } .ch-item:hover .ch-info p a{ opacity: 1; transform: translateX(0px) rotate(0deg); }
示例4
第四個例子將涉及一些3D旋轉(zhuǎn)。 因此,我們需要調(diào)整結(jié)構(gòu),以便有一個容器用于透視和前面和后面。 因此,列表項將如下所示:
<li> <div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h4>Bears Type</h4> <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p> </div> </div> </div> </div> </li>
如您所見,我們將背景圖像添加到".ch-item"以及".ch-info-front"。 訣竅是給".ch-info-wrap"提供相同的背景。
這將產(chǎn)生幻覺,好像我們的".ch-item"有一個洞。
".ch-item"將具有以下的樣式:
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
".ch-info-wrap"將有透視屬性,我們還將添加陰影的過渡:
.ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }
".ch-info"將需要preserve-3d值用于變換樣式,我們將給它一個過渡,因為這是我們將在3d中旋轉(zhuǎn)的元素:
.ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; }
正面和背面將具有以下常見樣式:
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden; }
背面將旋轉(zhuǎn),以便我們開始不會看到它:
.ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); background: #000; }
再次,背景圖片:
.ch-img-1 { background-image: url(../images/10.jpg); } .ch-img-2 { background-image: url(../images/11.jpg); } .ch-img-3 { background-image: url(../images/12.jpg); }
...和文本元素:
.ch-info h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }
在懸停時,我們將更改".ch-info-wrap"的陰影并旋轉(zhuǎn)".ch-info",以便我們看到背面:
.ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg); }
示例5
在此示例中,我們希望將".ch-thumb"縮小為0,并通過將其淡入并將其縮小為1來顯示".ch-info"。 第五示例的結(jié)構(gòu)與前一示例中的相同。
該".ch-item"具有以下的風(fēng)格:
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
".ch-info-wrap"和".ch-info"將具有以下常見樣式:
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; }
讓我們通過將相同的背景設(shè)置給".ch-info-wrap"來再次執(zhí)行“漏洞”技巧:
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }
常見的樣式是“前面”和“背面”(它不再是正面和背面):
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; }
“前面”將有一個過渡(它會縮小并消失):
.ch-info .ch-info-front { transition: all 0.6s ease-in-out; }
".ch-info-back"最初將具有0不透明度并且可以擴(kuò)展到1.5:
.ch-info .ch-info-back { opacity: 0; background: #223e87; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s; }
我們需要將pointer-events設(shè)置為none,因為我們不希望元素“阻塞”其他所有內(nèi)容...記住,它被放大,我們因為它的不透明性而無法看到它,但它仍然存在。
像往常一樣的背景圖像和文本元素,只是有一些不同的顏色:
.ch-img-1 { background-image: url(../images/13.jpg); } .ch-img-2 { background-image: url(../images/14.jpg); } .ch-img-3 { background-image: url(../images/15.jpg); } .ch-info h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: #e7615e; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: #fff; }
在懸停時,我們將縮小".ch-info-front"部分為0并將不透明度設(shè)置為0.這將使其消失在后面。
.ch-item:hover .ch-info-front { transform: scale(0); opacity: 0; }
".ch-info-back"將縮小為1并淡入。我們還將pointer event事件設(shè)置為auto,因為現(xiàn)在我們希望能夠單擊鏈接:
.ch-item:hover .ch-info-back { transform: scale(1); opacity: 1; pointer-events: auto; }
示例6
在此示例中,我們希望向下翻轉(zhuǎn)內(nèi)部".ch-thumb"部分以顯示描述。 HTML將與前兩個示例中的相同。
".ch-item"將按以前的樣式設(shè)置:
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
The common style of the wrapper and the description element:
".ch-info-wrap", ".ch-info"元素的通用樣式:
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; }
".ch-info-wrap"將具有透視:
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); perspective: 800px; }
".ch-info"元素需要以下轉(zhuǎn)換樣式:
.ch-info { transform-style: preserve-3d; }
正面和背面將有一個過渡。 請注意,這次我們不會將backface-visibility設(shè)置為hidden,因為我們希望".ch-thumb"的背面在我們向下翻轉(zhuǎn)時顯示:
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.6s ease-in-out; }
讓我們設(shè)置正確的transform-origin,以便我們可以打開它:
.ch-info .ch-info-front { transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1); }
我們將為".ch-info-back"設(shè)置一個0不透明度的RGBA值:
.ch-info .ch-info-back { background: rgba(230,132,107,0); }
和其他元素的通常風(fēng)格:
.ch-img-1 { background-image: url(../images/16.jpg); } .ch-img-2 { background-image: url(../images/17.jpg); } .ch-img-3 { background-image: url(../images/18.jpg); } .ch-info h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 25px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }
在懸停時,我們將旋轉(zhuǎn)前部并略微為陰影設(shè)置動畫。 后部將以其背景顏色淡化:
.ch-item:hover .ch-info-front { transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3); } .ch-item:hover .ch-info-back { background: rgba(230,132,107,0.6); }
示例7
最后一個示例將像旋轉(zhuǎn)立方體一樣,我們通過從頂部向后旋轉(zhuǎn)它來顯示描述。 由于我們將旋轉(zhuǎn)每個面,因此我們不需要額外的父級元素。 因此,我們的HTML將如下所示:
<li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h4>Mouse</h4> <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p> </div> </div> </div> </li>
我們將為".ch-item"提供透視值:
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; perspective: 900px; }
".ch-info"將需要preserve-3d值:
.ch-info{ position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; }
正面和背面將具有過渡,變換原點將設(shè)置為50%0%:
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.4s linear; transform-origin: 50% 0%; }
讓我們?yōu)榍懊娌糠衷O(shè)置一個漂亮的內(nèi)陰影:
.ch-info .ch-info-front { box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3); }
背面將在最初旋轉(zhuǎn),以顯示為立方體的下表面:
.ch-info .ch-info-back { transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0; }
背景圖像和文本元素的通常風(fēng)格:
.ch-img-1 { background-image: url(../images/19.jpg); } .ch-img-2 { background-image: url(../images/20.jpg); } .ch-img-3 { background-image: url(../images/21.jpg); } .ch-info h4 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info p a { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info p a:hover { color: rgba(255,242,34, 0.8); }
我們將使用translate3d在3d空間的Y軸上移動前部,并使用rotate3d實際旋轉(zhuǎn)它。 我們也會淡出它,因為我們之后不希望看到它的任何部分:
.ch-item:hover .ch-info-front { transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); opacity: 0; }
背面將“向后”旋轉(zhuǎn)到0度(記住,最初它向下旋轉(zhuǎn)):
.ch-item:hover .ch-info-back { transform: rotate3d(1,0,0,0deg); opacity: 1; }
看完了這篇文章,相信你對“如何使用CSS Transitions實現(xiàn)圓形懸停效果”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
文章名稱:如何使用CSSTransitions實現(xiàn)圓形懸停效果-創(chuàng)新互聯(lián)
新聞來源:http://muchs.cn/article8/cddoop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、響應(yīng)式網(wǎng)站、服務(wù)器托管、動態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)頁設(shè)計公司
聲明:本網(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)容