div+css实现button发送按钮悬浮图标动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现button发送按钮悬浮图标动画效果代码
代码标签: div cs 按钮 悬浮 发送 动画 button
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> body{ padding: 200px; } button { font-family: inherit; font-size: 20px; background: royalblue; color: white; padding: 0.7em 1em; padding-left: 0.9em; display: flex; align-items: center; border: none; border-radius: 16px; overflow: hidden; transition: all 0.2s; cursor: pointer; } button span { display: block; margin-left: 0.3em; transition: all 0.3s ease-in-out; } button svg { display: block; transform-origin: center center; transition: transform 0.3s ease-in-out; } button:hover .svg-wrapper { animation: fly-1 0.6s ease-in-out infinite alternate; } button:hover svg { transform: translateX(1.2em) rotate(45deg) scale(1.1); } button:hover span { transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0