ホームページ > 記事 > ウェブフロントエンド > JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）
JSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）
- 藏色散人オリジナル
- 2022-02-12 14:46:089192ブラウズ
214 バレンタインデーが近づいており、ロマンチックな本能を持つプログラマーは、ウェブページをドレスアップするのが待ちきれません~私も例外ではありません。そこで、今日は、愛のハートでいっぱいのロマンチックな背景を作成する方法を段階的に説明します。画面の飛行ダイナミック効果。 PS: 技術専門家がディスカッション用にメッセージを残して、最適化の提案を手伝ってくれるのを大歓迎です。
最初に最終的な効果を見てみましょう↓↓↓
#前書き:
の効果この記事では、snowring の使用について説明します。 .jquery.js を実装するには、まず jquery と Snownowring.jquery.js を導入する必要があります。 [推奨: javascript ビデオ チュートリアル ]
snowfall.jquery.js下载地址：https://www.npmjs.com/package/jquery-snowfall
ステップ 1:
疑似要素 before と を使用します。後図に示すように、重なり合う 2 つの長方形を描画します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {
overflow-y: hidden;
}
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.snowfall-flakes:before,
.snowfall-flakes:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 30px;
height: 46px;
background: red;
border-radius: 50px 50px 0 0;
}
</style>
</head>
<body>
<div class="heart-body">
<div class="snowfall-flakes"></div>
</div>
</body>
</html>2 番目のステップ:
を使用します。 #transform 属性を使用して、図に示すように、2 つの疑似要素をそれぞれマイナス 45 度および 45 度回転させます。
.snowfall-flakes:before {
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera */
transform: rotate(-45deg);
}
.snowfall-flakes:after {
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
ステップ 3:
left 属性を使用して、擬似要素 after を特定のピクセルだけ左にオフセットし、2 つのマイクロ要素が部分的に重なってハートを形成します。図に示すように、次のようになります:
.snowfall-flakes:after {
left: 13px;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}愛を描き終えたので、画面全体に愛を飛ばすにはどうすればよいでしょうか? jquery.js と Snowsky.jquery.js を呼び出す必要があり、レンダリングは次のようになります:
完全なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
body {
overflow: hidden;
}
.heart-body {
width: 500px;
margin: 100px auto;
position: relative;
}
.snowfall-flakes:before,
.snowfall-flakes:after {
content: "";
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 30px;
height: 46px;
background: red;
border-radius: 50px 50px 0 0;
}
.snowfall-flakes:before {
-webkit-transform: rotate(-45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(-45deg);
/* Firefox */
-ms-transform: rotate(-45deg);
/* IE 9 */
-o-transform: rotate(-45deg);
/* Opera */
transform: rotate(-45deg);
}
.snowfall-flakes:after {
left: 13px;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
.bgimg{
position:fixed;
top: 0;
left: 0;
width:100%;
height:100%;
min-width: 1000px;
z-index:-10;
zoom: 1;
background-color: #fff;
background: url(bgimg.jpg) no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
</style>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script src="snowfall.jquery.js"></script>
<script>
//调用飘落函数 实现飘落效果
$(document).snowfall({
flakeCount: 50 //爱心的个数
});
$(window).resize(function () {
//当浏览器大小变化时
location.reload(true);
});
</script>
<div class="bgimg"></div>
</body>
</html>実のところ、個人的には愛の絵は小さいほうが見栄えがすると思いますが、上に大きく描くのは、誰でも愛をよりはっきりと確認できるようにするためです。
.snowfall-flakes:before,
.snowfall-flakes:after {
width: 10px;
height: 16px;
border-radius: 10px 10px 0 0;
}
.snowfall-flakes:after {
left: 4px;
}ピンク色のラブ シーンの写真は下にあります。ぜひ手に取って使ってください:
以上がJSは、バレンタインデーのハートが画面全体に降るという美しい特殊効果を実現します（完全なコードが添付されています）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。