首先放張效果圖
然後一步步分析一下
首先是剛出現的新郎的動畫
.w-m img{
margin-right: 0;
float: right;
margin-top: 60px;
animation: towoman 0.5s ease .5s both;
@keyframes towoman{
0%{opacity: 0;
transform: translate(-200px);
100%{
opacity: 1;
transform: translate(0);
裡面用到的知識點：
animation：是乙個簡寫屬性，用於設定六個動畫屬性
animation-name 規定需要繫結到選擇器的 keyframe 名稱
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計
animation-timing-function 規定動畫的速度曲線
animation-delay 規定在動畫開始之前的延遲
transform 向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
然後是那朵花的css
.w-f{
position: absolute;
z-index: 20;
left: 50%;
margin-left: -30px;
margin-top: 75px;
.w-f img{
width: 60px;
animation: show 0.4s ease 1s both;
@keyframes show{
0%{opacity: 0;
transform: scale(0.1,0.1);
100%{
opacity: 1;
transform: scale(1,1);
文字部分的css
.w-t-m{
position: absolute;
left: 50%;
z-index: 10;
line-height: 80px;
color: #ff720a;
letter-spacing: 5px;
opacity: 0;
animation: titlebloom 1s linear 1s both;
font-size: 26px;
margin-left: -125px;
@keyframes titlebloom{
0% {
transform: translate(-50px);
100% {
opacity: 1;
transform: translate(0);
文字邊烟花的效果
.w-t img{
opacity: 0;
animation: bloom 2s ease 1.2s infinite;
.w-t img.boom2{
float: right;
animation: bloom 2s ease 1.5s infinite;
.w-t img.boom3{
position: absolute;
margin-top: 40px;
animation: bloom 2s ease 1.4s infinite;
@keyframes bloom{
0% {
transform: scale(0,0);
100% {
opacity: 1;
transform: scale(1,1);
最後幾束花的效果
.w-fls{
width: 820px;
margin: 0 auto;
.w-fls img{
height: 120px;
z-index: 400;
animation: showflows 0.4s ease 2.3s both;
@keyframes showflows{
0%{opacity: 0;
transform: translate(0,200px);
100%{
opacity: 1;
transform: translate(0);
.w-2{
margin-top: -130px;
padding-left: 100px;
.w-2 img{
animation: showflows 0.4s ease 2.7s both;
最後一起學前端，共同進步
用css3實現求婚小動畫
然後一步步分析一下 w m img keyframes towoman 100 是乙個簡寫屬性，用於設定六個動畫屬性 keyframes 讓開發者通過指定動畫中特定時間點必須展現的關鍵幀樣式 或者說停留點 來控制css動畫的中間環節。這讓開發者能夠控制動畫中的更多細節而不是全部讓瀏覽器自動處理 tr...
用css3做乙個求婚小動畫
本案例主要是運用到了css3的animation keyframes transform等屬性，熟悉了，就可以做更多的其他動畫效果，這幾個屬性功能非常強大。首先，我們先來看看效果圖喲。一 準備工作 1 需要了解animation keyframes transform屬性 keyframes 讓開發...
用CSS3實現鐘錶效果
var olist document.getelementbyid list 獲取到刻度 var ocss document.getelementbyid css var ohour document.getelementbyid hour 獲取時針 var omin document.getele...