前端 - css3效果两边收缩

问题描述

问 题

效果: 有一个长方形border框，用css3实现鼠标移动到上面时两边同时往中间收缩成圆形。主要问题是不懂怎么实现两边同时往中间缩？请大神们指教！！

解决方案

你需要用position把它先定位一下，之后就能两边同时缩进了。具体代码（在你的代码基础上改的）：

.box3{
    position: relative;
    left: 0; right: 0;
    margin: auto;
    width: 200px;
    height: 50px;
    background: green;
    transition: 1s;
    border-radius: 30px;
    }
    .box3:hover{

    border-radius: 50%;
    width: 50px;
    height: 50px;
    }

这篇关于前端 - css3效果两边收缩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！