这种悬浮效果该如何制作？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>悬浮效果</title> <style> li{ width: 234px; height: 300px; border: black 1px solid; background-color: rgb(250,250,250); float: left; list-style: none; margin: 13px 12px 0 0px; position: relative; top: 0; transition: all 0.5s; } li:hover{ top: -5px; box-shadow: 5px 5px 25px gray; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
效果如下：
当然如果要是觉得阴影过重或者阴影颜色不一致的情况可以参考下面的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>悬浮</title> <style> li{ width: 234px; height: 300px; /* border: black 1px solid; */ background-color: rgb(250,250,250); float: left; list-style: none; text-align: center; margin: 13px 12px 0 0px; position: relative; top: 0; transition: all 0.5s; } li:hover{ top: -5px; box-shadow: 2px 2px 15px rgb(225,225,225); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
