search

fezaoduke / fe-practice-hard

晚练课
69 stars 6 forks source link

第 109 期(W3C标准-CSS-动画)：翻转缩放动画 #112

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

CSS 函数 scale() 用于定义元素的缩放值来放大或缩小元素，当其只有一个参数时，元素会等比缩放。这里有个鲜为人知的技巧是：它的参数值可以为负数。当为负数时，元素会左右、上下翻转（效果和 rotate(180deg) 一样），然后进行缩放。那如果我们定义了 scale 的值从正整数到负整数过渡会如何？效果就是实现了元素在翻转的同时缩放。

<p class="scale">The quick brown fox jumps over the lazy dog.</p>
.scale {
  font-size: 30px;
  text-align: center;

  transform: scale(1);
  animation: scale 5s infinite linear;
}

@keyframes scale {
  50% { transform: scale(-1); }
  100% { transform: scale(-1); }
}