css实现字母文字悬浮切割移位动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现字母文字悬浮切割移位动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Train+One&display=swap"); html, body { width: 100vw; height: 100vh; } body { font-family: "Train One", cursive; position: fixed; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to right top, #0c0b4b, #260e58, #3d0f64, #540f6e, #6b0d78); transform-style: preserve-3d; transform: perspective(60rm); } .weirdo { text-align: center; display: flex; flex-direction: column; align-items: center; font-size: 7rem; line-height: 1; transform: rotateX(25deg) rotateY(20deg); } .weird-list { cursor: pointer; position: relative; color: transparent; } .weird-list::before { background-image: linear-gradient(to right top, #e52e92, #e44ba8, #e162bc, #dd76ce, #d988dd); content: ""; display: block; position: absolute; top: 50%; left: -10%; right: -10%; height: 10px; border-radius: 15%; margin-top: -5px; transform: scale(0); z-index: 1; } .letters { display: block; position: absolute; overflow: hidden; color: #8C95E8; to.........完整代码请登录后点击上方下载按钮下载查看
网友评论0