Css3位移动画效果

transform:translate();平移，传进 x,y值，代表沿x轴和y轴平移的距离

transition-delay: 指定对象过渡的延迟时间

代码

    <!doctypehtml><html><head><meta
charset="utf-8"><title>无标题文档</title><style>.kl{width: 340px;height: 650px;}.kl a{display: block;width: 340px;height:150px;background: white;margin-bottom: 2px;transform:translateX(-340px);transition: all 0.4s ease;background:rgba(6,110,168,1.00);}.kl:hover a{transform:translateX(0px);}.kl
a:nth-last-of-type(1){transition-delay: 0.4s;}.kl
a:nth-last-of-type(2){transition-delay: 0.3s;}.kl
a:nth-last-of-type(3){transition-delay: 0.2s;}.kl
a:nth-last-of-type(4){transition-delay: 0.1s;}.kl a img{width: 340px;height:150px;}</style></head><body><div class="kl"><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div></body></html>

鼠标没移入之前效果

鼠标移入的效果

Css3位移动画效果相关推荐

html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
Css3旋转动画效果
Css3旋转动画效果通过@keyframes规则能够创建动画,CSS3是可以通过代码来创建动画的.用@keyframes定义规则后,就不用像之前先在元素定义执行几秒,@keyframes规则内指定一 ...
CSS3悬浮动画效果
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
html css 悬浮切换效果,CSS3悬浮动画效果_html/css_WEB-ITnose
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
CSS3常用动画效果合集（最全）
CSS3常见的动画效果合集: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webki ...
css3实现动画效果完整代码demo
过渡渐隐适合两张图片调整其中一个透明度,完整代码: <!doctype html> <html lang="en"> <head><me ...

Css3位移动画效果

Css3位移动画效果相关推荐

最新文章

热门文章