CSS3积累（1）头像过渡效果

作者: 有一条大鱼 | 来源:发表于2019-03-04 13:49 被阅读0次

每天积累一小步~

要求

今天先说说图片头像显示为圆形，且当鼠标移到图片上时图片会有放大效果

<html>  
    <head>  
        <title>CSS学习之路</title>  
        <meta http-equiv="Content-Type" content="text/html;" />
        <meta charset="UTF-8">
        <meta name="keywords" content="css 笔记" />  
        <meta name="description" content="shaoyuli的CSS3积累笔记" /> 
        <style>
            body {
                position: relative
            }
            .profile {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            img {
               cursor: pointer;
                border-radius: 50%;
                -webkit-transition: all 0.5s;
                -o-transition: all 0.5s;
            }
            img:hover {
                transform: scale(1.5);
                border: 3px solid red;
            }
        </style>
    </head> 
    <body> 
        <div class="profile">
                <img src="./download.jpeg" alt="">
        </div>
    </body> 
</html>