jQuery + CSSでロマンチックな告白を実現！ (コード付き)
この記事では、jQuery CSSを使って恋愛告白を実現するために必要なページを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
JQ CSS ロマンチックな告白を実現するために必要なページ
レンダリング:
画像素材:
##コードは次のとおりです。コピーして使用してください:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浪漫表白 By：阿杜</title>
<style type = "text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
body{
font-family:"微软雅黑"; <!-- 此处需要自己修改图片路径 -->
background:url(images/b1j.jpg) no-repeat fixed;
background-size:cover;
}
.top{
width:500px;
height:150px;
margin:50px auto;
font-size:30px;
color:#ea544d;
}
.box{
width:310px;
height:310px;
margin:0px auto;
perspective:800px;
margin-top:-40px;
}
.box .wrap{
width:210px;
height:210px;
position:relative;
transform-style:preserve-3d;
animation:play 10s linear infinite;
}
.box .wrap ul li{
list-style:none;
position:absolute;
top:0;left:0;
}
@keyframes play{
from{transform:rotateY(0deg);}
to{transform:rotateY(360deg);}
}
.xin,.xin1{
position:absolute;
}
.xin{
animation:xin 8s linear infinite;
}
@keyframes xin{
0%{top:0%;left:50%;opacity:1;}
20%{top:20%;left:80%;opacity:0;}
40%{top:50%;left:50%;opacity:1;}
60%{top:80%;left:40%;opacity:0;}
80%{top:50%;left:20%;opacity:1;}
100%{top:10%;left:0%;opacity:0;}
}
.xin1{
animation:xin 15s linear infinite;
}
@keyframes xin1{
0%{top:10%;right:50%;opacity:1;}
20%{top:50%;right:80%;opacity:0;}
40%{top:40%;right:50%;opacity:1;}
60%{top:60%;right:40%;opacity:0;}
80%{top:50%;right:20%;opacity:1;}
100%{top:0%;right:0%;opacity:0;}
}
.text{
width:60%;
margin:0 auto;
margin-top:-60px;
font-size:20px;
line-height:30px;
font-weight:500;
animation:color 10s linear infinite;
}
@keyframes color{
0%{color:#039;}
20%{color:#9C3;}
40%{color:#6C6;}
60%{color:#66F;}
80%{color:#FC9;}
100%{color:#9FF;}
}
</style>
</head>
<body>
<!--S top-->
<div class = "top">
<marquee behavior="alternate">Love Page By:阿杜</marquee>
</div>
<!--E top-->
<!--S box-->
<div class = "box">
<div class = "wrap"> <!-- 此处需要自己修改图片路径 -->
<ul>
<li><img src="images/1.gif" height="210px" width="210px"/></li>
<li><img src="images/2.gif" height="210px" width="210px"/></li>
<li><img src="images/3.gif" height="210px" width="210px"/></li>
<li><img src="images/4.gif" height="210px" width="210px"/></li>
<li><img src="images/5.gif" height="210px" width="210px"/></li>
<li><img src="images/6.gif" height="210px" width="210px"/></li>
</ul>
</div>
</div>
<!--E box -此处需要自己修改图片路径-->
<div class = "xin">
<img src="images/xin.png" width="100px" height="100px"/>
</div>
<div class = "xin1">
<img src="images/xin.png" width="100px" height="100px"/>
</div>
<div class = "text">
<p id = "test"></p>
</div> <!-- 此处需要自己修改音频路径 -->
<embed src="sound/bg.mp3" hidden="true"/>
<!-- 此处需要自己修改JQ路径 -->
<script type = "text/javascript" src="js/jquery.min.js"></script>
<script type = "text/javascript">
$(function(){
$(".wrap ul li").each(function(i){
var Deg = 360/$(".wrap ul li").size();
$(this).css({
"transform":"rotateY("+Deg*i+"deg) translateZ(220px)"
});
});
});
window.onload = function autoplay(){
var b = ['能够遇见你，对我来说是最大的幸福。有了你，我的生活变的无限宽广，有了你，世界变得如此迷人。你是世界，世界是你。我愿意用自己的心，好好的陪着你，爱着你。陪你到你想去的地方，用心走完我们人生的余下的旅程。在未来的日子里，也许什么都无法确定，但唯一可以确定的是，我爱的人是你，无论现在还是将来，我想我这里都会是你最温暖的港湾，都是为你遮风避雨的城墙。无论狂风，无论暴雨。我都会陪在你的身旁，让你不会感到丝毫的担心和惶恐。我会珍惜和你在一起的每一刻，每一分，每一秒。谁叫你是我最爱的人，谁叫你是第二幸福的人（因为爱上她你是最幸福的了，哈哈）。为了你，我愿用自己的双手为你撑起一片艳阳！'];
// 分隔字符串
var str = b.join(""),i=0,arr = str.split('');
var ms_stop = setInterval(function(){
// 设置自动出现文字
if(i>str.length-1){
i = 0;
document.getElementById('test').innerHTML='';
}
document.getElementById('test').innerHTML=document.getElementById('test').innerHTML+arr[i];
i++;
},200);
}
</script>
</body>
</html>より良いアイデアや機能があれば、私たちと共有してください。エラーがある場合は、私に連絡してください。修正、ありがとうございますとても！ ！ ！
さらにクールな CSS3、html5、JavaScript、jQuery 特殊効果コードがすべて含まれています:
js 特殊効果コレクション以上がjQuery + CSSでロマンチックな告白を実現！ (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7444
15
1371
52
76
11
9
6
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップにファイルをアップロードする方法
Apr 07, 2025 pm 01:09 PM
ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。
ブートストラップリストでデフォルトスタイルを削除する方法は？
Apr 07, 2025 am 10:18 AM
ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な！の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。
ブートストラップリストのサイズを変更する方法は？
Apr 07, 2025 am 10:45 AM
ブートストラップリストのサイズは、リスト自体ではなく、リストを含むコンテナのサイズに依存します。 BootstrapのグリッドシステムまたはFlexBoxを使用すると、コンテナのサイズを制御することで、リスト項目を間接的に変更します。
ブートストラップナビゲーションバーの設定方法
Apr 07, 2025 pm 01:51 PM
ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）
ブートストラップの日付を確認する方法
Apr 07, 2025 pm 03:06 PM
ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。
