html 鼠标悬停特效

发布网友发布时间：2022-04-23 10:13

共2个回答

懂视网时间：2022-05-12 20:27

$velocityCount-->

Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 Gxl网。

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: '

全部栏目

html 鼠标悬停特效