純css3的動畫做效果：
小人來回移動，碰到小球時，小球消失。
首先，html搭建結構：
css布局：
要點1：
這個移動的小人是用兩個半圓來實現：move-top和move-down這兩個子。看似乙個圓構成，但要做出嘴巴張開與閉合這個效果，乙個圓是不能做出來的，採用兩個圓定位重疊，用css的clip屬性將乙個圓的上半部分裁掉，將另乙個圓的下半部分裁掉，這樣形成乙個整圓。
小人在移動過程中，嘴巴的張開與閉合這個效果，用到css3中的
transform：rotate(),move-top上半圓使用rotate(-30deg),move-down下半圓使用rotate(45deg),在配合使用css3的animation動畫來實現嘴巴的重複的張開和閉合。animation的關鍵幀@keyframes animation-move-top實現過程如下。
要點2：
小人來回移動也是css3動畫實現。在這一過程中最要注意的是小人在左右旋轉的位置，以及小人位置的變化（left的變化）。這個動畫的最好的多分幾個時期，這裡我使用了5個階段。animation的關鍵幀@keyframes animation-move-box**如下。
要點3：
小球的顯示與消失，也同樣是css3動畫實現。主要的是用opacity透明度來實現。animation的關鍵幀 @keyframes animation-opacity如下。
用css3做乙個求婚小動畫
本案例主要是運用到了css3的animation keyframes transform等屬性，熟悉了，就可以做更多的其他動畫效果，這幾個屬性功能非常強大。首先，我們先來看看效果圖喲。一 準備工作 1 需要了解animation keyframes transform屬性 keyframes 讓開發...
python求婚創意 用css3做乙個求婚小動畫
首先放張效果圖 然後一步步分析一下 首先是剛出現的新郎的動畫 w m img margin right 0 float right margin top 60px animation towoman 0.5s ease 5s both keyframes towoman 0 opacity 0 tr...
用 CSS3 做乙個流星雨動畫
昨天 ui 提交過來乙個登入頁的設計稿，要求背景有乙個流星雨動畫，做完之後覺得挺有趣，分享一下 一 流星動畫 首先建立乙個 div 作為畫布 div id stars div class star style top 0px left 500px div div html,body stars為了防...