会旋转的头像: <style type="text/css" > body{background: pink;} /* border-radius:50% 代表正圆(前提是形状是正方形) * */ /*img{width: 50px; height: 50px; border:5px solid gray;border-radius: 50%; margin: 50px; transition: all 2s ease;*/ /*开启过渡属性 --过度速率ease-out*/ img{width: 150px; height: 150px; border: 2px solid darkgray;border-radius: 50%;margin: 80px;transition: all 2s ease;} /* transition 第一个时间代表动画的运行时间 第二个时间代表延迟时间 ease-in 变加速 * ease-out变减速 ease-in-out先变加速变减速 * */ img:hover{transform: scale(1.5) rotate(360deg);} </style> </head> <body> <img src="1.jpg"title="我" /> <img src="2.jpg"title="爱"/> <img src="3.jpg"title="你"/> </body> </html>
|