HTML：简单的悬停效果

最新推荐文章于 2023-05-02 09:55:03 发布

weixin_30729609

最新推荐文章于 2023-05-02 09:55:03 发布

阅读量187

点赞数

原文链接：http://www.cnblogs.com/xkzy/p/3937552.html

版权

1. [图片] 捕获.jpg

2. [代码][CSS]代码
body {
background: #000;
overflow-y: scroll;
}
.items {
margin: 40px auto;
width: 1110px;
}
a {
color: #FFF;
cursor: pointer;
margin: 0 0 20px 620px;
text-align: center;
text-decoration: none;
}
a:HOVER {
color: red;
}
a:HOVER ~ div.items {
border: 1px solid #FFF;
background: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg') no-repeat scroll center center transparent;
height: 500px;
}
a:HOVER ~ div.items > *{
display: none;
}
.item {
border: 10px solid #FFF;
cursor: pointer;
float: left;
height: 231px;
width: 350px;

-moz-transform: scale(0.8);
-moz-transition: all 0.5s ease-in-out 0s;
}
.item > div {
background: rgba(0,0,0,0.7);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;

-moz-transition: all 0.5s ease-in-out 0s;
}
.item:HOVER {
-moz-transform: scale(1);
}
.item-1:HOVER > div {
height: 0%
}
.item-2:HOVER > div {
height: 0%;
top: 50%;
}
.item-3:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
}
.item-4:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;

-moz-transform: rotate(360deg);
}
.item-5:HOVER > div {
height: 0%;
left: 50%;
top: 50%;
width: 0%;

-moz-transform: rotate(-360deg);
}
.item-6 > div {
height: 50%;
width: 50%;
}
.item-6 > div:NTH-CHILD(2) {
left: 50%;
top: 0;
}
.item-6 > div:NTH-CHILD(3) {
left: 0;
top: 50%;
}
.item-6 > div:NTH-CHILD(4) {
left: 50%;
top: 50%;
}
.item-6:HOVER > div {
height: 0;
width: 0;
/*-moz-transform: rotate(-360deg);*/
}
.item-6:HOVER > div:NTH-CHILD(2) {
left: 100%;
/*-moz-transform: rotate(360deg);*/
}
.item-6:HOVER > div:NTH-CHILD(3) {
top: 100%;
}
.item-6:HOVER > div:NTH-CHILD(4) {
left: 100%;
top: 100%;
/*-moz-transform: rotate(360deg);*/
}
.clear:AFTER {
clear: both;
content: '\0020';
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
width: 0;
}
#preloader {
background-image: url('http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg');
height: 0;http://www.bizhizu.cn/shouhui/
width: 0;
}
3. [代码][HTML]代码
<body> 手绘图片
<a class="clear">请不要点我。</a>
<div class="items clear">
<div class="item item-1">
<div></div>
<img src="350x231/1.jpg" alt="" />
</div>
<div class="item item-2">
<div></div>
<img src="350x231/2.jpg" alt="" />
</div>
<div class="item item-3">
<div></div>
<img src="350x231/3.jpg" alt="" />
</div>
<div class="item item-4">
<div></div>
<img src="350x231/4.jpg" alt="" />
</div>
<div class="item item-5">
<div></div>
<img src="350x231/5.jpg" alt="" />
</div>
<div class="item item-6">
<div></div>
<div></div>
<div></div>
<div></div>
<img src="350x231/6.jpg" alt="" />
</div>
</div>
<div id="preloader"></div>
</body>

转载于:https://www.cnblogs.com/xkzy/p/3937552.html

weixin_30729609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML：简单的悬停效果

1.[图片]捕获.jpg2. [代码][CSS]代码 body { background: #000; overflow-y: scroll; } .items { margin: 40px auto; width: 1110px; } a { color: #FFF; cursor: pointer; margin: 0...
复制链接

扫一扫