[002]-css实现颜文字动画

最新推荐文章于 2025-01-16 11:13:38 发布

原创最新推荐文章于 2025-01-16 11:13:38 发布 · 797 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #颜文字

css动画特效专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个颜文字动画效果，包括预览、代码下载链接以及详细的代码解读，重点在于HTML结构和CSS样式的设计，尤其是动画效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

shrug

效果预览

https://codepen.io/strugglingBoy/pen/BqKWBY

代码下载

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/020-shrug

代码解读

1.html代码:

定义一个.shrug容器

<div class="shrug">
        <span>¯\_</span>
        <span>(◑_◑)</span>
        <span>_/¯</span>
 </div>

2.css代码

居中显示

body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

让元素一排显示,这里用的是inline-block,这里不用flex是因为他要3行代码。能少写就少写。而且用flex实现肩和脸之间感觉太近了。

.shrug{
	font-family: arial;
	font-size: 10vw;
}
.shrug span:nth-child(1), .shrug span:nth-child(3){
	display: inline-block;
	animation: shrughands 2s infinite;
}

耸肩动画

@keyframes shrughands{
	0%{
	    transform: translateY(0);
	}
	10%{
	    transform: translateY(-10%);
	}
	20%, 100%{
	    transform: translateY(0)
	}
}