div+css实现鼠标悬浮播放按钮旋转动画代码
代码语言:html
所属分类:悬停
代码描述:div+css实现鼠标悬浮播放按钮旋转动画代码
代码标签: div css 鼠标 悬浮 播放 按钮 旋转 动画 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; width: 100%; } body { height: 100%; width: 100%; background: #1d1e1f; } *, *:after, *:before { margin: 0; } .container { height: 100%; width: 100%; display: flex; } .button { filter: drop-shadow(0px 0px 0px #975300); position: relative; margin: auto; cursor: pointer; transition: 0.5s filter linear; } .circle { color: #fff; stroke-dasharray: 52; animation: rotate 3s infinite linear; transition: color 0.3s linear, stroke-dasharray 1s linear; } .play { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.6); transition: color 0.3s linear, transform 0.75s cubic-bezier(0.04, 0.19, 0, 0.99); padding-bottom: 0.5rem; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .button:hover { filter: drop-shadow(2px 4px 15px #975300); } .button:hover .circle { color: #e38b29; stroke-dasharray: 360; } .button:hover .play { color: #e38b29; transform: translate3d(-50%, -50%, 0) rotate(90deg) scale(0.9); } .player { display: none; position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; } </style> </head> <body > <div class="container"> <div class="b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0