纯css文字悬浮消散动画效果
代码语言:html
所属分类:悬停
代码描述:纯css文字悬浮消散动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; background: linear-gradient(#df725d, #cc4b51, #7f4855, #463e50, #233e51); min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .wrapper:hover p span { animation: smoke 1.75s ease-in forwards; } p { opacity: 0; margin: 0; font-style: italic; color: #f5f5f5; filter: blur(0.02vmin); animation: fade-in 1s ease-in-out forwards; text-shadow: 0 0 2vmin #df725d; } p span { display: inline-block; } p.dream { font-size: 24vmin; font-family: 'Playfair Display', serif; font-weight: 700; margin: -12% 0 -5%; animation-delay: 1s; } p.dream span { margin-left: -6%; } p.dream span:nth-child(1) { animation-delay: 0.6s; } p.dream span:nth-child(2) { animation-delay: 1s; } p.dream span:nth-child(3) { animation-delay: 0.8s; } p.dream span:nth-child(4) { animation-delay: 1.4s; } p.dream span:nth-child(5) { animation-delay: 1.2s; } p.dangerously { font-size: 9vmin; font-family: 'Roboto', sans-serif; font-weight: 100; text-transform: uppercase; padding-left: 21%; animation-delay: 1.5s; } p.dangerously span { margin-left: -1.5%; } p.dangerously span:nth-child(1) { animation-delay: 1.4s; } p.dangerously span:nth-child(2) { animation-delay: 1.2s; } p.dangerously span:nth-child(3) { animation-delay: 1.6s; } p.dangerously span:nth-child(4) { animation-delay: 1.8s; } p.dangerously span:nth-child(5) { animation-delay: 2s; } p.dangerously span:nth-child(6) { animation-delay: 2.4s; } p.dangerously span:nth-child(7) { animation-delay: 2.2s; } p.dangerously span:nth-child(8) { animation-delay: 2.6s; } p.dangerously span:nth-child(9) { animation-delay: 2.8s; } p.dangerously span:nth-child(10) { animation-delay: 3.2s; } p.dangerously span:nth-child(11) { animation-delay: 3s; } .star { position: absolute; height: 1px; width: 1px; background-color: #f5f5f5; border-radius: 50%; box-shadow: 0 0 4px 1px #f5f5f5; animation: twinkle 4s infinite; } .star.medium { height: 2px; width: 2px; } @keyframes twin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0