我接受了這個問題。到目前為止我所擁有的：
$('.lock').click(function () {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function () {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
}, 1250);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: rgba(0, 0, 0, 0)"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 5s; --fa-animation-iteration-count: 1; color: red"></i>
</div>但是只有綠色解鎖圖示影片的最后四分之一應該遵循可見的紅色鎖定圖示影片。如何以 75% 開始影片？
或者你會以不同的方式做這一切嗎？也許沒有 Font Awesome 的影片功能？
uj5u.com熱心網友回復：
您需要覆寫 .fa-flip 影片：
$('.lock').click(function() {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
}, 600);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
我希望這就是你想要的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/354103.html
標籤：javascript css 动画片 css动画 字体真棒
上一篇：VueJSON寫入和讀取