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