小编Pus*_*der的帖子

在 safari 中,边框半径为 50% 的悬停缩放背景图像过渡有问题,如何修复?

悬停时我想缩放圆形的背景图像而不进行过渡,它适用于所有浏览器,但在 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)

css css-transitions css-transforms

1
推荐指数
1
解决办法
1608
查看次数

标签 统计

css ×1

css-transforms ×1

css-transitions ×1