HTML/CSS 文字七彩呼吸灯、抖音特效代码

小助手读文章 00:00 / 00:00

呼吸灯效果

呼吸灯.gif

源码

<!DOCTYPE html>
<span class="name">Name</span>
<style>
.name{   
    font-size:50px;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FF512F;
    font-weight: 700;
    text-shadow: 0px 0px 7px #ffd800;
    background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);
    animation: glow-animation 2s infinite linear;
    color: #FFC0CB;
    box-sizing: border-box;
    vertical-align: inherit;
}
@keyframes glow-animation{
    0%{filter:hue-rotate(-360deg)}
    100%{filter:hue-rotate(360deg)}
}
</style>

抖音效果

抖音特效.gif

代码

<!DOCTYPE html>
<span class="doudong">Name</span>
<style>
.doudong{
    animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
    }
@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
    }
    50% {
        text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
    }
    75% {
        text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
    }
    100% {
        text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
    }
}
@keyframes uk-flicker {
    0% {
        opacity: 0
    }
    10% {
        opacity: .6;
        transform: scale(.8)
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    50% {
        opacity: .2;
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}
</style>

参考文章:

1、《html CSS 七彩呼吸灯
2、《html抖音效果CSS,文字彩色抖动效果CSS


ArmxMod for Typecho
个性化、自适应、功能强大的响应式主题

推广

 继续浏览关于 特效html源码CSS代码抖音呼吸灯七彩 的文章

 本文最后更新于 2019/10/15 12:00:00,可能因经年累月而与现状有所差异

 引用转载请注明:VirCloud's Blog > 建站 > HTML/CSS 文字七彩呼吸灯、抖音特效代码

精选评论