酷炫的鼠标滑过添加遮罩层效果
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-。
怎么样，是不是很简单~赶紧试试一下子去吧，通过你的想象力，多搞点儿其他效果出来，加油哦，骚年~
以上是关于酷炫的鼠标滑过添加遮罩层效果的主要内容，如果未能解决你的问题，请参考以下文章