HTML5+CSS3已经出来一段时间了,作为新(cai)手( niao),只能边学习边记录了,下面介绍的如何利用CSS3特性制作图片旋转放大的效果。
一、HTML代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>照片墙</title> <link href = "css/photo.css" type="text/css" rel ="stylesheet"> </head> <body> <h1>照片墙</h1> <div class = "container"> <img class="pic1" src="images/mm1.jpg"/> <img class="pic2" src="images/mm2.jpg"/> <img class="pic3" src="images/mm3.jpg"/> </body> </html>
二、CSS代码
body{ background:#eee } h1{ text-align:center } .container{ width:960px; height:450px; margin:60px auto; position:relative } img{ padding:10px 10px 15px; background:#fff; border:1px solid #ddd; position:absolute; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s; z-index:1 } img:hover{ -webkit-transform:rotate(0deg) ; -moz-transform:rotate(0deg) ; transform:rotate(0deg) ; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); transform:scale(1.5); box-shadow:10px 10px 15px #ccc; z-index:2 } .pic1{ left:200px; top:100px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg); } .pic2{ left:300px; top:100px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); } .pic3{ left:400px; top:100px; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg); }
三、效果图
利用CSS3实现图片旋转放大特效
最新推荐文章于 2024-07-28 20:04:07 发布