一款基于css3鼠标经过圆形旋转特效_html/css_WEB-ITnose
Jun 24, 2016 am 11:49 AM
今天给大家分享一款基于css3鼠标经过圆形旋转特效。当鼠标经过的时候图片边框颜色旋转,图片显示详情。该实例适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<div class="case-content"> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="学习LOS" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题一"> 标题一</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题二"> 标题二</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题三"> 标题三</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/4.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题四"> 标题四</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/5.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题五"> 标题五</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/3.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题六"> 标题六</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/2.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题七"> 标题七</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> <div class="case-item"> <div class="ih-item circle effect1"> <a href="http://www.w2bc.com/"> <div class="spinner"> </div> <div class="img"> <img src="/static/imghw/default1.png" data-src="images/1.jpg" class="lazy" alt="学习" style="max-width:90%" style="max-width:90%"></div> <div class="info"> <div class="info-back"> <h3 id="标题八"> 标题八</h3> <p> 好好学习,天天向上</p> </div> </div> </a> </div> </div> </div>
via:http://www.w2bc.com/Article/23952

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?
