轩枫阁

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

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

阅读：42276 评论：16 作者：ivan 分类：CSS、Web前端

前言

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

Demo

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

效果图：

css3

实现

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

HTML

1
2
<a class="s-xguide-down trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>
<a class="s-xguide-down arrow-1 trans" href="http://www.baidu.com/" onclick="return false;" hidefocus=""></a>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
.s-xguide-down{
    width:50px;
    height:50px;
    display:inline-block;
    position:fixed;
    bottom:80px;
    left:50%;
    background:url("./s_xman_guide_f3aebfe5.png") no-repeat -21px -3px;
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./s_xguide_down_ie_a343e020.png",enabled=true,sizingMethod="crop");
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -o-border-radius:50%;
    opacity:.7;
    cursor:pointer
}
@keyframes xguide_down{
    0%,100%{
        transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        opacity:0
    }
    50%{
        transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        opacity:1
    }
 
}
@-webkit-keyframes xguide_down{
    0%,100%{
        -webkit-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -webkit-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
@-moz-keyframes xguide_down{
    0%,100%{
        -moz-transform:scale(0.0);
        -o-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -moz-transform:scale(1.0);
        -o-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
@-o-keyframes xguide_down{
    0%,100%{
        -o-transform:scale(0.0);
        -moz-transform:scale(0.0);
        -webkit-transform:scale(0.0);
        -ms-transform:scale(0.0);
        transform:scale(0.0);
        opacity:0
    }
    50%{
        -o-transform:scale(1.0);
        -moz-transform:scale(1.0);
        -webkit-transform:scale(1.0);
        -ms-transform:scale(1.0);
        transform:scale(1.0);
        opacity:1
    }
 
}
.s-xguide-down.trans{
    -webkit-animation:xguide_down 4.0s infinite ease-in-out;
    -moz-animation:xguide_down 4.0s infinite ease-in-out;
    -o-animation:xguide_down 4.0s infinite ease-in-out;
    animation:xguide_down 4.0s infinite ease-in-out
}
.s-xguide-down.arrow-1{
    animation-delay:-2.0s;
    -webkit-animation-delay:-2.0s;
    -moz-animation-delay:-2.0s;
    -o-animation-delay:-2.0s
}

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

其他方案

Demo

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

效果图：

other

实现

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

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//html
<li><a href="#simple_intro">十分钟入门</a></li>
 
 
//css
li a:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    left: 50%;
    top: 100px;
    -webkit-transform: rotate(45deg) translate(-50%, 0);
    transform: rotate(45deg) translate(-50%, 0);
    -webkit-animation: arrowGo 5s infinite steps(10, end);
    animation: arrowGo 5s infinite steps(10, end)
}
@-webkit-keyframes arrowGo {
    0%{
        opacity: 0.5;
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(45deg) translate(-50%, 0)
    }
    100%{
        opacity: 1;
        -webkit-transform-origin:center center;
        -webkit-transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px
    }
}
@keyframes arrowGo {
    0% {
        opacity: 0.5;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0)
    }
    100% {
        opacity: 1;
        transform-origin: center center;
        transform: rotate(45deg) translate(-50%, 0) scale(2);
        top: 280px;
    }
}

 

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

相关阅读

文章评论

取消回复
  • Wish商户平台

    好久没来了，过来转转

    2016 年 8 月 29 日 上午 12:28
  • 丶触碰不及的光

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

    2015 年 9 月 1 日 下午 2:05
  • 荼蘼

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

    2015 年 2 月 25 日 下午 3:21
    • 荼蘼

      或者给我发邮件也行

      2015 年 2 月 25 日 下午 3:22
    • 轩枫

      对不起，没有存哈

      2015 年 2 月 27 日 下午 2:33
  • zhtml

    不错 ，学习了不错 ，学习了

    2014 年 12 月 9 日 上午 10:23
    • 轩枫

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

      2014 年 12 月 11 日 下午 10:52
  • 小树

    好久没来啦，逛一下。

    2014 年 8 月 6 日 下午 10:23
    • 轩枫

      谢谢

      2014 年 8 月 7 日 下午 1:36
  • web前端开发

    表示很赞

    2014 年 7 月 8 日 下午 12:35
    • 轩枫

      用户体验

      2014 年 7 月 8 日 下午 6:38
  • 小树

    过来串串门，写得不错！

    2014 年 6 月 22 日 上午 10:17
  • 电脑爱好者

    百度新首页做的挺不错的

    2014 年 6 月 21 日 下午 5:57
  • 57博客

    学习一下！十分感谢

    2014 年 6 月 12 日 下午 6:23
  • ZALRA

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

    2014 年 6 月 9 日 下午 10:18
    • 轩枫

      你想表示什么

      2014 年 6 月 10 日 下午 12:35

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间