一、手風琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; border:1px solid red; } ul li { list-style: none; widt ...
一、手風琴效果
<style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; border:1px solid red; } ul li { list-style: none; width: 158px; height: 300px; float:left; border:1px solid black; transition-property:width; transition-duration:1s; } ul li img { height: 300px; width: 300px; } ul:hover li{ width: 100px; } ul li:hover{ width: 300px; } </style> </head> <body> <ul> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> </ul>
二、2D轉換模塊
1.什麼是2D轉換模塊？
<style> *{ margin:0; padding:0; } ul{ width: 800px; height: 500px; border:1px solid black; margin:10px auto; } ul li { list-style:none; height: 50px; width: 100px; margin:0 auto; margin-top:50px; text-align:center; line-height:50px; } ul li:nth-child(2){ transform:rotate(90deg);/*參數是指它的旋轉度數*/ } ul li:nth-child(3){ transform:translate(-100px,0px);/*裡面的參數代表平移多少個單位長度*/ } ul li:nth-child(4){ transform:scale(1.5,0.5);/*第一個參數就是水平方向縮放的繫數，第二個參數就是垂直方向的縮放繫數*/ /*如果裡面只有一個參數的話，就代表水平和垂直都是這個縮放繫數*/ } ul li:nth-child(5){ transform:rotate(45deg) translate(100px,20px) scale(2,3); /*註意點：如果需要多個轉換，那麼使用空格來隔開;2D的轉換模塊會修改元素的坐標系，所以旋轉之後在平移 可能就會遇到不是水平平移的，因此要註意一下 */ } </style> </head> <body> <ul> <li>正常的</li> <li>旋轉的</li> <li>平移的</li> <li>縮放的</li> <li>綜合的</li> </ul>
三、源碼：
D167_AccordinEffect.htmlD168_2DTransformModule.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D167_AccordinEffect.html
https://github.com/ruigege66/HTML_learning/blob/master/D168_2DTransformModule.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
