悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果

CSS3 transition属性实现hover渐变动画效果

我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了，只是在各种浏览器中兼容性稍差，想要追求简单极致的效果，就要失去兼容性，而且随着时间变迁，浏览器标准终究可能还是要统一的。CSS3的Transition属性，这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

transition:颜色变换延续的时间变换速率 transition:background-color 0.3s linear 变换速率： 1、ease：(逐渐变慢)默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：(匀速)，linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：(减速)，ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：(加速然后减速)，ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：(该值允许你去自定义一个时间曲线)，特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

//Mozilla内核 -moz-transition

//Webkit内核 -webkit-transition

//Opera -o-transition

//W3C 标准 transitionhtml>

div {

width:100px;

height:100px;

background:#e33;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover {

width:300px;

}

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在低版本 Internet Explorer 中无效。

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果相关推荐

利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
css3 transition属性造成文字抖动
解决方法: transition属性后面接着写 transform:translateZ(0)
css3 transition属性实现三角形
css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并平滑的以动画效果改变css的属性值,增强 ...
html 淡出淡入轮播图,用CSS3 transition属性实现淡入淡出轮播图
最近想本身写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,本身学习了后整理以下.(找不到原网址了-.-...就不贴了...) (若是不了解transition ...
html图片自动淡出变化,用CSS3 transition属性实现淡入淡出轮播图
最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下.(找不到原网址了-.-...就不贴了...) (如果不了解transition ...
使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
html5 css3舞台灯光,HTML5特效库 CSS3 实现灯光照射显示文字动画源码
效果图各位朋友,大家好! 今天给大家带来的特效源码是 CSS3 实现灯光照射显示文字动画源码是不是很炫酷,大家可以按照自己的想法进行修改! 有想要文件版源码的可以私聊我废话不多说,上源码! CS ...

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果

悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果相关推荐

最新文章

热门文章