【技术控】 如何做按钮小动画?HTML+CSS3
2016-02-25 00:00
671 查看
摘要: 当在做网站前端的时候,如何利用HTML+CSS3 做按钮小动画,下面的案例大家可以试试,附源代码!
当在做网站前端的时候,如何利用HTML+CSS3 做按钮小动画,下面的案例大家可以试试,附源代码!
按钮,宽:200,高:45,背景颜色:浅蓝 #b9ccd2 如下图:
当鼠标移动到按钮上,触发动画效果,形成深灰色圆圈向外扩展。如下图:
按钮的大小和颜色可以根据实际情况调整。
例如:把按钮改成,宽:300,高:80,背景颜色:浅绿 #9ef271
代码修改,如下图:
按钮小动画案例的源代码:
以上经验分享给大家,欢迎大家一起分享,一起学习,一起进步……码农加油……
获取源代码文档,查看原文>>
当在做网站前端的时候,如何利用HTML+CSS3 做按钮小动画,下面的案例大家可以试试,附源代码!
按钮,宽:200,高:45,背景颜色:浅蓝 #b9ccd2 如下图:
当鼠标移动到按钮上,触发动画效果,形成深灰色圆圈向外扩展。如下图:
按钮的大小和颜色可以根据实际情况调整。
例如:把按钮改成,宽:300,高:80,背景颜色:浅绿 #9ef271
代码修改,如下图:
按钮小动画案例的源代码:
<div class="set hoverable"> <div class="anim"></div> <span>flash</span> </div> <style type="text/css"> .set{ position: relative; font-weight: 400; text-align: center; width: 200px; line-height: 45px; overflow: hidden; position: relative; z-index: 0; color: #FFFFFF; background: #b9ccd2; cursor: pointer; } .anim{ -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); position: absolute; top: 50%; left: 50%; z-index: -1;} .anim:before { position: relative; content: ''; display: block; margin-top: 100%; background: #6CB1FF; } .anim:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; } .hoverable:hover > .anim:after { -webkit-animation: anim-out-pseudo 0.75s; animation: anim-out-pseudo 0.75s; } .set:hover>.anim{ -webkit-animation: anim-out 0.75s; animation: anim-out 0.75s;} @-webkit-keyframes anim-out-pseudo { 0% { background: rgba(0, 0, 0, 0.25); } 100% { background: transparent; } } @-webkit-keyframes anim-out{ 0% {width: 0%;} 100%{width: 100%;} } </style>
以上经验分享给大家,欢迎大家一起分享,一起学习,一起进步……码农加油……
获取源代码文档,查看原文>>
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 开发人员、程序员与计算机科学家三者之间的区别
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- 如何优雅处理前端异常?
- 程序员必备,程序员四大忌
- 程序员们,做好你手里的俩份试卷
- 通过Mootools 1.2来操纵HTML DOM元素