资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

如何使用代码开发css3的动画按钮

今天就跟大家聊聊有关如何使用代码开发css3的动画按钮，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联是一家以网站设计建设，小程序定制开发、网站开发设计，网络软件产品开发，企业互联网推广服务为主的民营科技公司。主要业务涵盖:为客户提供网站策划、网站设计、网站开发、域名申请、网站优化排名、友情链接等服务领域。凭借建站老客户口碑做市场，建设网站时，根据市场搜索规律和搜索引擎的排名收录规律编程，全力为建站客户设计制作排名好的网站，深受老客户认可和赞誉。

今天给大家带来一款基于css3的动画按钮。实现的效果图如下：

如何使用代码开发css3的动画按钮

实现的代码。

html代码：

XML/HTML Code复制内容到剪贴板

  
          
              
                  
                    share on twitter   
                
               
                                                 
                                                                               share on facebook                                                                                                                                                                   pin on pinterest                                                                                                                                                                   share on tumblr                                                                                                                                                                   share on google+                                                                                                         　　css3代码： CSS Code复制内容到剪贴板 body            {                background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);                background: linear-gradient(90deg, #FF8008 10%, #FFC837 90%);                padding: 2em;                text-align: center;            }                        *            {                -moz-box-sizing: border-box;                box-sizing: border-box;            }                        .share-buttons            {                position: absolute;                width: 300px;                height: 212px;                padding-left: 135px;                top: 50%;                left: 50%;                margin-left: -150px;                margin-top: -106px;            }            .share-buttons .share-button            {                float: left;                margin-top: 15px;            }            .share-buttons .share-button:first-child            {                margin-top: 0;            }            .share-buttons .share-button:after            {                clear: both;                display: table;            }                        .share-button            {                display: block;                position: relative;                height: 30px;            }            .share-button:hover            {                cursor: pointer;            }            .share-button:hover .share-button-primary            {                box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);            }            .share-button:hover .share-button-secondary-content           {                -webkit-transform: translate3d(0, 0, 0);                transform: translate3d(0, 0, 0);            }                        .share-button-primary            {                position: absolute;                background: #fff;                width: 30px;                height: 30px;                border-radius: 15px;                left: 0;                top: 50%;                margin-top: -15px;            }                        .share-button-icon           {                display: block;                color: #242424;                position: absolute;                width: 30px;                line-height: 30px;                font-size: 16px;                margin-top: 1px;            }                        .share-button-secondary            {                overflow: hidden;                margin-left: 15px;                height: 30px;            }                        .share-button-secondary-content           {                font-family: sans-serif;                font-size: .75em;                background: #fff;                display: block;                height: 30px;                text-align: left;                padding-left: 24px;                padding-right: 18px;                line-height: 30px;                color: #242424;                border-radius: 0 15px 15px 0;                -webkit-transform: translate3d(-100%, 0, 0);                transform: translate3d(-100%, 0, 0);                -webkit-transition: -webkit-transform 175ms ease;                transition: transform 175ms ease;            }

看完上述内容，你们对如何使用代码开发css3的动画按钮有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


标题名称：如何使用代码开发css3的动画按钮
网页地址：http://www.cdkjz.cn/article/gijjds.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都网站设计工业净化空调达州网站建设成都h5建站开发响应式网站建设绵阳梓潼做网站成都外贸网站建设公司德阳柴油发电机组都江堰做网站网站制作

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图