css 字体图片动画

最新推荐文章于 2025-10-18 17:01:29 发布

原创最新推荐文章于 2025-10-18 17:01:29 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #anima #动画

css 专栏收录该内容

21 篇文章

订阅专栏

本文通过几个具体的案例展示了如何使用CSS实现文字摇摆、图片渐进渐出以及文字旋转360度等动画效果。这些例子有助于理解CSS动画属性及@keyframes规则的应用。

字体摇摆
<text>开始出题</text>
text{
  display: block;
  animation: star 1s linear infinite;
}
@keyframes star {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(6deg);
  }
   100% {
    transform: rotate(-6deg);
  }
}

图片渐进渐出

<image src="http://ovhvevt35.bkt.clouddn.com/test/what.png" mode='widthFix'></image>

image {animation:mySee 5s infinite;}

@keyframes mySee
  {
0%   {right:-20px;}
30%  {right:0px;}
60%  {right:0px}
100%  {right:-20px}
}

字旋转360度

<view class='font'>
        <text class='font1'>查</text>
        <text class='font2'>看</text>
        <text class='font3'>答</text>
        <text class='font4'>案</text>
    </view>

.font text{

  animation:myMove 6s infinite;
}

@keyframes myMove{
    0%{
        transform:rotateY(0);
    }
    25%{
        transform:rotateY(-360deg);
    }
    50%{
        transform:rotateY(0);
    }
    100%{
        transform:rotateY(-360deg);
    }
}