您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何使用代碼開發(fā)css3的動(dòng)畫按鈕,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
今天給大家?guī)硪豢罨赾ss3的動(dòng)畫按鈕。實(shí)現(xiàn)的效果圖如下:
實(shí)現(xiàn)的代碼。
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<div class="share-buttons"> <div class="share-button"> <div class="share-button-secondary"> <div class="share-button-secondary-content"> share on twitter </div> </div> <div class="share-button-primary"> <i class="share-button-icon fa fa-twitter"></i> </div> </div> <div class="share-button"> <div class="share-button-secondary"> <div class="share-button-secondary-content"> share on facebook </div> </div> <div class="share-button-primary"> <i class="share-button-icon fa fa-facebook"></i> </div> </div> <div class="share-button"> <div class="share-button-secondary"> <div class="share-button-secondary-content"> pin on pinterest </div> </div> <div class="share-button-primary"> <i class="share-button-icon fa fa-pinterest"></i> </div> </div> <div class="share-button"> <div class="share-button-secondary"> <div class="share-button-secondary-content"> share on tumblr </div> </div> <div class="share-button-primary"> <i class="share-button-icon fa fa-tumblr"></i> </div> </div> <div class="share-button"> <div class="share-button-secondary"> <div class="share-button-secondary-content"> share on google+ </div> </div> <div class="share-button-primary"> <i class="share-button-icon fa fa-google-plus"></i> </div> </div> </div> css3代碼: CSS Code復(fù)制內(nèi)容到剪貼板 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; }
看完上述內(nèi)容,你們對(duì)如何使用代碼開發(fā)css3的動(dòng)畫按鈕有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。