首页 > 代码库 > 酷炫的鼠标滑过添加遮罩层效果

酷炫的鼠标滑过添加遮罩层效果

2024-08-31 03:46:46   217人阅读

　　今天，没错又是今天，今天做的事情还真是多呢~还修了洗衣机，貌似除了写代码不行，样样都行了呢~

　　好了，言归正传。今天在浏览一个网页时，鼠标滑过它的图片，出现了一种我感觉很酷炫的效果。像这样：

　　自己感受下~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
  div {
    position: relative;
    width: 500px;
    height: 500px; 
    line-height: 500px;
    background: rgba(0,0,0,.8);
    transition: 0.5s;
    overflow: hidden;
  }

  p {
    color: #fff;
    text-align: center;
  }

  p:before {
    content: "";
    position: absolute;
    left: -50%;
    top: 48%;
    display: block;
    margin: 0;
    height: 0%;
    width: 200%;
    transform: rotate(-55deg);
    background: url("https://livedemo00.template-help.com/wordpress_51145/wp-content/themes/theme51145/images/white-opacity.png");
    transition: 0.5s;
  }

  div:hover p:before {
    position: absolute;
    left: -50%;
    top: -80%;
    height: 300%;
    width: 200%;
    margin: 0;
    transform: rotate(-55deg);
  }
    </style>
</head>
<body>
<div>
<p>我是小可爱</p>
</div>
</body>
</html>

怎么样，有没有觉得很有趣~

原网页上的代码没有发现它全部的实现原理。

上边这个是我根据它的部分自己添加的，所以不知道是不是最优的方法，但效果是一样一样的~

总结起来就是：

　　　　　　1.先插入一个带有透明效果的图片（当然了直接整个rgba的div效果也是一样的），设置它的高度或者宽度为0%（根据旋转角度与实现效果自定），定位到你想要的位置上给他旋转一个角度（可以根据角度实现不同方向的切换，如上下，左右啦。还可以通过组合实现旋转什么，就不一一列举了）。

　　　　　　2.然后，就是设置当鼠标滑过时，让它可以填满你得整个你想要覆盖的元素，最好超过（设置个父元素overflow:hidden），这样比较保险。

　　　　　　3.解决跨浏览器兼容，毕竟是CSS3（我比较懒，并没有设置）。友情提示，这里边主要是transition和transform,-o- -webit- -moz-。

怎么样，是不是很简单~赶紧试试一下子去吧，通过你的想象力，多搞点儿其他效果出来，加油哦，骚年~

酷炫的鼠标滑过添加遮罩层效果


联系
我们