css之div位移变化
四、css之div位移变化
up bottom left right
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0px;padding: 0px;} .hover-con{margin: 100px auto;padding:0px 20px;width:90%; text-align: center;border: 1px solid #000000;} .ech-t,.ech-b,.ech-l,.ech-r{ transition: all .4s; display: inline-block; margin: 20px; width: 80px; height: 80px; line-height: 80px; text-align: center; background:#0069D9; color: #FFFFFF; cursor: pointer; } .ech-t:hover { transform: translate3d(0, -10px, 0); } .ech-b:hover { transform: translate3d(0, 10px, 0); } .ech-l:hover { transform: translate3d(-10px, 0, 0); } .ech-r:hover { transform: translate3d(10px, 0, 0); } </style> </head> <body> <div class="hover-con"> <span class="ech-t">up</span> <span class="ech-b">bottom</span> <span class="ech-l">left</span> <span class="ech-r">right</span> </div> </body> </html>
DO What You Want !