gpt4 book ai didi

html - 用CSS让一个div向各个方向生长?

转载 作者:太空宇宙 更新时间:2023-11-03 20:14:11 24 4
gpt4 key购买 nike

我有一个 HTML/CSS 页面,其中主体中有 4 个 div,形状像圆圈。我已经做到了,所以这些 div 的大小在悬停时会变大。这工作正常,除了某些情况下它会转到下一行并且浏览器窗口大小不同(仍在尝试解决这个问题)。但是,我想做的是,当 div 在悬停时增长时,它会向各个方向增长,而不是像现在这样向右和向下增长。有谁知道这个的修复方法?

这是一个网站页面的链接:http://www.somil.site90.net

这是其中一个圆圈的代码。其他 3 个除了页边距外是相同的,但如果你想让我也粘贴它们,请告诉我。提前致谢!

#circ1 {
background: #c4c4c4;
height: 150px;
width: 150px;
border-radius: 50%;
position: relative;
margin: 100px 0px 100px 16%;
float: left;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;


}

#circ1:hover {
width: 250px;
height: 250px;

}

最佳答案

很简单,用CSS3就可以了。

#circ1:hover {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}

此代码将增长 div。 margin

   #circ1:hover + #circ2{
margin: 100px 0px 100px 8%;
}

关于html - 用CSS让一个div向各个方向生长?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24715437/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com