跳动的文字

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
	* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
body {
	width:100%;
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#000;
	overflow:hidden;
}
.word-container {
	position:relative;
	width:100%;
	min-height:50%;
}
.word {
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(calc(-50% + (var(--word-index) * -8px)));
	font-family:"Montserrat";
	font-size:6rem;
	font-weight:900;
	color:var(--color,#fff);
	display:flex;
	pointer-events:none;
	user-select:none;
}
.word .char {
	animation:jump-and-flip 3s linear infinite;
	animation-delay:calc((var(--word-index) * -0.06s) + (var(--char-index) * 0.1s));
}
@keyframes jump-and-flip {
	0%,10% {
	transform:translateY(0) rotate(0deg);
}
15% {
	transform:translateY(10%) rotate(0deg);
}
18% {
	transform:translateY(-120%) rotate(0deg);
}
25% {
	transform:translateY(-180%) rotate(60deg);
}
34% {
	transform:translateY(-200%) rotate(120deg);
}
37% {
	transform:translateY(-200%) rotate(240deg);
}
40% {
	transform:translateY(-200%) rotate(300deg);
}
46% {
	transform:translateY(10%) rotate(360deg);
}
50%,100% {
	transform:translateY(0%) rotate(360deg);
}
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg