<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆形鼠标悬停效果</title> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <link rel="stylesheet" type="text/css" href="css/style5.css" /> </head> <body> <div class="container"> <header> <h1><strong>圆形</strong> 鼠标悬停效果</h1> <h2>漂亮的css3圆形鼠标悬停效果</h2> </header> <section class="main"> <ul class="ch-grid"> <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"> <h3>taxi</h3> <p>by Ana Villa-Zamora <a href="#">View on Dribbble</a></p> </div> </div> </div> </div> </li> <li> <div class="ch-item ch-img-2"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-2"></div> <div class="ch-info-back"> <h3>Stay Foxy</h3> <p>by Arnel Baluyot <a href="#">View on Dribbble</a></p> </div> </div> </div> </div> </li> <li> <div class="ch-item ch-img-3"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-3"></div> <div class="ch-info-back"> <h3>Klava Jinx</h3> <p>by Jamal Charanek <a href="#">View on Dribbble</a></p> </div> </div> </div> </div> </li> </ul> </section> </div> </body> </html> <!-- 文章来源：漂亮的css3圆形鼠标悬停效果实例 http://www.webkaka.com/tutorial/html/2019/092059/ //-->
卡卡测速网
>
html技术
>
漂亮的css3圆形鼠标悬停效果实例
添加收藏
下载源代码
|
运行结果
demo.html
运行代码
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX