好玩的css样式

最新推荐文章于 2024-06-13 09:37:29 发布

行走的茶白

最新推荐文章于 2024-06-13 09:37:29 发布

阅读量161

点赞数 2

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/chabaimgg/article/details/136711446

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.鼠标悬浮文字跳动动画效果

  <p class="dajianshi ">应用名称:</p>

.dajianshi {
  font-size: 14px;
  color: black;
}

.dajianshi:hover {
  animation: animate 0.5s linear infinite;
}

@keyframes animate {
  0%,
  25% {
    text-shadow: 2px 5px 2px rgb(255, 151, 151);
  }

  50% {
    text-shadow: 2px -5px 2px rgb(36, 110, 36);
  }

  75% {
    text-shadow: -2px 5px 2px rgb(138, 138, 226);
  }

  100% {
    text-shadow: -2px -5px 2px rgb(216, 128, 216);
  }
}

2.文字颜色渐变的流光效果

.dajianshi {
  margin-top: 100px;
  font-size: 14px;
  background: -webkit-linear-gradient(75deg, #2eaf8d, #2f6ae6 25%, #347ba6 50%, #16d225 55%, #4cc410 60%, #bb2c10 80%, #2f63a4 95%, #28dfd4);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: flowCss 5s infinite linear;
}

@-webkit-keyframes dajianshiFlow {
  0% {
    /* 移动背景位置 */
    background-position: 0 0;
  }
  100% {
    background-position: -400% 0;
  }
}
.dajianshi:hover {
  -webkit-animation: dajianshiFlow 3s infinite linear;
}