黑马程序员技术交流社区

标题: 会旋转的头像 [打印本页]
作者: Z努力努力在努力    时间: 2019-3-29 17:52
标题: 会旋转的头像
会旋转的头像：
<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>





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2