CSS3撥打電話動態圖示效果
頁面撥打電話的地方可能需要有醒目的提示,下面分享一個CSS3動態圖示效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body{ margin: 0; padding: 0; } a { text-decoration: none; } .fixed-nav a { width: 15%; height: 100%; color: #838383; text-align: center; display: table-cell; vertical-align: middle; } .icon-tel-consult:before { content: "TEL"; } .icon-tel-consult { font-size: 2em; display: block; animation: msClock 1.2s linear infinite; animation: msClock 1.2s linear infinite; } @keyframes msClock { 0%,90%,100% { transform: rotate(0) scale(1); } 20%,40% { transform: rotate(-15deg) scale(1.1); } 30%,50% { transform: rotate(15deg) scale(1.1); } } </style> </head> <body> <div class="fixed-nav"> <a href="#"><i class="icon-tel-consult"></i>撥打電話</a> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).animation參閱CSS3 animation一章節。
(2).@keyframes參閱CSS3 @keyframes一章節。
(3).transform參閱CSS3 transform屬性一章節。
相關文章
- web介面撥打電話Web
- [實戰] Android 撥打電話Android
- CSS3動態餅狀圖效果CSSS3
- 自動打電話軟體效果怎麼樣
- 移動端撥打電話和傳送簡訊按鈕
- IP網路電話機★完全脫離電腦撥打網路電話
- iOS應用自動撥打電話,開啟攝像頭缺陷iOS
- css3氣泡動態上升效果CSSS3
- CSS3動態月食效果詳解CSSS3
- CSS3動態大白效果程式碼CSSS3
- CSS3邊框動態環繞效果CSSS3
- CSS3環繞動態邊框效果CSSS3
- css3動態圓形鐘錶效果CSSS3
- a標籤的妙用-撥打電話、傳送簡訊、傳送郵件
- 手機移動端點選超連結既可以撥打電話程式碼例項
- CSS3圖片上下動畫浮動效果CSSS3動畫
- 打電話的原理
- 和家人打電話
- CSS3文字動態填充背景效果CSSS3
- CSS3打字效果詳解CSSS3
- 能打電話的膝上型電腦,Windows 10 打電話不是夢!Windows
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- css3實現線條環形動態運動效果CSSS3
- mui點選訊息框的用法,及其點選呼叫按鈕撥打電話UI
- CSS3 文字字型顏色動態漸變效果CSSS3
- jquery和css3實現的動態時鐘效果jQueryCSSS3
- 【iOS】動態更換圖示iOS
- 【iOS】動態修改APP圖示iOSAPP
- 如何使用MacBook接打電話?Mac
- 安卓打電話,發簡訊安卓
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- css3實現的動態大白效果程式碼例項CSSS3
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- 專為盲人設計的智慧柺杖 能撥打電話還能監測障礙
- CSS3提交按鈕等待打點迴圈效果CSSS3
- CSS3小球靜態環繞效果CSSS3
- CSS3繪製圖形圖案效果CSSS3
- CSS3圖片旋轉效果CSSS3