CSS3超酷颜文字动画特效

当前位置:主页 > CSS3库 > CSS3动画 > CSS3超酷颜文字动画特效
CSS3超酷颜文字动画特效
分享:

    插件介绍

    这是一款CSS3超酷颜文字动画特效。该颜文字动画特效中,通过为不同的颜文字添加不同的animation动画,组合为一组非常炫酷的颜文字动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:08-21
    阅读:
简要教程

这是一款CSS3超酷颜文字动画特效。该颜文字动画特效中,通过为不同的颜文字添加不同的animation动画,组合为一组非常炫酷的颜文字动画效果。

使用方法

HTML代码

下面是第一组颜文字动画效果的示例代码。

<div class="a">
    (<span class="a-arm">╯</span>°□°)<span class="a-arm">╯</span><span class="a-trajectory">︵</span> <span class="a-table">┻━┻</span>
</div>
		

CSS代码

*, *:before, *:after {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --dur: 1s;
    --color1: #17181c;
    --color2: #e3e4e8;
    
}
body {
    background: var(--color2);
    color: var(--color1);
    font: 1em/1 "Helvetica Neue", Helvetica, sans-serif;
}
main {
    margin: 3em auto 0;
    width: 20.5em;
    font-size: calc(12px + (36 - 12) * (100vw - 320px) / (1280 - 320));
}
div, span {
/*  outline: 1px solid red; */
}
div {
    margin-bottom: 2em;
}
span {
    display: inline-block;
}
.a-arm {
    animation: a-armMove var(--dur) linear infinite;
    transform-origin: 25% 25%;
}
.a-trajectory {
    animation: a-trajectory var(--dur) linear infinite;
}
.a-table {
    animation: a-tableFlip var(--dur) linear infinite;
    transform-origin: -33% 50%;
}            
	    

codepen网址:https://codepen.io/jkantner/pen/OrQvyZ