点赞特效
2016-11-04 本文已影响0人
TsingXu
在前端网看到别人模仿点赞的效果，也拿来试试。
学到的知识点：@font-face
@font-face是css3的特性。把自定义的字体嵌入到网页中。
为了兼容更多的浏览器，建议的写法是：
图片来自w3cplus
然后在dom中用font-family引用下就可以了。
注意：src的写法要看清，每个url后面是逗号，不是分号。
我在写的时候写成了分号，浪费了几分钟。
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="sublime">
<meta name="Author" content="Tsingxu">
<title>前端网-点赞效果</title>
<style>
@font-face{
font-family: "W3CfunsIcons";
src:url("W3CfunsIcons.eot"),
url("W3CfunsIcons.eot?#iefix") format('embedded-opentype'),
url("W3CfunsIcons.woff") format('woff'),
url("W3CfunsIcons.tiff") format('truetype'),
url("W3CfunsIcons.svg#SingleMaltaRegular") format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]{
font-family: 'W3CfunsIcons';
}
.icon-up:before{
content: "\f164";
}
#like{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
margin: auto;
text-align: center;
text-shadow: 0px 0px 10px rgb(187,187,187);
font-size: 300px;
color: rgb(0,187,0);
-webkit-animation:like 3s ease 0s;
-moz-animation:like 3s ease 0s;
-ms-animation:like 3s ease 0s;
-o-animation:like 3s ease 0s;
animation:like 3s ease 0s;
}
#like span{
position: absolute;
left: 0;
top: 0;
line-height: 370px;
font-size: 70px;
text-indent: 150px;
color: #FFF;
}
@keyframes like{
0% {
transform:scale(.1);
-webkit-transform:scale(.1);
-moz-transform:scale(.1);
-o-transform:scale(.1);
-ms-transform:scale(.1);
opacity:0;
}50% {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
opacity:1;
}
100% {
transform:scale(7);
-webkit-transform:scale(7);
-moz-transform:scale(7);
-o-transform:scale(7);
-ms-transform:scale(7);
opacity:0;
}
}
</style>
<body>
<div class="icon-up" id="like"><span>赞</span></div>
</body>
</html>
不积跬步无以至千里
