CSS3实现鼠标悬停多种效果

最新推荐文章于 2024-06-01 19:28:30 发布

Mr.王征

最新推荐文章于 2024-06-01 19:28:30 发布

阅读量8.9k

点赞数 8

分类专栏： CSS 文章标签： css3 css3鼠标悬停效果 css3特效

本文链接：https://blog.csdn.net/wangzhneg123/article/details/88011364

版权

CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯CSS3实现鼠标悬停多种效果</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #box {
            width: 470px;
            height: 370px;
            border: 1px solid blue;
            margin: 30px auto;
            padding: 5px;
            box-shadow: 2px 2px 2px green;
            border-radius: 8px;
            background: #7FEB8E;
            opacity: 0.8;
        }

        #box1 {
            width: 190px;
            height: 140px;
            border: 0px solid #ccc;
            margin: 5px;
            position: relative;
            background: #E9710E;
            overflow: hidden;
        }

        /*用于放置img的div*/
        #timg {
            width: 190px;
            height: 140px;
            border: 0px solid red;
        }

        #box1 #hd {
            width: 186px;
            height: 136px;
            border: 3px solid white;
            position: absolute;
            top: -148px;
            left: 0px;
            background: #E2DB4D;
            transform: rotateX(270deg);
            transition: all 0.5s ease-in-out;
        }

        #box1 p {
            display: block;
            position: absolute;
            top: 150px;
            left: 48px;
            font-weight: bold;
            transition: all 0.5s ease-in-out;
        }

        span {
            position: absolute;
            top: 50px;
            left: 46px;
            text-shadow: 2px 2px 5px #ccc;
        }

        #box1:hover #p1 {
            top: 100px;
        }

        #box1:hover #hd {
            transform: translate(0px, 147px);
        }

        /**---------------------------------------------------*/
        #box2 {
            width: 190px;
            height: 140px;
            border: 0px solid #ccc;
            margin: 5px;
            position: relative;
            left: 270px;
            top: -145px;
            background: #E9710E;
            overflow: hidden;
        }

        #timg2 {
            width: 190px;
            height: 140px;
            border: 0px solid #7FBEED;
        }

        #hd2 {
            width: 185px;
            height: 135px;
            border: 3px solid white;
            background: #E2DB4D;
            position: absolute;
            top: 0px;
            left: -198px;
            transition: all 0.3s ease-in-out;
        }

        #p2 {
            width: 145px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: 140px;
            left: 23px;
            transition: all 0.3s ease-in-out;
        }

        #box2:hover #hd2 {
            transform: translate(198px, 0px);
        }

        #box2:hover #p2 {
            transform: translate(0px, -40px);
        }

        /*--------------------------------------*/
        #box3 {
            width: 190px;
            height: 140px;
            border: 0px solid #ccc;
            margin: 5px;
            position: relative;
            left: 0px;
            top: -80px;
            background: #E9710E;
            overflow: hidden;
        }

        #timg3 {
            width: 189px;
            height: 139px;
            border: 1px solid #ccc;
        }

        #hd3 {
            width: 186px;
            height: 135px;
            border: 3px solid white;
            background: #E2DB4D;
            position: absolute;
            transform: rotateX(270deg);
            transition: all 0.3s ease-in-out;
        }

        #p3 {
            width: 145px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: 140px;
            left: 23px;
            transition: all 0.3s ease-in-out;
        }

        #box3:hover #hd3 {
            transform: rotateX(360deg);
        }

        /*------------------------------------*/
        #box4 {
            width: 190px;
            height: 140px;
            border: 0px solid #ccc;
            margin: 5px;
            position: relative;
            left: 270px;
            top: -225px;
            background: #E9710E;
            overflow: hidden;
        }

        #timg4 {
            width: 190px;
            height: 140px;
            border: 1px solid #7FBEED;
        }

        #hd4 {
            width: 185px;
            height: 135px;
            border: 3px solid white;
            background: #E2DB4D;
            position: absolute;
            /*透明度设置为0  隐藏滑动div*/
            opacity: 0;
            transition: all 0.6s ease-in-out;
        }

        #box4:hover #hd4 {
            opacity: 1;
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div id="box">
    <div id="box1">
        <div id="hd"></div>
        <div id="timg">
            <span>玩转CSS3特效</span>
        </div>
        <p id="p1">小明到</p>
    </div>


    <div id="box2">
        <div id="hd2"></div>
        <div id="timg2">
            <span>玩转CSS3特效</span>
        </div>
        <p id="p2">小明到</p>
    </div>
    <div id="box3">
        <div id="hd3">
            <h2>小明到</h2>
        </div>
        <div id="timg3">
            <span>玩转CSS3特效</span>
        </div>

    </div>
    <div id="box4">
        <div id="hd4">
            <h2>小明到</h2>
        </div>
        <div id="timg4">
            <span>玩转CSS3特效</span>
        </div>

    </div>
</div>

<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例  希望能给你一些帮助 ,希望大家继续关注我的博客

                                                                               --王
</pre>

</body>
</html>

Mr.王征

关注

8
点赞
踩
42

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现鼠标悬停多种效果

效果展示：源码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯CSS3实现鼠标悬停多种效果&lt;/title&gt; &lt;style&gt; * { mar
复制链接

扫一扫

专栏目录