一、手風琴效果
<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大資料學習視頻禮包
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73720.html
標籤：Html/Css