CSS3 小人特效是一種使用 CSS3 技術(shù)制作出來的網(wǎng)頁特效,它可以讓網(wǎng)頁上的小人動起來,給網(wǎng)頁增加趣味和活力。
/* CSS3 小人特效 */ /* 設置小人的位置和大小 */ .person { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 200px; } /* 設置小人的動作 */ .person .head { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background-color: #333; } .person .hand-left { position: absolute; top: 35%; left: 2%; width: 30px; height: 10px; background-color: #333; transform: rotate(-30deg); } .person .hand-right { position: absolute; top: 35%; right: 2%; width: 30px; height: 10px; background-color: #333; transform: rotate(30deg); } .person .foot-left { position: absolute; bottom: 0; left: 15%; width: 20px; height: 60px; background-color: #333; } .person .foot-right { position: absolute; bottom: 0; right: 15%; width: 20px; height: 60px; background-color: #333; } /* 設置小人的動畫 */ @keyframes jump { 0% { transform: translateY(0); } 50% { transform: translateY(-80px); } 100% { transform: translateY(0); } } .person { animation: jump 1s infinite; }
以上代碼是實現(xiàn) CSS3 小人特效的關(guān)鍵代碼,通過設定小人的位置、大小和動畫,我們可以在網(wǎng)頁上制作出一個有趣、活潑的小人。如果你想在自己的網(wǎng)頁中加入小人特效,可以按照以上代碼進行制作,也可以通過修改代碼中的參數(shù)來實現(xiàn)不同的小人動作。