JavaScript和css3点赞放大效果
分类：实例代码
分享一段代码实例，它实现了点赞放大效果，效果是JavaScript和css3结合实现。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
height: 100px;
margin: 100px auto;
position: relative;
border: 1px solid #ccc;
}
.reward, .big {
font-size: 38px;
color: green;
display: block;
position: absolute;
top: 20px;
left: 30px;
transition: all .25s ease-in-out;
}
.box .big {
position: fixed;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
font-size: 200px;
animation: gogo 1.5s 1;
display: none;
opacity: 0;
}
@keyframes gogo {
0% {
transform: scale(1);
opacity: 0.5;
}
30% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
70% {
transform: scale(3);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
</style>
<script type="text/javascript">
window.onload = function () {
var icon = document.getElementById('icon');
var bigger = document.getElementById('bigger');
icon.onclick = function () {
bigger.style.display = 'block';
}
}
</script>
</head>
<body>
<div class="box">
<i class="iconfont reward" id="icon">赞</i>
<i class="iconfont big" id="bigger">赞</i>
</div>
</body>
</html>
JavaScript和css3点赞放大效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript和css3点赞放大效果就介绍到这了。
JavaScript和css3点赞放大效果属于前端实例代码，有关更多实例代码大家可以查看。