请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 5568|回复: 0
收起左侧

[HTML5应用] 使用 CSS3 制作一组超时尚的动画按钮效果[含1P]

[复制链接]
发表于 2017-6-8 07:23:24 | 显示全部楼层 |阅读模式
  通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加。这篇文章中,我想与大家分享一些 CSS3 动画按钮效果。我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活动状态。



HTML 示例代码:


  • <a href="#" class="a-btn">



  •     <span class="a-btn-slide-text">$29</span>



  •     <img src="images/icons/1.png" alt="Photos" />



  •     <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>



  •     <span class="a-btn-icon-right"><span></span></span>



  • </a>

复制代码
CSS 示例代码:


  • .a-btn{



  •     background: linear-gradient(top, #a9db80 0%,#96c56f 100%);



  •     padding-left: 90px;



  •     padding-right: 105px;



  •     height: 90px;



  •     display: inline-block;



  •     position: relative;



  •     border: 1px solid #80ab5d;



  •     box-shadow:



  •         0px 1px 1px rgba(255,255,255,0.8) inset,



  •         1px 1px 3px rgba(0,0,0,0.2);



  •     border-radius: 4px;



  •     float: left;



  •     clear: both;



  •     margin: 10px 0px;



  •     overflow: hidden;



  •     transition: box-shadow 0.3s ease-in-out;



  • }



  • .a-btn img{



  •     position: absolute;



  •     left: 15px;



  •     top: 13px;



  •     border: none;



  •     transition: all 0.3s ease-in-out;



  • }



  • .a-btn .a-btn-slide-text{



  •     position: absolute;



  •     font-size: 36px;



  •     top: 18px;



  •     left: 18px;



  •     color: #6d954e;



  •     opacity: 0;



  •     text-shadow: 0px 1px 1px rgba(255,255,255,0.4);



  •     transition: opacity 0.2s ease-in-out;



  • }



  • .a-btn-text{



  •     padding-top: 13px;



  •     display: block;



  •     font-size: 30px;



  •     text-shadow: 0px -1px 1px #80ab5d;



  • }



  • .a-btn-text small{



  •     display: block;



  •     font-size: 11px;



  •     letter-spacing: 1px;



  • }



  • .a-btn-icon-right{



  •     position: absolute;



  •     right: 0px;



  •     top: 0px;



  •     height: 100%;



  •     width: 80px;



  •     border-left: 1px solid #80ab5d;



  •     box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;



  • }



  • .a-btn-icon-right span{



  •     width: 38px;



  •     height: 38px;



  •     opacity: 0.7;



  •     border-radius: 20px;



  •     position: absolute;



  •     left: 50%;



  •     top: 50%;



  •     margin: -20px 0px 0px -20px;



  •     border: 1px solid rgba(0,0,0,0.5);



  •     background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;



  •     box-shadow:



  •         0px 1px 1px rgba(255,255,255,0.3) inset,



  •         0px 1px 2px rgba(255,255,255,0.5);



  •     transition: all 0.3s ease-in-out;



  • }  

复制代码



上一篇:CSS制作面包屑
下一篇:精选HTML5/CSS3动画应用源码分享
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表