实例:实现图片方形变圆形,放大,倾斜,变黑白
效果:
HTML CSS 代码实现:
<html><head><title>过渡与变形</title><style type="text/css">body {background-color: #000000;/* line-height:10px;*/}.word {font-family: 'Times New Roman';font-size: 20px;color: #ffffff;}table {width: 1000px;height: 500px;margin: 80px 70px 20px 120px;border-collapse: separate;border-spacing: 70px;}.css1 {border: 8px solid #ffffff;-webkit-box-shadow: #ffffff 0 0 25px;border-radius: 15px;width: 135px;height: 135px;-webkit-transition-duration: 2s;}.css1:hover {-webkit-transition-property: -webkit-border-radius;-webkit-border-radius: 50%;}.css2 {width: 135px;height: 135px;-webkit-transition-duration: 2s;}.img-box {width: 135px;height: 135px;overflow: hidden;border: 8px solid #ffffff;-webkit-box-shadow: #ffffff 0 0 25px;border-radius: 15px;}.css2:hover {display: block;-webkit-transform: scale(2,2);transform-origin: 0% 0%;}.css3 {border: 8px solid #ffffff;-webkit-box-shadow: #ffffff 0 0 25px;border-radius: 15px;width: 135px;height: 135px;-webkit-transition-duration: 2s;}.css3:hover {-webkit-transform: rotate(45deg);}.css4 {border: 8px solid #ffffff;-webkit-box-shadow: #ffffff 0 0 25px;border-radius: 15px;width: 135px;height: 135px;-webkit-transition-duration: 2s;}.css4:hover {/*-webkit-filter: grayscale(100%);*/-webkit-filter: grayscale(100%);}</style></head><body><table><tr><td align="center"><span class="word">SHAPE</span></td><td align="center"><span class="word">DISPLACEMENT</span></td><td align="center"><span class="word"> POSITION</span></td><td align="center"><span class="word">COLOR</span></td></tr><tr><td align="center"><img class="css1" src="images/image1.jpg" /></td><td align="center"><div class="img-box"><img class="css2" src="images/image2.jpg" /></div></td><td align="center"><img class="css3" src="images/image3.jpg" /><td align="center"><img class="css4" src="images/image4.jpg" /></td></tr></table></body></html>
11月26日更新🙌
以上就是最新的代码，已经接近实现最想要的效果了。最重要的是如何写css2样式了。因为边框的问题于是我删了img选择器。写了css1 css2 css3 css4与他们的hover。终于达到了最想要的效果。注意，css2里 transform-origin: 0% 0%;将中心点定在了左上角。
