这是一款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