A circular rotation special effect based on css3 mouse_html/css_WEB-ITnose

Today I will share with you a circular rotation special effect based on css3 mouse. When the mouse passes over it, the color of the picture border rotates and the picture details are displayed. This example is applicable to browsers: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, and Window of the World. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <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="images/1.jpg" alt="学习LOS" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题一</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="images/2.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题二</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="images/3.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题三</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="images/4.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题四</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="images/5.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题五</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="images/3.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题六</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="images/2.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题七</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="images/1.jpg" alt="学习" height="200" width="200"></div>                    <div class="info">                        <div class="info-back">                            <h3>                                标题八</h3>                            <p>                                好好学习，天天向上</p>                        </div>                    </div>                </a>            </div>        </div>    </div>

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