鼠标移动图片上遮罩效果

最新推荐文章于 2023-12-12 09:30:23 发布

fly18702787810

最新推荐文章于 2023-12-12 09:30:23 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/fly18702787810/article/details/68483303

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    body{
        background-color:#1b1e24;
    }
    .shape{
        width:300px;
        height:300px;
        position:relative;
    }
    .shape .bg {
        background: #4b5a78;
    }
    .shape .bg,
    .shape .detail{
        position:absolute;
        width:300px;
        height:300px;
        vertical-align:middle;
        text-align:center;
        display:table-cell;
        top:0;
        left:0;
        opacity:0;
        transition:all 0.3s ease;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;
        display:none;
    }

    .shape .detail span.heading{
        font-family: 'Roboto Condensed', serif;
        display:block;
        margin-top:70px;
        font-size:30px;
        color:#fff;
        text-decoration:none;
    }

    .shape .detail p{
        font-family:'Abel', sans-serif;
        color:#fff;
        font-size:14px;
        width:70%;
        margin:0 auto;
    }

    .shape .detail .button{
        font-family: 'Abel', sans-serif;
        color:#fff;
        width:50px;
        border-radius:20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        text-decoration:none;
        padding:5px 15px;
        background: #2f3644;
        font-size:14px;
        text-align:center;
        display:block;
        margin:0 auto;
        margin-top:15px;
    }

    .shape a.button:hover{
        background: #fff;
        color: #2f3644;
    }

    .shape:hover .bg {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
        opacity: 0.8;
        display:block;
    }

    .shape .overlay{
        display:block;
        width:310px;
        height:310px;
        position:absolute;
        top:-5px;
        left:-5px;
        transform:scale(1,1);
        -moz-transform:scale(1,1);
        -webkit-transform: scale(1,1);
        transition-duration:0.6s;
        -moz-transition-duration:0.6s;
        -webkit-transition-duration:0.6s;
        pointer-events:none;/*允许鼠标点击穿透后面*/
        z-index:500;   /*用来去掉伸长的下划线*/
        background-repeat:no-repeat;
        outline:none;
        transition-timing-function:ease-out; /*动画执行速度效果*/
        -webkit-transition-timing-function:ease-out;
        -moz-transition-timing-function:ease-out;
    }
    .shape .overlay.round{
        background:url("../image/round.png");
    }

    .shape:hover .overlay{
        transform:scale(1.07,1.07);
        -moz-transform: scale(1.07,1.07);
        -webkit-transform:scale(1.07,1.07);
        -o-transform:scale(1.07,1.07);
        transition-duration:0.3s;
        -moz-transition-duration:0.3s;
        -webkit-transition-duration:0.3s;
        -o-transition-duration:0.3s;
        transition-timing-function:ease-out;
        -moz-transition-timing-function:ease-out;
        -webkit-transition-timing-function:ease-out;
        -o-transition-timing-function:ease-out;
    }
    .shape:hover .detail{
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        display:block;
        opacity:1;
        -moz-opacity:1;
        z-index:450;
        filter: alpha(opacity=100);
    }

</style>
<body>
<div>
    <ul>
        <li>
            <div class="shape">
                <a href="#" class="overlay round"></a>
                <div class="detail">
                    <span class="heading">标题部分</span>
                    <hr />
                    <p>这是一个特效网站，可以实现图片的遮罩功能，效果不好的话请见谅</p>
                    <a href="" class="button">访问</a>
                </div>
                <div class="bg"></div>
                <div class="base">
                    <img src="../image/1.jpg">
                </div>

            </div>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

fly18702787810

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动图片上遮罩效果

html>html>head lang="en"> meta charset="UTF-8"> title>title>head>style> *{ margin:0; padding:0; } body{ background-color:#1b1e24; } .shape{
复制链接

扫一扫