照片墙效果-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 .........完整代码请登录后点击上方下载按钮下载查看

照片墙效果

网友评论0

tailwindcss+js实现炫酷三维空间相册排列交互代码

gsap实现相册图片尺寸缩放排列切换效果代码

css实现鼠标滚动驱动三维立体图片相册围成圈圈悬浮翻转效果代码

fancybox+three实现波浪状图片相册点击放大效果代码

tailwind+js实现3d相册画廊旋转动画效果代码

css+js实现鼠标滚轮滚动缩放画廊相册代码

js+css实现三维旋转分层相册画廊代码

jquery+css实现随机更换图片墙代码

tailwind实现电视墙照片墙点击放大效果代码

gsap实现六种鼠标悬浮照片拖影丝滑动画效果代码