悬停时我想缩放圆形的背景图像而不进行过渡,它适用于所有浏览器,但在 safari 中进行过渡则有问题。
我有这个小提琴https://jsfiddle.net/yv0a6hnv/4/一切都在 chrome 中完美运行,但在 safari 中转换有问题如何修复它?提前致谢。
.circle-box{
overflow:hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
display: block;
}
.circle {
width: 100%;
padding-top: 100%; /* 1:1 Aspect Ratio */
position: relative; /* If you want text inside of it */
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
background-position:center;
background-image: url("http://www.planwallpaper.com/static/images/6768666-1080p-wallpapers.jpg");
background-size: cover;
background-repeat: no-repeat;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%; …Run Code Online (Sandbox Code Playgroud)