div+css实现广告牌文字立体翻转动画效果代码

代码语言:html

所属分类:动画

代码描述:div+css实现广告牌文字立体翻转动画效果代码

代码标签: div css 广告牌 文字 立体 翻转 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@import url(https://fonts.bunny.net/css?family=sixtyfour:400);

@layer base, demo;

@layer demo {
	section {
		align-content: center;
		font-family: "Sixtyfour", monospace;
	}
	.flip-text {
		--clr-1: dodgerblue;
		--clr-2: hotpink;
		--clr-3: rgb(94 165 0);

		--translate-distance: 1lh;
		--duration: 3s;
		--timing-function: cubic-bezier(0.66, 0, 0.34, 1);

		overflow-y: hidden;
		width: min(100%, 1200px);
		margin-inline: auto;
		display: grid;
		grid-auto-columns: 1fr;
		grid-auto-flow: column;
		gap: 0;
		font-size: clamp(1rem, 4.5vw + 0.05rem, 5rem);
		font-weight: 700;
		color: var(--clr-1);
		li.........完整代码请登录后点击上方下载按钮下载查看

网友评论0