照片墙效果-html代码-BFW代码库

代码语言：html
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background-color: #E43;
}

.container {
  width  : 960px;
  margin : 0 auto;
}

.container:after{
  clear   : both;
  display : table;
  content : '';
}

.bg-items {
  padding: 20px;
  width  : 240px;
  height : 160px;
  margin : 20px;
  background-color: white;
  float  : left;
  cursor : pointer;
  box-shadow : 3px 3px 5px 0px rgba(0,0,0,0.5);
}

.items {
  width  : 240px;
  height : 160px;
  position: relative;
  overflow: hidden;
  background-color: #102B46;
}

.details {
  background-color : rgba(0,0,0,0.5);
  width            : 220px;
  height           : 140px;
  padding          : 10px;
  top : 0;
  left: 0;
  font-family : georgia;
  color       : #fff;
  opacity : 0;
  transition : opacity .8s;
}

.details h3 {
  margin-bottom : 20px;
}

.details h6 {
  text-align : right;
  margin-top : 40px;
}

.details p {
  font-size : 14px;
  font-style: italic;
  text-align: center;
  line-height : 20px;
}

.items:hover .details {
  opacity : 1;
  transition : opacity .2s .3s;
}

.items div {
  position : absolute;
}

/* one */

.one {
  left   : 100%;
  bottom : 100%;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
}

.items:hover .one {
  transition   : all .3s;
  left   : 0;
  bottom : 0;
}

/* two */

.two {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left   : 0;
  bottom : 100%;
}

.items:hover .two {
  transform : rotate(180deg);
  left   : 0;
  bottom : 0;
  transition   : all .3s;
}

/* three */

.three {
  left : 0;
  top  : 0;
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  transform: scale(0,0);
}

.items:hover .three {
  left : 0;
  top  : 0;
  transform : scale(1,1);	
  transition : all .3s;
}

/* four */

.four {
  width : inherit;
  height: inherit;
  background-color : #e43;
  transition   : all .3s;
  left : 0;
  top  : 0;
  transform: scale(0,0) rotate(0deg);
}

.items:hover .four {
  left : 0;
  top  : 0;
  transform: scale(1,1) rotate(1080deg);
  transition   : all .3s;
}

/* five */

.tl5 {
  border-top   : 161px solid #e43;
  border-right : 241px solid transparent;
  top  : -160px;
  left : -240px;
  transition   : all .3s;			
}

.br5 {
  border-bottom : 161px solid #e43;
  border-left   : 241px solid transparent;
  bottom : -160px;
  right  : -240px;
  transition   : all .3s;			
}

.items:hover .tl5 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .br5 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

/* six */

.tl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top  : -80px;
  left : -240px;
  transition   : all .3s;			
}

.tr6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  top   : -80px;
  right : -240px;
  transition   : all .3s;			
}

.br6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom: -80px;
  right : -240px;
  transition   : all .3s;
}

.bl6 {
  width  : 120px;
  height : 80px;
  background-color: #e43;
  bottom : -80px;
  left   : -240px;
  transition   : all .3s;
}

.items:hover .tl6 {
  top  : 0;
  left : 0;
  transition   : all .3s;
}

.items:hover .tr6 {
  top   : 0;
  right : 0;
  transition   : all .3s;
}

.items:hover .br6 {
  bottom : 0;
  right  : 0;
  transition   : all .3s;
}

.items:hover .bl6 {
  bottom : 0;
  left   : 0;
  transition   : all .3s;
}

/* seven */

.seven {
  width  : 240px;
  height : 160px;
  background-color : #e43;
  opacity : 0;
  transition   : all .3s;
}

.items:hover .seven {
  opacity    : 1;
  transition : all .3s;
}

/* eight */

.eight {
  top           : 30%;
  left          : 10%;
  border-right  :  100px solid transparent;
  border-bottom :  70px  solid #e43;
  border-left   :  100px solid transparent;
  transform: rotate(35deg) scale(0,0);
  transition : all .6s;
}

.eight:before {
  border-bottom: 80px solid #e43;
  border-left  : 30px solid transparent;
  border-right : 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: '';
  transform: rotate(-35deg);			   
}

.eight:after {
  position: absolute;
  display: block;
  color: #e43;
  top: 3px;
  left: -105px;
  width: 0px;
  height: 0px;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #e43;
  border-left: 100px solid transparent;
  transform: rotate(-70deg);
  content: '';
}

