通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