首页 前端知识 常用的CSS动画效果

常用的CSS动画效果

2024-02-03 12:02:15 前端知识 前端哥 91 712 我要收藏

一、文字颜色渐变效果

方式一:

.headClass{
        background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 3s infinite linear;
    }

@-webkit-keyframes masked-animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

二、上下缓慢移动效果

//动效样式
@keyframes move{
  from{transform:translate(0,0)}
  to{transform:translate(0,5px)}
}

样式中添加动效:

animation: move 0.8s ease-in-out 1s infinite alternate;

三、旋转效果

 
@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
 
animation: rotate 3s linear infinite;

四、动画延迟效果

animation-delay: 1s;
-webkit-animation-delay: 1s; /* Safari 和 Chrome */

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1159.html
标签
css动画
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!