這篇文章主要為大家介紹了利用CSS3實現折角的效果,當滑鼠移動到圖片上的時候就會出現折角的效果,文中給出了實例代碼更方便大家的理解和學習,下面大家來一起學習學習吧。
先來看看靜態的效果圖
#實例代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body { background-color: #eaf0f2; } h1{text-align: center;} .box{width:500px;height:300px;margin:0 auto;position:relative;} .img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;} .img-layer img {width: 500px;cursor: pointer;} .img-layer:before{ content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0; border-color: rgba(0,0,0,0.2) #fff; border-radius: 0 0 0 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -webkit-transition: all 0.4s ease-out; transition:all 0.4s ease-out;} .img-layer:hover:before{ border-right-width:100px; border-bottom-width:100px; } </style> </head> <body> <h1>折角效果</h1> <p class="box"> <p class="img-layer"> <img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt=""> </p> </p> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
#以上是如何使用CSS3實現折角效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!