今天，没错又是今天，今天做的事情还真是多呢~还修了洗衣机，貌似除了写代码不行，样样都行了呢~
好了，言归正传。今天在浏览一个网页时，鼠标滑过它的图片，出现了一种我感觉很酷炫的效果。像这样：
自己感受下~
<!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-。
怎么样，是不是很简单~赶紧试试一下子去吧，通过你的想象力，多搞点儿其他效果出来，加油哦，骚年~
时间： 2024-10-22 05:03:52