div+css布局实现文档文字首字母放大动画显示效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现文档文字首字母放大动画显示效果代码
代码标签: div css 布局 文档 文字 首字母 放大 动画 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"); * { margin: 0; padding: 0%; background-color: #2e4861; } .text-wrapper p { font-size: 1.2rem; font-family: "Montserrat", sans-serif; color: #e3f8f6; padding: 0.25rem; max-width: 70%; margin: 10rem auto; position: relative; opacity: 0; animation: fade-in 1.5s 1.2s linear forwards; @media (min-width: 768px) { max-width: 50%; } } .text-wrapper p::first-letter { -webkit-initial-letter: 3; initial-letter: 3; color: transparent; } .animated-letter { font-family: "Playfair Display", serif; position: absolute; top: 8rem; left: 3vw; font-size: 7rem; color: #f0527c; font-weight: bold; line-height: 1; display: inli.........完整代码请登录后点击上方下载按钮下载查看
网友评论0