zoukankan      html  css  js  c++  java
  • ios使用transform的时候圆角变方框,border-radius失效问题

    ios使用transform的时候圆角变方框,border-radius失效问题

    问题: 1. 使用ios的手机浏览器(safari/chrome)都会出现滚动的时候圆角短时间成方块,动画完成后,会变成圆角。似乎是因为ios手机会在transform的时候border-radius失效。

    解决方法:在使用动画效果带transform的元素的上一级div元素的css加上下面语句

    -webkit-transform:rotate(0deg);

    例:

    .father {
      width: 5.875rem;
      height: 6.5rem;
      background-color: #f3f3f3;
      border-radius: 0.375rem;
      overflow: hidden;
      -webkit-transform: rotate(0deg);
    }
    
     /*动画元素 */
    .father .imgWithAnim {
      width: 5.875rem;
      height: 6.5rem;
      z-index: 999;
      border-radius: 0.375rem;
      animation: bounce2 2s infinite;
      overflow: hidden;
    }
    
    @keyframes bounce2 {
    
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
      }
    
      50% {
        -webkit-transform: scale3d(1.5, 1.5, 1.5);
        transform: scale3d(1.5, 1.5, 1.5);
      }
    
    
      100% {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
      }
    
      to {
        opacity: 1;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
      }
    
    }


    ————————————————
    原文链接:https://blog.csdn.net/plm609337931/article/details/104680922

    作者:dlm17
    本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
  • 相关阅读:
    Paperfolding HDU
    I
    2020年8月11日第一次组队训练
    2018ICPC南京I. Magic Potion
    【贪心】纪念品分组
    【贪心】删数问题
    【排序】排名
    小X与队列
    B.T.B.F.
    2018浙江理工大学迎新赛——决赛
  • 原文地址:https://www.cnblogs.com/dlm17/p/12470475.html
Copyright © 2011-2022 走看看