大家好,今天我來和大家分享一些有趣的CSS搞笑GIF。
首先,讓我們來看一個小貓咪在偷懶的場景:
.lazy-cat { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; animation: sleep 5s infinite ease-in-out; } @keyframes sleep { 0% { transform: translate(-50%, -50%) rotateZ(0deg); } 50% { transform: translate(-50%, -50%) rotateZ(-10deg); } 100% { transform: translate(-50%, -50%) rotateZ(0deg); } }
看到這只小貓咪的懶洋洋的表情,是不是覺得十分逗趣呢?讓我們來看看下一個:
.moving-box { position: relative; margin: 0 auto; width: 50px; height: 50px; background-color: #FFFAFA; border: 2px solid #FFA07A; animation: moving 2s ease-in-out infinite; } @keyframes moving { 0% { top: 0; left: 0; } 25% { top: 0; left: 50%; } 50% { top: 50%; left: 50%; } 75% { top: 50%; left: 0; } 100% { top: 0; left: 0; } }
這個滑動的盒子是不是讓你想起了小時候玩的踩氣墊的感覺?最后,讓我們來看一下一個閃閃發光的按鈕:
.shine-btn { position: relative; display: inline-block; padding: 10px 20px; border-radius: 5px; background-color: # FF00FF; color: #FFF; font-size: 16px; font-weight: bold; text-align: center; box-shadow: 0 0 15px 0 #FF1493; animation: shine 2s ease-in-out infinite; } @keyframes shine { 0% { box-shadow: 0 0 15px 0 #FF1493; } 50% { box-shadow: 0 0 30px 20px #FF1493; } 100% { box-shadow: 0 0 15px 0 #FF1493; } }
這個發光的按鈕簡直是太酷炫了,是不是也想快快按下它呢?
好了,以上就是我分享的一些CSS搞笑GIF,希望大家能夠喜歡。
上一篇css擺動動畫
下一篇mysql把兩個表關聯