滑鼠移動上去後圖片向上移動並有陰影的顯示
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .d1{ width: 500px; height: 500px; background-color: skyblue; transition: all 0.5s; text-align: center; line-height: 500px; margin-top: 100px; margin-left: 100px } .d1:hover{ box-shadow: 10px 10px 20px rgba(0,0,0,0.2); #x、y都偏移10px，陰影的厚度為20px transform: translate3d(0,-15px,0); #在y軸向上移動15px /*transform: scale(1.5,1.5);*/ /*transform: skew(30deg,0);*/ } </style> </head> <body> <div class="d1">天青色等煙雨而我在等你</div> </body> </html>