我有一个带有纸质飞机icon的网页,来自字体真棒。是否有可能,因为它是一种字体,使它有一个小动画? 例如,让它缩小并飞走,从下面出现? 用jQuery,javascript还是CSS?
答案 0 :(得分:7)
当然!如果它是字体图标或SVG图标无关紧要,您仍然可以使用CSS为元素设置动画。
这是一个动画示例:
@keyframes fly {
0% {
transform: scale(1);
}
25% {
transform: scale(0.5);
}
100% {
transform: scale(0.5) translate(100vw, -100vh);
}
}
.plane {
display: inline-block;
fill: #e24145;// for demo purposes, only applies to SVGs
&.is-active {
animation-name: fly;
animation-duration: 1.5s;
animation-fill-mode: forwards;
animation-timing-function: ease-in;
}
}
答案 1 :(得分:2)
这是使用JQuery和CSS的示例。我正在使用火箭图标()因为平面图标在我的计算机上无法可靠显示(✈️←所有我能看到的是一个矩形框)。
$(document).ready(function(){
$("#plane-icon").click(function(){
$(this).animate({
left:'180px',
top:'-20px',
fontSize:'20px'
},2000);
$(this).animate({
left:'0px',
top:'180px',
fontSize:'100px'
},0);
$(this).animate({
left:'0px',
top:'80px',
},1000);
});
});
.icon-wrap {
width:180px;
height:180px;
font-size:100px;
cursor:pointer;
position:relative;
overflow:hidden;
}
#plane-icon {
position:absolute;
top:80px;
left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
<span id="plane-icon"></span>
</div>
这是使用CSS关键帧动画而不是JQuery的animate()
函数完成的相同动画。 animationend
事件触发器用于在完成动画制作后重置对象的CSS类。
$(document).ready(function(){
$('body').on('webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend',
function(){
$('#plane-icon').removeClass('launched');
}
);
$('#plane-icon').click(function(){
$(this).addClass('launched');
});
});
.icon-wrap {
width:180px;
height:180px;
font-size:100px;
overflow:hidden;
}
#plane-icon {
display:block;
cursor:pointer;
transform:translate(0px,80px) scale(1);
}
#plane-icon.launched {
animation-name:rocket;
animation-duration:3s;
cursor:default;
}
@keyframes rocket {
0% {
transform:translate(0px,80px) scale(1);
}
66% {
transform:translate(120px,-80px) scale(0.1);
}
67% {
transform:translate(120px,180px) scale(0.1);
}
68% {
transform:translate(0px,180px) scale(1);
}
100% {
transform:translate(0px,80px) scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-wrap">
<span id="plane-icon"></span>
</div>