登录  /  注册

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:49:43
原创
1017人浏览过

之前给大家分享了很多css3实现的按钮特效。今天给大家分享9款基于css3 transitions实现的鼠标经过图标悬停特效。这款特效适用浏览器:360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗. 不支持ie8及以下浏览器。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">    <a href="#" class="hi-icon hi-icon-mobile">Mobile</a>    <a href="#" class="hi-icon hi-icon-screen">Desktop</a>    <a href="#" class="hi-icon hi-icon-earth">Partners</a>    <a href="#" class="hi-icon hi-icon-support">Support</a>    <a href="#" class="hi-icon hi-icon-locked">Security</a></div>
登录后复制

css3代码:

.hi-icon-effect-6 .hi-icon {    box-shadow: 0 0 0 4px rgba(255,255,255,1);    transition: background 0.2s, color 0.2s;    }.no-touch .hi-icon-effect-6 .hi-icon:hover {    background: rgba(255,255,255,1);    color: #64bb5d;}.no-touch .hi-icon-effect-6 .hi-icon:hover:before {    animation: spinAround 2s linear infinite;}@keyframes spinAround {    from {        transform: rotate(0deg)    }    to {        transform: rotate(360deg);    }}
登录后复制

via:http://www.w2bc.com/Article/20379

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号