【一款基于css3非常实用的鼠标悬停特效】的更多相关文章

一款基于css3非常实用的鼠标悬停特效

今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览   源码下载 实现的代码: html代码: <div align="center" style="position: relative;"> <div class="contener"> <div class="txt_init…

一款基于css3的简单的鼠标悬停按钮

今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <p> Single gradient border</p> <a href="#" class="btn">Click Me!</a> <a hre…

9款基于CSS3 Transitions实现的鼠标经过图标悬停特效

之前给大家分享了很多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=&q…

一款基于css3的散子3D翻转特效

css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div> <div class=&q…

一款基于css3鼠标经过圆形旋转特效

今天给大家分享一款基于css3鼠标经过圆形旋转特效.当鼠标经过的时候图片边框颜色旋转,图片显示详情.该实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="case-content"> <div class="case-item"> <div class="ih-item circ…

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><…

一款基于css3的动画按钮

之前为大家分享了 推荐10款纯css3实现的实用按钮.今天给大家带来一款基于css3的动画按钮.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="share-buttons"> <div class="share-button"> <div class="share-button-secondary"> <div class="share-butt…

5个基于css3超炫的鼠标滑动按钮动画

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="wrap"> <a href="#" class="btn-slide"><span class=&q…

一款基于css3和jquery实现的动画弹出层

今天给大家分享一款基于css3和jquery实现的动画弹出层.这款弹出层初页面面一个显示弹出层按钮.单击该按钮时,弹出层以非常炫的动画形式出现.弹出层有关闭按钮,单击半闭按钮,弹出层关闭.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="papersheet"> <!-- Action Trigger --> <div class="papersheet__trigger"> <!-…

一款基于jquery超炫的图片切换特效

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp…