您现在的位置是:首页 > 学无止境> CSS3|HTML5网站首页学无止境CSS3|HTML5

CSS3鼠标经过立体翻转切换特效

css3  
简介
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3鼠标经过立体翻转切换特效</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index-content.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/global.js" ></script>
</head>
<body>
<ul class="regularly-item-list">
    <li class="viewport-flip">
        <div class="flip-box flip out">
            <dl class="flip-lists">
                <img src="images/2.jpg">
            </dl>
        </div>
        <div class="flip-box flip">
            <img src="images/1.jpg">
        </div>
    </li>
    
    <li class="viewport-flip">
        <div class="flip-box flip out">
            <dl class="flip-lists">
                <img src="images/2.jpg">
            </dl>
        </div>
        <div class="flip-box flip">
            <img src="images/1.jpg">
        </div>
    </li>
    
    <li class="viewport-flip">
        <div class="flip-box flip out">
            <dl class="flip-lists">
                <img src="images/2.jpg">
            </dl>
        </div>
        <div class="flip-box flip">
            <img src="images/1.jpg">
        </div>
    </li>
    
</ul>
</body>
</html>

在线预览:CSS3鼠标经过立体翻转切换特效

在线下载:fanzhuan.zip


Top