CSS3拨打电话动态图标效果
分类:实例代码
CSS3拨打电话动态图标效果属于前端实例代码,有关更多实例代码大家可以查看。
页面拨打电话的地方可能需要有醒目的提示,下面分享一个CSS3动态图标效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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属性一章节。
CSS3拨打电话动态图标效果,这样的场景在实际项目中还是用的比较多的,关于CSS3拨打电话动态图标效果就介绍到这了。