css3 scale

Posted 2023-04-05

参考技术A css样式:

.dot_ac

  animation: scale2 1.5s forwards;



@keyframes scale2

  0%

    background-color: #E5E5E5;

    transform: scale(1);

    opacity: 0.9;

 

  100%

    background-color: #E8B960;

    transform: scale(1.5);

    opacity: 1;

 



.dot

  display: inline-block;

  width: 0.32rem;

  height: 0.32rem;

  background: #E5E5E5;

  border-radius: 50%;

  line-height: 0.8rem;

  position: absolute;

  left: 0.10666667rem;

  top: 50%;

  margin-top: -0.16rem;



html:
<ul>

    <li class="active">

    <div class="ces_inner">

    <div class="dot"></div>

    <span class="font-bold">基本信息</span>

    </div>

    </li>

    <li>

    <div class="ces_inner">

    <div class="dot"></div>

    <span class="font-bold">商业模式评估</span>

    </div>

    </li>

    <li>

    <div class="ces_inner">

    <div class="dot"></div>

    <span class="font-bold">营销品牌评估</span>

    </div>

    </li>

    </ul>
 实现圆点由小变大,颜色变化功能

CSS 'transform: scale()' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

【中文标题】CSS \'transform: scale()\' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

【英文标题】：CSS 'transform: scale()' property doesn't work on iOS Safari and iOS Chrome tooCSS 'transform: scale()' 属性在 iOS Safari 和 iOS Chrome 上也不起作用

【发布时间】：2016-02-28 14:48:24

【问题描述】：

我在我的网站上使用 css 动画，但它在基于 iOS 的 Safari 和 Chrome 中不起作用。

HTML：

...
<p>
   <a href="mywebsite.hu/something1.php">
      <img src="picture1.jpg" class="kep" >
   </a>
   <a href="mywebsite.hu/something2.php">
      <img src="picture2.jpg" class="kep" >
   </a>
   <a href="mywebsite.hu/something3.php">
      <img src="picture3.jpg" class="kep" >
   </a>
</p>
...

CSS：

img.kep
   transition: transform.1s linear;
   -moz-transition: transform.1s linear;
   -webkit-transition: transform.1s linear;

img.kep:hover
   transform: scale(1.04);
   -ms-transform: scale(1.04);
   -moz-transform: scale(1.04);
   -webkit-transform: scale(1.04);

它适用于 windows（IE、Mozilla、Chrome、Opera、Vivaldi、Safari）、android（Chrome，默认三星 Galaxy 浏览器）。 但是在带有 iOS 9.2.1(Safari, Chrome) 的 iPad2 中不起作用！

为什么？

【参考方案1】：

首先，您应该始终将非前缀属性包含在列表的最后。 transition 和 transform 应低于所有前缀版本。

因此，如果它受支持，就会使用它，而不是潜在的旧前缀版本。

其次，您只是在转换transform。所以-webkit-transform 不会被改变。你最好只转换all

第三，transform 和 .1s 之间没有空格。应该是空格。

【讨论】：

所以我用这个 --> img.kep -webkit-transition: -webkit-transform 1s linear; -moz-transition：-moz-transform 1s 线性；过渡：-ms-transform 1s 线性；过渡：变换1s线性； 或者这个 --> img.kep -webkit-transition: -webkit-transform 1s linear; -moz-transition：-moz-transform 1s 线性； -ms-transition：-ms-transform 1s 线性；过渡：变换1s线性； 还是别的什么？

过渡：全1s线性；

你有示例链接我可以自己试试吗？

啊，当然。这是因为您在一个默认情况下通常没有的元素上触发了悬停事件。 iOS 可能不确定该怎么做。我可能会尝试添加 :focus 和 :hover。如果这不起作用，您可以尝试将动画转移到父 <a> 标记上。那应该解决它。虽然在 iOS 上感觉不太一样，因为你无法悬停。此外，根据您在单击 <a> 时计划执行的操作，您可能看不到悬停。

非常感谢 :) 现在有时可以在 iOS Safari 和 Chrome 上工作 :D