Jadual Kandungan
标题一
标题二
标题三
标题四
标题五
标题六
标题七
标题八
Rumah hujung hadapan web html tutorial 一款基于css3鼠标经过圆形旋转特效_html/css_WEB-ITnose

一款基于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>
Salin selepas log masuk

via:http://www.w2bc.com/Article/23952

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

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 saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

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

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

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; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

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

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Apakah tujuan & lt; DATALIST & GT; unsur?

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Mar 18, 2025 pm 02:51 PM

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

See all articles