transition过渡的趣玩
生活随笔
收集整理的這篇文章主要介紹了
transition过渡的趣玩
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本例中將三張圖（來自網絡）進行堆疊，鼠標懸停觸發。附有源代碼
<!DOCTYPE html> <html> <head><title>照片墻</title><meta charset="utf-8"><style type="text/css">.parent{width: 1000px;height: 800px;margin: 0 auto;position: relative;background-color: black;}.parent img{width: 300px;height: 150px;position: absolute;transition: all 3s;}img:nth-child(1){top: 300px;left: 350px;transform: rotate(45deg);z-index: 3;-webkit-filter:blur(2px);}img:nth-child(2){top: 300px;left: 350px;z-index: 2;-webkit-filter:blur(3px);}img:nth-child(3){top: 300px;left: 350px;transform: rotate(-45deg);z-index: 1;-webkit-filter:blur(1px);}img:hover{transform: scale(3);-webkit-filter:blur(0px);z-index: 100;}</style> </head> <body> <div class="parent"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683931&di=0ef6a07b6b38ec2a7c0be9794922605a&imgtype=jpg&src=http%3A%2F%2Fimg2.3lian.com%2F2014%2Fc7%2F27%2Fd%2F23.jpg"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683929&di=c96c378ca0d60d7147fedbc2366da230&imgtype=jpg&src=http%3A%2F%2Fa2.att.hudong.com%2F06%2F10%2F300001190914130190105052966_950.jpg"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1468408683928&di=0553506fb8bcf19f4e9a818fd6fbc69d&imgtype=jpg&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150331%2F139-1503311U111.jpg"> </div> </body> </html>?
轉載于:https://www.cnblogs.com/LJY0596/p/5667930.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的transition过渡的趣玩的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java乱码问题总结
- 下一篇： css —— 图片环绕+首行缩进