文字地心引力动画效果
代码语言:html
所属分类:动画
代码描述:文字地心引力动画效果,方块在转动,文字的方向始终是朝下的
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Rubik&display=swap"); body { box-sizing: border-box; font-family: Rubik, sans-serif; height: 100vh; padding: 0; margin: 0; background: linear-gradient(130deg, SteelBlue 0%, Cyan 100%); display: grid; justify-items: center; align-items: center; position: relative; grid-template: 1fr / 1fr; overflow: hidden; } .tilty { border: 1px solid rbga(cyan, 0.3); border-radius: 50px; text-align: center; padding: 0 40px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); color: white; box-shadow: 0px 1px 1px 1px black; line-height: 100px; text-transform: uppercase; transform-origin: center center; transition: all .01s ease; } .tilty span { color: LightCyan; display: inline-block; text-shadow: 0px, 1px, 10px, black; min-width: 1rem; margin: 0; } @media (max-width: 780px) { .tilty { font-size: 1rem; } .tilty span { min-width: .5rem; } } </style> </head> <body translate="no"> <h1 class="tilty">You spin me right round</h1> <script> // define the element you want to spin const tilty = document.querySelector('.tilty'); // pass that element into this h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0