1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>变形</title> 6 <style> 7 8 .box1{ 9 width: 200px; 10 height: 200px; 11 margin-top: 100px; 12 background-color: #bfa; 13 14 transition: all .2s; 15 16 } 17 18 .box1:hover{ 19 transform: translateY(-10px); 20 box-shadow: rgba(0,0,0,.3) 0 10px 10px; 21 } 22 23 24 </style> 25 </head> 26 <body> 27 28 <div class="box1"></div> 29 30 </body> 31 </html>
内容
1.利用transform: translateY(-10px); box-shadow: rgba(0,0,0,.3) 0 10px 10px; 即可设置元素向上浮动的效果
2.变形，通过变形可以对元素进行平移、放大、缩小旋转等操作，所有的变形效果，都不会影响页面的布局，这是元素的外观发生变化
原文：https://www.cnblogs.com/fsg6/p/12679819.html