css+js实现鼠标悬浮文字飞出消失动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现鼠标悬浮文字飞出消失动画效果代码
代码标签: css js 鼠标 悬浮 文字 飞出 消失 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <style> html, body{ min-height: 100%; background: #000; line-height:24px; } *{ margin:0; padding:0; font-size:18px; } ul{ list-style:none; } .hide{ display: none; } .lf{ float: left; } .lr{ float: right; } .red, .red a,.red a h5, .red a p{ color:#FF0000 !important; } a { text-decoration: none; color: inherit; } .mr2 { margin-right: 1rem; } .ml2 { margin-left: 1rem; } .main-group{ box-sizing: border-box; max-width:1000px; overflow: hidden; height:100vh; padding:0 5em; display: flex; align-items: center; margin: 0 auto; } .main-group .text{ color: #fff; font-size: 1em; } .main-group .text span{ position: relative; display:inline-block; cursor: pointer; } .main-group .text span.action{ animation: smoke 2s linear forwards; transform-origin: bottom; } @keyframes smoke{ 0%{ opacity: 1; filter: blur(0); transform: translateX(0) translateY(0) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0