8种CSS3按钮动画特效【附源码】
本文共 2502 字，大约阅读时间需要 8 分钟。
这8款CSS3按钮动画特效。在该特效中，提供了8种按钮动画效果。每种动画在鼠标悬停到按钮上面的时候，都会触发按钮动画。
动画效果截图：
使用方法
HTML结构
最简单的按钮HTML结构如下。
|
CSS样式
* { box-sizing: border-box; } *:before, *:after { content: ""; position: absolute; } .main-content { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } .main-content .item { display: grid; grid-template-rows: 1fr min-content; align-items: center; justify-content: center; height: 50vh; flex-wrap: wrap; background: var(--bg-color); } .main-content .item:not(.footer) { padding-top: 1rem; } button { background: transparent; color: #fff; border: 3px solid #fff; border-radius: 50px; padding: 0.8rem 2rem; font: 24px "Margarine", sans-serif; outline: none; cursor: pointer; position: relative; transition: 0.2s ease-in-out; letter-spacing: 2px; } .name { width: 100%; text-align: center; padding: 0 0 3rem; font: 500 14px 'Rubik', sans-serif; letter-spacing: .5px; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } .button__wrapper { display: inline-block; position: relative; width: 200px; height: 65px; display: flex; justify-content: center; align-items: center; } .button-pulse button { background: var(--bg-color); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; } .button-pulse .button__wrapper:hover .pulsing:before { animation: pulsing 0.2s linear infinite; } .button-pulse .button__wrapper:hover .pulsing:after { animation: pulsing1 0.2s linear infinite; } .pulsing { width: 99%; height: 99%; border-radius: 50px; z-index: 1; position: relative; } .pulsing:before, .pulsing:after { width: 100%; height: 100%; border: inherit; top: 0; left: 0; z-index: 0; background: #fff; border-radius: inherit; animation: pulsing 2.5s linear infinite; } .pulsing:after { animation: pulsing1 2.5s linear infinite; } .button-jittery button { animation: jittery 4s infinite; } .button-jittery button:hover { animation: heartbeat 0.2s infinite; } @keyframes jittery { 5%, 50% { transform: scale(1); } 10% { transform: scale(0.9); } 15% { transform: scale(1.15); } 20% { transform: scale(1.15) rotate(-5deg); } 25% { transform: scale(1.15) rotate(5deg); } 30% { transform: scale(1.15) rotate(-3deg); } 35% { transform: scale(1.15) rotate(2deg); } 40% { transform: scale(1.15) rotate(0); } } @keyframes heartbeat { 50% { transform: scale(1.1); } } |
DEMO源码案例下载地址：
https://tc5.us/file/21793581-404333881
转载地址：http://vffpi.baihongyu.com/
你可能感兴趣的文章
异常 Java学习Day_15
查看>>
JavaSE_day_03 方法
查看>>
day-03JavaSE_循环
查看>>
Mysql初始化的命令
查看>>
day_21_0817_Mysql
查看>>
day-22 mysql_SQL 结构化查询语言
查看>>
MySQL关键字的些许问题
查看>>
浅谈HTML
查看>>
css基础
查看>>
HTML&CSS进阶
查看>>
Servlet进阶和JSP基础
查看>>
servlet中的cookie和session
查看>>
过滤器及JSP九大隐式对象
查看>>
软件（项目）的分层
查看>>
菜单树
查看>>
MySQL-分布式架构-MyCAT
查看>>
设计模式六大原则（6）：开闭原则
查看>>
阿里面试总结--JAVA
查看>>
Servlet的生命周期
查看>>
JAVA八大经典书籍，你看过几本？
查看>>