首頁猿問單純CSS怎樣實(shí)現(xiàn)圖片浮起來？

單純CSS怎樣實(shí)現(xiàn)圖片浮起來？

Html/CSS

qq_小白_7 2016-04-17 10:28:33

例如：<div class="div"><img src="img"></div>鼠標(biāo)滑過圖片就浮起來

查看完整描述

1 回答

已采納

sheshunjiang

TA貢獻(xiàn)11條經(jīng)驗(yàn) 獲得超2個(gè)贊

也不知道你是不是說的這個(gè)效果？

<style>

body{background:#CCC;}

.main{margin:0 auto; width:200px; height:150px; overflow:hidden; margin-top:100px; cursor:pointer;border:5px solid #fff;}

.main:hover{ box-shadow:4px 4px 10px 5px #999,-4px -4px 10px 5px #999;}

</style>

</head>

<body>

</body>

</html>

主要用box-shadow盒子陰影，來實(shí)現(xiàn)懸浮。（此處還可以添加動(dòng)畫，讓用戶體驗(yàn)更加）

反對回復(fù) 2016-04-17

關(guān)注