css布局爱心图片墙效果代码-html代码-BFW代码库

css布局爱心图片墙效果代码

代码语言：html

代码描述：css布局爱心图片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS3实现照片墙</title>
<style>
    @charset "utf-8";
* {
    padding: 0;
    margin: 0;
}

div {
    font-family: "微软雅黑";
    font-size: 14px;
    color: #666;
    padding: 0;
    margin: 0;
}

body,html{
    background: #eee;
    height: 100%;
}


/*css3实现照片墙的样式*/

.container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: beige;
    overflow: hidden;
     margin: 0 auto;
}

.container img {
    position: absolute;
    padding: 5px;
    height: 300px;
    width: 300px;
    background: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 1;    
    top:50%;
    left:50%;
    -webkit-transform-origin:50% 50%;
    -moz-transform-origin:50% 50%;
    transform-origin:50% 50%;
    -webkit-transform: translate(-50%,-50%) ;
    -moz-transform: translate(-50%,-50%) ;
    transform: translate(-50%,-50%) ;
}
.start{
    background-color: blue!important;
    z-index: 4!important;
    -webkit-transition: all 0.2s ease-in-out!important;
    -moz-transition: all 0.2s ease-in-out!important;
    transition: all 0.2s ease-in-out!important;
}
.surprise{    
    -webkit-transform-origin:50% 50%!important;
    -moz-transform-origin:50% 50%!important;
    transform-origin:50% 50%!important;
    -webkit-transform: rotate(0deg) translate(-50%,-50%) !important;
    -moz-transform: rotate(0deg) translate(-50%,-50%) !important;
    transform: rotate(0deg) translate(-50%,-50%) !important;   
    /* -webkit-transform:!important;
    -moz- rotate(360deg)transform:rotate(360deg)!important;
    transform:rotate(360deg)!important;    */
    top:50%!important;
    left:50%!important;
    height: 500px!important;
    width: 500px!important;
    z-index: 5!important;
    background-color: red;
   
}

</style>
</head>

<body>

	<div class="container" id="container"></div>
	
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
	<script>
		$(function () {
			var count = 0;
			var selectFlag = false;
			var startFlag = false;
			var roundBox;
			$("#container").css("width", window.innerHeight * 4 / 3)
			var appendPic = function (item) {
				if (selectFlag) {
					return
				}
				var x = Math.random() * 4,
					y = Math.random() * 4
				if (!heartFunc(x, y)) {
					appendPic(item)
				} else {
				    var imgpath=["5d653b5271e3b","5d653bd0990d0","5d653b5271e3b","5e0c6f2cae508","5e0c6f2cae508","5d653ba895333","5d653b5271e3b","5d653b5271e3b","5d653bd0990d0","5d653ba895333"];
	
					var back = ".........完整代码请登录后点击上方下载按钮下载查看