Blizzard_lihe
2016-11-17 16:57
照片没有hover效果???
body{ background-color:#eee; } h1{ text-align:center; } .container{ width:960px; height:450px; margin:60px auto; position:relative; } .container img{ padding:10px 10px 15px; background:white; border:1px solid #ddd; box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4); -webkit-transition:all 0.5s ease-in; -moz-transition:all 0.5s ease-in; transition:all 0.5s ease-in; position:absolute; z-index:1; } .container img:hover{ box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); -webkit-transform:rotate(0deg) scale(1.20); -moz-transform:rotate(0deg) scale(1.20); transform:rotate(0deg) scale(1.20); z-index:2; } .pic1{ left: 400px; top: 0; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg); } .pic2{ top: 0; left: 600px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); transform: rotate(-20deg); } .pic3 { bottom: 0; right: 0; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg); } .pic4 { bottom:0; left:300px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } .pic5 { bottom: 0; left: 0; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } .pic6 { top: 0; left:0; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); } .pic7 { top: 0; left: 850px; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform: rotate(20deg); } .pic8 { bottom: -20px; right: 630px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg); } .pic9 { top: 90px; left: 550px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } .pic10 { left:180px; top:20px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); }
还没有人回答问题,可以看看其他问题
CSS3绚丽照片墙
56605 学习 · 63 问题
相似问题