用HTML5和CSS3完美实现网页中动起来的箭头

们经常看到许多网站或者H5的动画都做成了整屏切换的形式，为提高用户体验，会在首屏页面下方放上一个动态的向下箭头来提示用户切换至下一屏。

动态箭头的效果图如下：

那么这种效果是如何实现的呢？

其实非常简单，在CSS3中提供了animation属性，专门用于动画。要使用这个属性，需要先了解@keyframes的创建规则，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

在这个动画中，我们能够看出在整个动画中改变的是箭头的位置，所以我们在创建动画时，只需要给定箭头的起始位置，利用animation让他动起来就可以了。

接下来，我们一步一步完成。

1、首先找到你所需要的箭头图片，将他利用定位的方式放在首屏的底部。

a)html代码（将图片以背景或者插入图片的形式放入标签内，demo以背景形式展示）

b)css代码（利用定位将箭头放在首屏的底部适当位置，网站中大部分情况会进行左右居中）

2、然后进行动画创建，最简单的方式就是只给定初始的以及结束的css样式即可。

css 代码

标注出来的为动画的自定义名称，可以根据你的动画行为来定义。

0%为初始状态，即刚开始动画时。

100%为结束状态，即动画进行到100%时。

动画改变了箭头的底部位置，由距离底部80像素变到了距离底部0像素。

3、接下来利用animation属性让他具有动画效果

css代码：

第一个参数表示你所使用的动画的名称（即我们创建的动画的动画名称），

第二个参数表示动画完成的时间（即由0%到100%所用的时间），

第三个参数表示动画执行的次数（可以为任意数字，infinite表示规定动画无限次播放），因此造成了一个动态的箭头的视觉效果。

通过以上三个步骤即可完成这个简单的动画效果，很多的动画效果都可以通过创建动画的方式来实现。

原文地址北京市盛世阳光文化传播有限责任公司：http://www.gonet.com.cn/webduirshow-140.html

心箭头

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实心箭头</title>
<style>
.con{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 50px auto;
    background-color:#ccc;
}
.arrow-top{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}

.arrow-bottom{
    border-bottom: 10px solid #fff;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #ccc;
    width: 0px;
    height: 0px;
    position: relative;
    top:-40px;
    left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>

非实心箭头

TML 符号实体

HTML 符号是不呈现在标准的键盘上，比如数学运算符、箭头符号、技术符号和形状。

如需向 HTML 页面添加这些符号，您可以使用 HTML 实体名称。

如果不存在实体名称，您可以使用实体编号。

如果字符没有实体名称，您可以使用十进制（或十六进制）引用。

实例

结果如下：

我将显示 €

HTML 支持的数学符号

如果您使用的是一个 HTML 实体名称或一个十六进制编号，字符总是能正确显示。

这是与您页面使用的字符集相互独立的！

字符	编号	实体	描述
∀	∀	∀	所有（for all）
∂	∂	∂	部分（part）
∃	∃	∃	存在（exists）
∅	∅	∅	空（empty）
∇	∇	∇	倒三角（nabla）
∈	∈	∈	属于（isin）
∉	∉	∉	不属于（notin）
∋	∋	&ni;	包含的成员（ni）
∏	∏	∏	连乘（prod）
∑	∑	∑	总和（sum）

完整的数学（Math）参考手册

HTML 支持的希腊字母

字符	编号	实体	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：贝塔）
Γ	Γ	Γ	Gamma（中文注音：伽马）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希腊（Greek）参考手册

HTML 支持的其他实体

字符	编号	实体	描述
©	©	©	版权所有（REGISTERED SIGN）
®	®	®	注册商标（REGISTERED SIGN）
€	€	€	欧元符号（EURO SIGN）
™	™	™	商标（trademark）
←	←	←	向左箭头（LEFTWARDS ARROW）
↑	↑	↑	向上箭头（UPWARDS ARROW）
→	→	→	向右箭头（RIGHTWARDS ARROW）
↓	↓	↓	向下箭头（DOWNWARDS ARROW）
♠	♠	&spades;	黑桃（BLACK SPADE SUIT）
♣	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
♥	♥	&hearts;	黑心（BLACK HEART SUIT）
♦	♦	&diams;	黑方块（BLACK DIAMOND SUIT）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：值得收藏的HTML DOM事件和鼠标键盘事件
下一篇：自适应响应式汽车配件类网站源码 html5高端大气汽车网站织梦模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

用HTML5和CSS3完美实现网页中动起来的箭头

您的项目需求