css实现三维立体文字数字伸缩动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维立体文字数字伸缩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css2?family=Passion+One&display=swap"); :root { --text-border: #ffffff40; --text-border-hover: #ffffff70; } body { margin: 0; padding: 0; background: repeating-linear-gradient( 0deg, transparent 0, transparent 1px, #00000060 2px ), repeating-linear-gradient( 90deg, transparent 0, transparent 1px, #00000060 2px ), radial-gradient(ellipse at 50% 50%, #136eec, #3523dc40) #000; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; font-family: "Passion One", Arial, Helvetica, sans-serif; } .number span { font-size: 45vmin; color: #ffc107; font-weight: normal; transition: all 2s ease 0s; display: inline-block; animation: pulse 2s ease 0s infinite alternate; } .thanks, .followers { font-size: 15vmin; text-align: center; color: #0e1146d9; text-shadow: 0px 1px 1px #ffffff20, 0px 0px 2px #ffffff20; } @keyframes pulse { 0%, 5% { transform: translateY(0vmin); text-shadow: 1px 1px 1px var(--text-border), -1px -1px 1px var(--text-border), -1px 0px 1px var(--text-border), 1px 0px 1px var(--text-border), 0vmin 0.1vmin 1px #fbbc00, 0vmin 0.2vmin 1px #fbbc00, 0vmin 0.3vmin 1px #e2aa00, 0vmin 0.4vmin 1px #e2aa00, 0vmin 0.5vmin 1px #d09c00, 0vmin 0.6vmin 1px #d09c00, 0vmin 0.7vmin 1px #c79601, 0vmin 0.8vmin 1px #c79601, 0vmin 0.9vmin 1px #bb8d00, 0vmin 1vmin 1px #bb8d00, 0vmin 1.1vmin 1px #ad8200, 0vmin 1.2vmin 1px #ad8200, 0vmin 1.3vmin 1px #a07900, 0vmin 1.4vmin 1px #a07900, 0vmin 1.5vmin 1px #926e00, 0vmin 1.6vmin 1px #926e00, 0vmin 1.7vmin 1px #846301, 0vmin 1.8vmin 1px #846301, 0vmin 1.9vmin 1px #735700, 0vmin 2vmin 1px #735700, 0vmin 2.1vmin 1px #634b00, 0vmin 2.2vmin 1px.........完整代码请登录后点击上方下载按钮下载查看
网友评论0