jquery css3 は、Web ページでランダムに落ちる花びらの効果を実現します。

浮遊する花のエフェクトの実現 - レンダリング:

デモを見る ソース コードのダウンロード

要件:

jquery、、タイトルを見ただけでわかります

jQuery Transit にもこんなものがあります

http://github.com/rstacruz/jquery.transit

一部の効果のための jquery 拡張機能

花を浮かせる効果は少し複雑で、ある程度の JavaScript コードが必要で、JS と CSS3 の組み合わせによって実現されます。右側のエフェクトを観察すると、フローティングフラワーの実装を大まかに分解できます

Piaohua はキャラクターレベルより高いです
たくさんの花が浮かんでいます
浮かんだ花々は一定の軌道を描いて動きます
浮かぶお花はグラデーション効果があります
浮かぶ花には回転効果があります
花は地面に落ちると消えます

ここで使用されている JS と CSS3 の組み合わせは、回転部分を実装しています。まず、レイアウトの観点からは、浮遊する花がすべての内部要素よりも高いため、レイアウトはページ li と同じレベルにある必要があります。

実装原則:

タイマーを通じて JS コードを呼び出して、継続的かつ動的にスノーフレーク ノードを作成し、背景として画像をランダムに選択し、3 つの初期スタイル属性を top、left、opacity に割り当て、トランジション アニメーションの変更を通じてこれら 3 つの属性のアニメーションを実行します。全体の原理は実際には非常に単純で、主にいくつかの詳細が含まれます: 要素の作成、画像のランダム化、最初の左と不透明度のランダム処理、最終値の計算など。

実行プロセス:

getImagesName はランダムに 6 枚の写真を選択し、snowflakeURl はアドレスの範囲を定義します

createSnowBox はスノーフレーク要素のノードを作成し、回転のキーフレーム実装である SnowRoll スタイルを追加します

タイマーを 200ms に設定してスノーフレーク オブジェクトを継続的に生成し、3 つの属性の初期値を計算し、createSnowBox を通じてスノーフレーク要素を作成し、初期値をアタッチしてから、トランジションを実行して最終値をアタッチします。そしてアニメーションを実行します

アニメーションが終了したら、$(this).remove() を実行してこのオブジェクトを削除します

次に、浮遊する花のエフェクトだけが必要なため、コードを簡略化します

 <div id='content'>
 <!-- 飘花 -->
 <div id="snowflake"></div>
 </div>

外側の #content の幅と高さを取得します

次に #snowflake 内でエフェクトを実行します

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

CSS は次のようになります。top: 42px はナビゲーションの高さによるものです

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

浮かぶ花に回転を加えるなどの CSS3 特殊効果は次のとおりです

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
 ] //js设置数组存储6张花瓣的图片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//获取content的宽高
 ///////
 //飘雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 随机六张图
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 创建一个雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 开始飘花
 setInterval(function() {
 // 运动的轨迹
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 随机透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 &#63; startOpacity : randomStart;
 // 创建一个雪花
 var $flake = createSnowBox();
 // 设计起点位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 开始执行动画
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //结束后删除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//执行函数

})
</script>

上記のコードは、この記事で jquery を使用して Web ページの背景にランダムに落ちる花びらの効果を実現する方法を示しています。気に入っていただければ幸いです。