css实现文字围成圆圈三维翻转动画效果代码-html代码-BFW代码库

css实现文字围成圆圈三维翻转动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字围成圆圈三维翻转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting-cells.css">
  

<style>
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	display: grid;
	place-items: center;
	position: relative;
	background: conic-gradient(from 90deg at 30% -10%, #8c273b, #bc344f);
	perspective: 800px;
}

svg {
	width: 50vmin;
	aspect-ratio: 1;
	transform-style: preserve-3d;
}
svg text {
	letter-spacing: 1px;
	text-transform: uppercase;
	transform-origin: 50% 50%;
	animation: rotating 30s ease-out infinite;
}
svg .a {
	font-size: 5rem;
	fill: #00b7eb;
	animation-delay: -0.8s;
}
svg .b {
	font-size: 3rem;
	fill: yellow;
	animation-direction: reverse;
	animation-timing-function:.........完整代码请登录后点击上方下载按钮下载查看