问答详情
源自：1-4 CSS3照片墙 动画实现

无法正常显示，希望能帮我看下代码哪里有问题

body{background-color: #eee;}
	h1{text-align: center;}

	.container{width: 900px; 
		height: 450px; 
		margin: 60px auto; 
		position: relative; }

	img{width: 200px; 
		height: 200px; 
		padding: 10px 10px 15px 10px; 
		background-color: white;
		border: 1px solid #ddd; 
		position: absolute; 
		transition: 1s; 
		z-index: 1;
	}

    img:hover{-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		transform: scale(1.2); 
		box-shadow: 10px 10px 15px #ccc;
		z-index: 2;}



.pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>CSS 效果墙</title>
	<link rel="stylesheet" type="text/css" href="cssWall.css">
</head>

<body>
	<h1>效果墙</h1>
	<div class="container">
		<img class="pic1" src="1 (1).jpg" />
		<img class="pic2" src="1 (2).jpg" />
		<img class="pic3" src="1 (3).jpg" />
		<img class="pic4" src="1 (4).jpg" />
		<img class="pic5" src="1 (5).jpg" />
		<img class="pic6" src="1 (6).jpg" />
	</div>
</body>
</html>

http://img.mukewang.com/575632b800019fbb08210369.jpg

http://img.mukewang.com/575632ea00012ffd11820573.jpg

提问者：朱泽伟 2016-06-07 10:35

个回答

  • LiSten_Tme
    2016-06-26 13:02:32

        <link rel="stylesheet" type="text/css" href="cssWall.css">

    这里是不是导入错误了...我的  link href直接写不行，然后我浏览后引用才可以...


    我的代码是这样     <link href="stylesheet.css" type="text/css" rel="stylesheet" />


    0
  • 一支猫的烦恼
    2016-06-07 13:25:04

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{background-color: #eee;}
    h1{text-align: center;}
 
    .container{width: 900px; 
        height: 450px; 
        margin: 60px auto; 
        position: relative; }
 
    img{width: 200px; 
        height: 200px; 
        padding: 10px 10px 15px 10px; 
        background-color: white;
        border: 1px solid #ddd; 
        position: absolute; 
        transition: 1s; 
        -webkit-transition:1s;
        -moz-transition:1s;
        z-index: 1;
    }
 
    img:hover{-webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2); 
        box-shadow: 10px 10px 15px #ccc;
        z-index: 2;}
 
 
 
.pic1{top: 45px; left: 100px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic2{top: 70px; left: 220px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic3{top: 13px; left: 310px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic4{top: 23px; left: 400px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic5{top: 53px; left: 490px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
.pic6{top: 32px; left: 580px; -webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);transform: rotate(20deg);}
</style>
<body>
    <div>
        <img src="images/test5.jpg" />
        <img src="images/t6.jpg" />
        <img src="images/t7.jpg" />
        <img src="images/t8.jpg" />
        <img src="images/t9.jpg" />
        <img src="images/t10.jpg" />
    </div>
</body>
</html>

    我个人觉得是没什么问题的。这是从你这复制出来的。只不过是图片地址换了一下我本地的图片。

    1
  • 一支猫的烦恼
    2016-06-07 11:36:08

    可以正常显示啊，是不是你引的Css有问题，你把css复制到内部，看看效果是可以的。

    0