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

最新推荐文章于 2024-07-11 14:01:20 发布

长安古意

最新推荐文章于 2024-07-11 14:01:20 发布

阅读量2k

点赞数

分类专栏： css样式动画

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

版权

本文介绍了在制作年度报告时遇到的图片旋转后边缘出现锯齿的问题，通过添加特定样式解决了这一问题，实现了平滑的动画效果。

摘要由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);}