轩枫阁

首页 / Web前端 / CSS / CSS3实现晃动的引导箭头-百度新首页

CSS3实现晃动的引导箭头-百度新首页

前言

最近百度再次升级新首页,UI大赞,连新首页的介绍页也显得高大上,使用单页滑动OnePage效果。如果你使用账号登陆百度首页,会陆续收到升级的通知。然后在引导页,发现了一个用户体验上的创意,就是结合CSS3实现晃动的引导箭头。

Demo

预览http://xuanfengge.com/demo/201406/guide/

效果图

css3

实现

箭头其实就是一张图片,然后用2个相同的DOM元素,利用CSS的缩放动画,使其中一个元素延迟发生动画,2个图片间隔的闪烁,即可实现出晃动的效果。具体代码如下:

HTML

CSS

CSS里面,主要用到了CSS3的@keyframes生成动画,利用transform变换中的scale缩放变形,及配合透明度实现。对于IE,则只显示图片,没有动画并无其他影响。

其他方案

Demo

预览http://xuanfengge.com/demo/201406/guide/other.html

效果图:

other

实现

利用伪元素::after给元素加上箭头,箭头通过CSS3 keyframes属性进行移动。箭头实现:背景透明的正方体加上两条白边,利用CSS3 rotate旋转45度即可。

代码

 

jQ动画方案

上一种方法优雅的结合了CSS3动画,制作出体验很棒的效果。而作为一个引导箭头,如果能动态的演示,最直观生动了。最常见的就是箭头的上下移动,实现方案可以是利用jQuery结合CSS的top或者margin-top实现动画。或者再次利用CSS3动画实现上下移动。

多贝网校通箭头效果http://www.wangxiaotong.com/

效果图

css3-2

附录

百度新首页效果图

sdfgvsdfgsdfg

导航

chest_35644a60

新闻

asfwergregh

世界杯

dfgdthyj

音乐

asdfrsghth

星座

sdgfhdhf

227/470
229/470

相关阅读

文章评论

  • 好久没来了,过来转转

  • 我想要第一个箭头的代码,体验很好

  • 我想请问下你还有没有百度新版首页介绍的那个页面,也就是你这篇文章的所介绍的第一个CSS3图标所在的页面.无论是网址或者是离线的HTML都行.谢了,如果有,能不能加一下我的QQ给我发一下,因为我不是经常关注这些消息= =,我怕不能及时收到你的回复.QQ:1079985358

    • 或者给我发邮件也行

    • 对不起,没有存哈

  • 不错 ,学习了不错 ,学习了

    • 这种在手机上很常见,都是运用的CSS3

  • 好久没来啦,逛一下。

    • 谢谢

  • 表示很赞

    • 用户体验

  • 过来串串门,写得不错!

  • 百度新首页做的挺不错的

  • 学习一下!十分感谢

  • 既然来了,我就准备说点啥。

    • 你想表示什么

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子