Maison > Article > interface Web > Un simple effet de survol (html)
Un simple effet de survol (html)
- 零下一度original
- 2017-04-28 15:30:282155parcourir
Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 php中文网。
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 ~ p.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 ~ p.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 > p {
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 > p {
height: 0%
}
.item-2:HOVER > p {
height: 0%;
top: 50%;
}
.item-3:HOVER > p {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
}
.item-4:HOVER > p {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
-moz-transform: rotate(360deg);
}
.item-5:HOVER > p {
height: 0%;
left: 50%;
top: 50%;
width: 0%;
-moz-transform: rotate(-360deg);
}
.item-6 > p {
height: 50%;
width: 50%;
}
.item-6 > p:NTH-CHILD(2) {
left: 50%;
top: 0;
}
.item-6 > p:NTH-CHILD(3) {
left: 0;
top: 50%;
}
.item-6 > p:NTH-CHILD(4) {
left: 50%;
top: 50%;
}
.item-6:HOVER > p {
height: 0;
width: 0;
/*-moz-transform: rotate(-360deg);*/
}
.item-6:HOVER > p:NTH-CHILD(2) {
left: 100%;
/*-moz-transform: rotate(360deg);*/
}
.item-6:HOVER > p:NTH-CHILD(3) {
top: 100%;
}
.item-6:HOVER > p: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;
width: 0;
}4. [代码][HTML]
<body>
<a class="clear">请不要点我。</a>
<p class="items clear">
<p class="item item-1">
<p></p>
<img src="350x231/1.jpg" alt="" />
</p>
<p class="item item-2">
<p></p>
<img src="350x231/2.jpg" alt="" />
</p>
<p class="item item-3">
<p></p>
<img src="350x231/3.jpg" alt="" />
</p>
<p class="item item-4">
<p></p>
<img src="350x231/4.jpg" alt="" />
</p>
<p class="item item-5">
<p></p>
<img src="350x231/5.jpg" alt="" />
</p>
<p class="item item-6">
<p></p>
<p></p>
<p></p>
<p></p>
<img src="350x231/6.jpg" alt="" />
</p>
</p>
<p id="preloader"></p>
</body>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir du HTML en fonction du presse-papiers spécifié ?Article suivant：Comment obtenir du HTML en fonction du presse-papiers spécifié ?