css好看动画效果图

最近在学习前端技术，发现CSS动画的效果特别好看，于是就开始了解了一些CSS好看动画的效果图。下面分享一下。

代码一：闪烁的文字Welcome to my website!.blink {
       animation: blinker 0.6s linear infinite;
       color: #fff;
       font-size: 36px;
       font-weight: bold;
       text-shadow: 0px 0px 20px #fff;
}
@keyframes blinker {
   50% {
          opacity: 0;
   }
}

这个CSS动画效果主要使用了闪烁的文字，通过设置闪烁的时间和颜色，在页面上展示出非常好看的效果。

代码二：变换颜色的按钮Click Me.btn-animation {
       font-size: 24px;
       padding: 10px 20px;
       border-radius: 10px;
       border: none;
       background-color: #5C9CE5;
       color: #fff;
       cursor: pointer;
       transition: background-color 0.3s ease-out;
}
.btn-animation:hover {
       background-color: #F6511D;
}

这个CSS动画效果主要使用了按钮，通过设置按钮的颜色和动画时间，在鼠标悬浮时展示出非常好看的动画效果。

代码三：旋转图片动画.rotate-image {
       animation: rotate 2s linear infinite;
}
@keyframes rotate {
   from {
          transform: rotate(0deg);
   }
   to {
          transform: rotate(360deg);
   }
}
    

这个CSS动画效果主要使用了旋转的图片，通过设置图片旋转的动画效果，展示出非常好看的效果。

以上就是我学习过的一些CSS好看动画效果图，希望能够帮助到大家。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！