我遇到以下代码的问题
.h_w:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 5s all;
-moz-transition: 5s all;
-o-transition: 5s all;
-ms-transition: 5s all;
transition: 5s all;
}
.h_w{ border-radius:200px;
-moz-border-radius: 200px;
-ms-border-radius: 200px;
-o-border-radius: 200px;
-webkit-border-radius: 200px;
height: 287px;
overflow: hidden;
position: relative;
width: 287px;
background-color: #FFFFFF;
}
.opacity-0.5{opacity:0.2;}
.circle_background{
background:url(../images/circle-bg.png) no-repeat;
height:100%;
width:100%;
position:absolute;
font-size:15px;
opacity:1 !important;
top: 286px;
}
.h_w:hover .circle_background{
transition:1s all;
-moz-transition:1s all;
-ms-transition:1s all;
-o-transition:1s all;
-webkit-transition:1s all;
top:0px;
z-index:1000px;
}
<body style="background-color: #000000;">
<div class="h_w">
<span><img src="images/projects/circles/background.png" alt="flick the switch" /></span>
</div>
</body>
此代码在Mozilla Firefox中运行良好,但在Chrome中,当缩放它超出圆圈时,它无法正常工作。
任何帮助将不胜感激。
答案 0 :(得分:0)
点击这里查看答案:--->X<---
PS:您必须将-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
添加到您的img的parent-div样式中。
希望它有所帮助。
答案 1 :(得分:0)
使用此代码即可。
.h_w:hover img{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: 5s img ;
-moz-transition: 5s img ;
-o-transition: 5s img ;
-ms-transition: 5s img ;
transition: 5s img ;
}
上面你可以看到.h_w:hover img规则使用transtion属性。 在transtion属性中我使用img因为你想在“img”而不是“all”属性上创建一个动作 所以使用“img”而不是“all”。 希望得到答案!