ホームページ  >  記事  >  ウェブフロントエンド  >  css3で提案アニメーションを実現

css3で提案アニメーションを実現

不言
不言オリジナル
2018-05-09 11:28:021923ブラウズ

この記事は、CSS3 でのプロポーズの小さなアニメーションの実装を主に紹介しています。これは、必要な友人に参考にしていただけるようになりました。そして、CSS は非常に強力で、やりたいことさえあれば、すべてが可能であることをすぐに感じました。

最初にレンダリングを表示します

それからステップごとに分析します:

最初は、先ほど登場した新郎のアニメーションです

.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:
  • は 6 つのアニメーション属性を設定するための短縮属性です

  • animation-name はセレクターにバインドする必要があるキーフレーム名を指定します
    • animation-duration指定しますアニメーションが完了するまでにかかる時間 (秒またはミリ秒)
    • animation-timing-function はアニメーションの速度曲線を指定します
    • animation-delay はアニメーションが開始するまでの遅延を指定します
    • animation-iteration-countは、アニメーションを再生する回数を指定します
    • animation-directionは、アニメーションを順番に逆方向に再生するかどうかを指定します
    • keyframes:
  • allows開発者は、CSS アニメーションの中間リンクを制御するためにキーフレーム スタイル (または停止ポイント) を表示する必要があるアニメーション内の特定の時点を指定できます。これにより、開発者はブラウザにすべてを自動的に処理させるのではなく、アニメーションの詳細を制御できるようになります。

    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实现扇形动画菜单流程详解

    http://css3实现动画自行车效果


以上がcss3で提案アニメーションを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。