css多款炫酷鼠标悬停

原创 1325009640 随笔 css 233阅读 2016-12-28 10:34:54 举报

<!doctype html>
<html lang="zh">
<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/lanren.css">
</head>
<body>

<!-- 代码部分begin -->
<div class="lanren">
    <div class="full-length">
        <div class="container">
            <!-- Effect-1 -->
            <h2><span>Effects 1</span></h2>
            <ul>
                <li>
                    <div class="port-1 effect-1">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-1 effect-2">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-1 effect-3">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-1 End -->

            <!-- Effect-2 -->
            <h2><span>Effects 2</span></h2>
            <ul>
                <li>
                    <div class="port-2 effect-1">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-2 effect-2">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-2 effect-3">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-2 End -->

            <!-- Effect-3 -->
            <h2><span>Effects 3</span></h2>
            <ul>
                <li>
                    <div class="port-3 effect-1">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-3 effect-2">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-3 effect-3">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-3 End -->

            <!-- Effect-4 -->
            <h2><span>Effects 4</span></h2>
            <ul>
                <li>
                    <div class="port-4 effect-1">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-4 effect-2">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-4 effect-3">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-4 End -->

            <!-- Effect-5 -->
            <h2><span>Effects 5</span></h2>
            <ul>
                <li>
                    <div class="port-5 effect-1">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-5 effect-2">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-5 effect-3">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-5 End -->

            <!-- Effect-6 -->
            <h2><span>Effects 6</span></h2>
            <ul>
                <li>
                    <div class="port-6 effect-1">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-6 effect-2">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-6 effect-3">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-6 End -->

            <!-- Effect-7 -->
            <h2><span>Effects 7</span></h2>
            <ul>
                <li>
                    <div class="port-7 effect-1">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-7 effect-2">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-7 effect-3">
                        <div class="image-box">
                            <img src="images/img-1.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-7 End -->

            <!-- Effect-8 -->
            <h2><span>Effects 8</span></h2>
            <ul>
                <li>
                    <div class="port-8 effect-1">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-1">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-8 effect-2">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-2">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="port-8 effect-3">
                        <div class="image-box">
                            <img src="images/img-2.jpg" alt="Image-3">
                        </div>
                        <div class="text-desc">
                            <h3>Your Title</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                            <a href="#" class="btn">Learn more</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- Effect-8 End -->
        </div>
    </div>
</div>
<!-- 代码部分end -->

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复