div+css实现钟摆左右摆动动画文字效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现钟摆左右摆动动画文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Fira+Mono:700"); *, *::after, *::before { box-sizing: border-box; } html, body { height: 100%; min-height: 100%; } body { margin: 0; display: flex; justify-content: center; font-family: "Fira Mono", monospace; background: linear-gradient(to top right, #524ad0 10%, #D099FA); } .stage { position: relative; display: flex; align-items: center; } .text { position: relative; font-size: 3em; color: #5437E3; } @media (min-width: 768px) { .text { font-size: 7em; } } .text__top { position: relative; display: flex; flex-wrap: wrap; } .text__bottom { position: relative; display: flex; margin-left: 1.55em; } .letter { display: inline-block; padding: 0 0.1em; line-height: 1; } .letter--hole-top { opacity: 0; padding: 0 0em; } .letter--hole-bottom { opacity: 0; padding: 0 0.13em; } .letter--front { position: relative; z-index: 3; } .wire { z-index: 2; position: absolute; left: 90px; top: -40px; background: yellow; height: 63%; width: 8px; transform-origin: top center; -webkit-animation: swing 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; animation: swing 3s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite; } @media (min-width: 768px) { .wire { height: 65%; left: 170px; width: 20px; } } .wire:after { content: ""; position: absolute; top: 99%; left: 50%; width: 40px; height: 40px; border-radius: 50%; border: 6px solid yellow; transform: translate(-50%, 0); } @media (min-width: 768px) { .wire:after { width: 90px; height: 90px; border-width: 18px; } } .wire--shadow { opacity: 0.3; z-index: 1; left: 90px; background: rgba(0, 0, 0, 0.4); box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); -webkit-animation: swingShadow 3s cubi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0