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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了酷炫的鼠标滑过添加遮罩层效果相关的知识,希望对你有一定的参考价值。

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

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

  自己感受下~

<!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-。

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

以上是关于酷炫的鼠标滑过添加遮罩层效果的主要内容,如果未能解决你的问题,请参考以下文章

纯CSS3写的10个不同的酷炫图片遮罩层效果

纯CSS3写的10个不同的酷炫图片遮罩层效果

jQuery漂亮图标的垂直导航菜单

flash如何添加遮罩层

css3制作酷炫的相册集动画

jquery制作居中遮罩层效果分享