【CSS】CSS3 婊ら暅闂姹傛寚鏁欙紝濡備綍璁╁浘鐗囧彉鑹诧紵

Z时代
2024-01-10
分类：技术分享

鍥剧墖鎻忚堪

涓婇潰杩欏紶鍥剧墖榛樿鏄僵鑹茬殑锛屾€庢牱閫氳繃婊ら暅鎸囧畾鍒殑棰滆壊锛熸垜璇曚簡涓嬪彧鑳芥槸鏁翠綋鐏拌壊锛屾垜鍙互涓嶅彲浠ヨ浠栨暣浣撳彉鎴愮豢鑹层€佺孩鑹层€佸挅鍟°€佺瓑棰滆壊鍛紵鍦ㄧ嚎鎬ョ瓑銆併€併€佹眰鎸囨暀锛岃藩璋emo馃槂

回答：

<style>
  .animate1 {
    -webkit-animation: filter-animation 5s infinite;
  }
  @-webkit-keyframes filter-animation {
    0% {
      -webkit-filter: sepia(0) saturate(2) drop-shadow(0px 0px 0px rgba(0,0,0,0));
    }
    50% {
      -webkit-filter: sepia(1) saturate(8) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
    }
    100% {
      -webkit-filter: sepia(0) saturate(2) drop-shadow(10px 10px 15px rgba(0,0,0,0.9));
    }
  }
</style><img class="animate1" src="http://lsly1989.qiniudn.com/scsacasgbgjtuyhead鍓湰.png">