.items:hover .eight {
  transform: rotate(35deg) scale(3.5,3.5);
  transition : all .6s;
  
}

/* nine */

.nine {
  width : 0;
  height: 0;
  top   : 50%;
  left  : 50%;
  background-color: #e43;
  border-radius : 50%;
  transition : all .3s;
}

.items:hover .nine {
  width : 340px;
  height: 260px;
  top   : -50px;
  left  : -50px;
  transition : all .6s;
  
}

/* ten */

.ten {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  left   : 100%;
}

.ten.i {
  top : 0;
  transition : all .2s;
}

.ten.ii {
  top : 40px;
  transition : all .4s;
}

.ten.iii {
  top : 80px;
  transition : all .6s;
}

.ten.iv {
  top : 120px;
  transition : all .8s;
}

.items:hover .i {
  left : 0;
  transition : all .2s;			
}

.items:hover .ii {
  left : 0;
  transition : all .4s;
}

.items:hover .iii {
  left : 0;
  transition : all .6s;
}

.items:hover .iv {
  left : 0;
  transition : all .8s;
}

/* eleven */

.eleven {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
}

.eleven.i {
  top : 0;
  left : -100%;
  
}

.eleven.ii {
  top : 40px;
  left : 100%;
}

.eleven.iii {
  top : 80px;
  left : -100%;
}

.eleven.iv {
  left : 100%;
  top  : 120px;
}

.items:hover .eleven {
  left : 0;
  transition : all .4s ;
}

/* twelve */

.twelve {
  width  : inherit;
  height : 40px;
  background-color: #e43;
  transition : all .3s;
  top : -40px;
}

.twelve.iv {
  transition : all .1s;
}

.twelve.iii {
  transition : all .1s .1s;
}

.twelve.ii {
  transition : all .1s .2s;
}

.twelve.i {
  transition : all .1s .3s;
}

.items:hover .twelve.i {
  top : 120px;
  transition : all .2s;
}

.items:hover .twelve.ii {
  top : 80px;
  transition : all .2s .2s ;
}

.items:hover .twelve.iii {
  top : 40px;
  transition : all .2s .4s ;
}

.items:hover .twelve.iv {
  top : 0px;
  transition : all  .2s .6s;
}

/* thirteen */

.thirteen-r , .thirteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.thirteen-r {
  left : 100%;
}

.thirteen-l {
  right : 100%;
}

.items:hover .thirteen-r {
  transition : all .3s;
  left : 0;
}

.items:hover .thirteen-l {
  transition : all .3s;
  right : 0;
}

/* fourteen */

.fourteen-r , .fourteen-l{
  width : 120px;
  height: inherit;
  background-color : #e43;
  top : 0;
  transition : all .3s;
}

.fourteen-r {
  left : 100%;
}

.fourteen-l {
  right : 100%;
}

.items:hover .fourteen-r {
  transition : all .3s;
  left : 50%;
}

.items:hover .fourteen-l {
  transition : all .3s;
  right : 50%;
}

/* fifteen */

.t {
  border-style : solid;
  border-width : 80px 120px 0 120px;			
  border-color : #e43 transparent transparent transparent;
  transition   : all .3s;
  top : -80px;
}

.r {
  border-style : solid;
  border-width : 80px 120px 80px 0;	
  border-color : transparent #e43 transparent transparent;
  right : -120px;
  transition   : all .3s;
}

.b {
  border-style : solid;
  border-width : 0 120px 80px 120px;
  border-color : transparent transparent #e43 transparent;
  bottom : -80px;
  transition   : all .3s;
}

.l {
  border-style : solid;
  border-width : 80px 0 80px 120px;	
  border-color : tra.........完整代码请登录后点击上方下载按钮下载查看
照片墙效果

网友评论0

div+css实现旋转相册动画效果代码

css实现自适应图片相册滚动闪现入场动画效果代码

jquery+css实现自适应相册点击图片放大效果代码

gsap实现多张图片相册堆叠入场动画效果代码

js+css实现图片相册堆叠点击更换位置合并效果代码

css布局实现横向拖动的相片相册胶卷效果代码

css实现横向滚动图片相册代码

js+css实现横向滚动图片列表相册效果代码

color-thief实现图片相册列表主色调过滤筛选效果代码

uikit实现图片相册点击标签分类悬浮显示文字效果代码
