css实现文字倒影悬浮弹出动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现文字倒影悬浮弹出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@200&display=swap" rel="stylesheet"> <style> .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 30vh; z-index: 100; background: white; background: linear-gradient(0deg, white 75%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0.25) 95%, rgba(255, 255, 255, 0) 100%); } .text { font-family: "Yanone Kaffeesatz"; font-size: 100px; display: flex; position: absolute; bottom: 20vh; left: 50%; transform: translateX(-50%); user-select: none; } .text .wrapper { padding-left: 20px; padding-right: 20px; padding-top: 20px; } .text .wrapper .letter { transition: ease-out 1s; transform: translateY(40%); } .text .wrapper .shadow { transform: scale(1, -1); color: #999; transition: ease-in 5s, ease-out 5s; } .text .wrapper:hover .letter { transform: translateY(-200%); } .text .wrapper:hover .shadow { opacity: 0; transform: translateY(200%); } </style> </head> <body> <!-- #CodePenChallenge: Lightness --> <div class="overlay"></div> <div class="text"> <div class="wrapper"> <div id="L" class="letter&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0