使用rotate(0)图片边缘锯齿化

最新推荐文章于 2021-12-15 10:09:34 发布

长安古意

最新推荐文章于 2021-12-15 10:09:34 发布

阅读量2k

点赞数

分类专栏： css样式动画

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/54603333

版权

1.rotate(0)实现灯笼摇晃特效2.解决rotate(0)制作动画时边缘锯齿化的问题

摘要由CSDN通过智能技术生成

一年一度的春节又要到了，估计很多app的年度报告又要出炉了，做年度报告就离不开动画，这里记录一下使用rotate(0)图片边缘锯齿化的解决方案

写了一个swing当作灯笼摇晃的效果
效果如图：
这里写图片描述

.swing{
    -webkit-animation:swinging 4s linear 0s infinite;
    -moz-animation:swinging  4s linear 0s infinite;
    animation:swinging 4s linear 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
}

@-webkit-keyframes swinging{
    0% { -webkit-transform: rotate(0);}
    25% { -webkit-transform: rotate(4deg);}
    75% { -webkit-transform: rotate(-4);}
    100% { -webkit-transform: rotate(0);}