Html 如何让圆在悬停时变小
嗨,伙计们,我正试图得到一种效果,比如这个网站:这样当用户在“我们如何工作”部分的圆圈上悬停时,它就会变小 但是在我的代码中,由于某些原因,我似乎根本无法让它工作,我不知道为什么,我使用的是bootstrap 3: HTML: 所以我让边界改变大小,但我不能让它像上面的例子那样变小Html 如何让圆在悬停时变小,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,嗨,伙计们,我正试图得到一种效果,比如这个网站:这样当用户在“我们如何工作”部分的圆圈上悬停时,它就会变小 但是在我的代码中,由于某些原因,我似乎根本无法让它工作,我不知道为什么,我使用的是bootstrap 3: HTML: 所以我让边界改变大小,但我不能让它像上面的例子那样变小 再次感谢您的帮助您可以使用变换:缩放在悬停时使圆圈变小。看到这个了吗 悬停时,可以使用transform:scale使圆变小。看到这个了吗 您可以使用transform:scale变换大小,也可以直接设置高度和宽度大
再次感谢您的帮助您可以使用
变换:缩放
在悬停时使圆圈变小。看到这个了吗
悬停时,可以使用
transform:scale
使圆变小。看到这个了吗
您可以使用
transform:scale
变换大小,也可以直接设置高度
和宽度
大小
变换:缩放
.icon set.fa打印{
字体大小:40px;
位置:绝对位置;
转换:翻译(-50%,-50%);
最高:50%;
左:50%;
}
.图标容器{
位置:相对位置;
高度:151px;
宽度:151px;
边框:2个实心#ccb08a;
边界半径:50%;
保证金:自动;
颜色:#ccb08a;
}
.图标容器:悬停{
变换:比例(1);
边框:1px实心;
}
太棒了
两人或两人在一个无教区的房间里互相指责
您可以使用transform:scale
转换大小,或直接设置高度
和宽度
大小
变换:缩放
.icon set.fa打印{
字体大小:40px;
位置:绝对位置;
转换:翻译(-50%,-50%);
最高:50%;
左:50%;
}
.图标容器{
位置:相对位置;
高度:151px;
宽度:151px;
边框:2个实心#ccb08a;
边界半径:50%;
保证金:自动;
颜色:#ccb08a;
}
.图标容器:悬停{
变换:比例(1);
边框:1px实心;
}
太棒了
两人或两人在一个无教区的房间里互相指责
<div class="row icon-set">
<div class="col-md-3 text-center">
<p class="icon-container">
<i class="fa fa-print"></i>
</p>
<p class="title"><span class="underline-text">Awesome</span>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
.icon-set .fa-print {
font-size: 40px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.icon-container {
position: relative;
height: 151px;
width: 151px;
border:2px solid #ccb08a;
border-radius: 50%;
margin: auto;
color: #ccb08a;
}
.icon-container:hover {
transform: scale(1);
border: 1px solid;
}
.icon-container {
position: relative;
height: 151px;
width: 151px;
border:2px solid #ccb08a;
border-radius: 50%;
margin: auto;
color: #ccb08a;
transform: scale(1);
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.icon-container:hover {
transform: scale(0.95);
border: 1px solid;
}