zoukankan      html  css  js  c++  java
  • 基于jQuery遮罩图片hover翻转效果

    基于jQuery遮罩图片hover翻转效果。这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效。效果图如下:

    在线预览    源码下载

    实现的代码。

    html代码:

    <div class="index_hd">
        <div class="fr hd_r major-list-outer">
            <ul class="major-list">
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1413775760-7544.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-left"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1400684346-4329.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-right"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1413775714-2418.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1411890878-8918.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1413775714-2418.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1400684434-4609.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1428032296-8158.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
                <li class="major-item">
                    <a href="http://www.w2bc.com/">
                        <span class="txt-hide front-face">
                            <img src="images/1405250374-3685.jpg" width="294" height="267">
                        </span>
                        <span class="back-face to-top"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

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

  • 相关阅读:
    Coursera self-driving2, State Estimation and Localization Week2, kalman filter 卡尔曼滤波
    Coursera Self-driving1, introduction
    Coursera, Big Data 5, Graph Analytics for Big Data, Week 5
    初创电商公司Drop的数据湖实践
    什么是LakeHouse?
    Apache Hudi 0.5.1版本重磅发布
    Apache Hudi使用问题汇总(一)
    ApacheHudi常见问题汇总
    写入Apache Hudi数据集
    Hudi基本概念
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4522211.html
Copyright © 2011-2022 走看看