鼠标悬浮实现各种图片散开的特效

这篇博客介绍如何利用CSS实现鼠标悬停时图片散开的视觉效果。通过HTML5和CSS技术,可以在鼠标悬停到图片上时,让图片元素产生动态变化,为网页增添互动性。
摘要由CSDN通过智能技术生成

通CSS实现各种图片散开特效,当鼠标悬停在第一张图片上时,图片散开。如下面几幅图。

CSS是

body {
	margin: 0px;
	padding: 0px;
	background-color: #C3CCD5;
	font-family: 'Source Sans Pro', sans-serif;
}
.albums{
	width: 100%;
    float: left;
}
.albums-inner{
	width: 1100px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
.albums-title {
	float: left;
	width: 100%;
	color: rgba(53,117,159,1);
	font-size: 20px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: rgba(53,117,159,1);
	line-height: 50px;
	margin-bottom: 100px;
}
.albums-tab{
	float: left;
	width: 300px;
	margin-right: 100px;
	margin-bottom: 100px;
}
.albums-tab:nth-child(3n+0) {
	margin-right: 0px;
}

.albums-tab-thumb{
	float: left;
	width: 300px;
	height: 200px;
}
.albums-tab-thumb img {
	height: 300px;
	width: 290px;
	background-color: rgba(255,255,255,1);
	padding: 5px;		
}
.albums-tab-text{
	float: left;
	width: 100%;
	text-align: center;
	color: rgba(53,117,159,1);
	margin-top: 15px;
	font-size: 18px;
}
.albums-tab-text span {
	font-size: 14px;
	color: rgba(102,102,102,1);
}

CSS代码部分2

.sim-anim-1{
	position: relative;
	}
.sim-anim-1 img{
	position: absolute;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}	
.sim-anim-1:hover img{
	z-index: 1;
	}		
.sim-anim-1:hover img:nth-child(1){
	 -ms-transform: rotate(10deg); 
    -webkit-transform: rotate(10deg); 
    transform: rotate(10deg);
	}
.sim-anim-1:hover img:nth-child(2){
	 -ms-transform: rotate(-10deg); 
    -webkit-transform: rotate(-10deg); 
    transform: rotate(-10deg);
	}
.sim-anim-1:hover img:nth-child(3){
	-ms-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    transform: rotate(20deg);
	}	
.sim-anim-1:hover img:nth-child(4){
	 -ms-transform: rotate(-20deg); 
    -webkit-transform: rotate(-20deg); 
    transform: rotate(-20deg);
	}
.sim-anim-1:hover img:nth-child(5){
	 -ms-transform: rotate(30deg); 
    -webkit-transform: rotate(30deg); 
    transform: rotate(30deg);
	}
.sim-anim-1:hover img:nth-child(6){
	 -ms-transform: rotate(-30deg); 
    -webkit-transform: rotate(-30deg); 
    transform: rotate(-30deg);
	}
.sim-anim-1:hover img:nth-child(7){
    -ms-transform: scale(0.9,0.9); 
    -webkit-transform: scale(0.9,0.9); 
    transform: scale(0.9,0.9); 
	}	
	
	
.sim-anim-2{
	position: relative;
	}	
.sim-anim-2 img{
	position: absolute;
		-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}
.sim-anim-2:hover img{
	z-index: 1;
	}			
.sim-anim-2:hover img:nth-child(1){
    -ms-transform: translate(-40%,-80%) rotate(-40deg); 
   	-webkit-transform: translate(-40%,-80%)  rotate(-40deg); 
    transform: translate(-40%,-80%)  rotate(-40deg);
	}
.sim-anim-2:hover img:nth-child(2){
    -ms-transform: translate(-30%,-60%) rotate(-30deg); 
   	-webkit-transform: translate(-30%,-60%)  rotate(-30deg); 
    transform: translate(-30%,-60%)  rotate(-30deg);
	}	
.sim-anim-2:hover img:nth-child(3){
    -ms-transform: translate(-20%,-40%) rotate(-20deg); 
   	-webkit-transform: translate(-20%,-40%)  rotate(-20deg); 
    transform: translate(-20%,-40%)  rotate(-20deg);
	}		
.sim-anim-2:hover img:nth-child(4){
    -ms-transform: translate(-10%,-20%) rotate(-10deg); 
   	-webkit-transform: translate(-10%,-20%)  rotate(-10deg); 
    transform: translate(-10%,-20%)  rotate(-10deg);
	}
.sim-anim-2:hover img:nth-child(5){
  	-ms-transform: scale(1.1,1.1) rotate(-5deg); 
    -webkit-transform: scale(1.1,1.1) rotate(-5deg); 
    transform: scale(1.1,1.1) rotate(-5deg);
	}
	
	
.sim-anim-3{
	position: relative;
	}	
.sim-anim-3 img{
	position: absolute;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	}
.sim-anim-3:hover img{
	z-index: 1;
	}		
.sim-anim-3:hover img:nth-child(1){
    -ms-transform: translate(40%,80%) rotate(-40deg); 
   	-webkit-transform: translate(40%,80%) rotate(-40deg); 
    transform: translate(40%,80%) rotate(-40deg); 
	}
.sim-anim-3:hover img:nth-child(2){
    -ms-transform: translate(30%,60%)  rotate(-30deg);
   	-webkit-transform: translate(30%,60%)  rotate(-30deg);
    transform: translate(30%,60%)  rotate(-30deg);
	}	
.sim-anim-3:hover img:nth-child(3){
    -ms-transform: transla
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值