HTML on MoeJue's Blog

macOS風のWebアプリを構築する

Sun, 11 May 2025 11:46:03 +0000

プロジェクト概要

今日のWeb開発分野において、ユーザーエクスペリエンスとインターフェースデザインはますます重要になっています。

Mac Web Vue Templateは、macOSのデザインにインスパイアされた、モダンでエレガントなVue.jsのWebテンプレートです。Vue.jsをベースにした現代的なWebアプリケーションテンプレートであり、そのデザインはmacOSの優雅なインターフェースから着想を得ています。このプロジェクトは、美しいUIデザインだけでなく、完全なプロジェクト構造とベストプラクティスも提供します。

オンラインデモ

WebAi にアクセスすることで、このテンプレートの実際の効果を体験できます。招待コード(MoeJue)

主な特徴

macOS風のUIデザイン
- macOSのデザイン言語を採用
- 洗練されたすりガラス効果
- エレガントなアニメーショントランジション
モダンな技術スタック
- Vue.jsをコアフレームワークとして使用
- Viteをビルドツールとして使用
- Piniaによる状態管理
- Vue Routerによるルーティング処理
- SCSSプリプロセッサ
- ES6+のモダンな機能
レスポンシブデザイン
- あらゆる画面サイズに完璧に対応
- スムーズなモバイル体験

プロジェクト構造の解説

プロジェクトは、明確でモジュール化されたディレクトリ構造を採用しています：

src/
├── assets/          # 静的リソース
├── components/      # Vueコンポーネント
│   ├── common/     # 共通コンポーネント
│   ├── system/     # システムコンポーネント
│   └── apps/       # アプリケーションコンポーネント
├── views/          # ページビュー
├── router/         # ルーティング設定
├── stores/         # 状態管理
└── utils/          # ユーティリティ関数

この構造設計により、プロジェクトは良好な保守性と拡張性を備えています。

開発規範

プロジェクトは厳格な開発規範に従っています：

命名規則

# 俺の二次元アルバムが帰ってきた

Fri, 08 Nov 2024 09:52:39 +0000

最初のギャラリーから画像アップローダー、そして現在のアルバムに至るまで、私の画像に対するこだわりは、もはや世紀をまたぐほどのものです。ギャラリーの画像は七牛雲（Qiniu Cloud）に保存していましたが、後にトラフィックを不正に消費されたため閉鎖しました。画像アップローダーは現在、ブログ用の画像アップロードサービスとして利用しています。アルバムは、スマートフォンのアルバムのような概念で、画像も動画も保存できます。徐々に完成度が高まってきています。

ここ数日で、普段保存している動画や画像などをサーバーにアップロードし、UIとAPIを作成して、ついでにオープンソースとして公開しました。（私は熱心なオープンソース支持者でありたいと思っています）

私の二次元アルバムフロントエンドUI

ここは阿珏ちゃん（A-Jue-chan）のプライベートアルバムで、普段収集した画像や、各プラットフォームで「いいね」や「お気に入り」登録した動画を保存しています。
Bilibili、YouTube、TikTok、X、Facebook、pixivなどのプラットフォームの動画や画像を含みますが、これらに限定されません。関連するデータ情報の著作権はすべて原作者に帰属します。
データは不定期に手動で更新されます。特定の画像や動画が必要な場合は、直接阿珏ちゃんにご連絡ください。

プレビュー

https://photo.moejue.cn

特徴

画像と動画の表示をサポート
アルバムの表示をサポート
アルバムのパスワード保護をサポート
18+保護をサポート
検索機能をサポート

Todo

エフェクト表示の最適化
UIの滑らかさの最適化

インストール手順

リポジトリをローカルにクローンします：
```
git clone https://github.com/iAJue/PhotoGallery.git
```
プロジェクトディレクトリに移動します：
```
cd PhotoGallery
```
依存関係をインストールします：
```
npm install
```
プロジェクトをビルドします
```
npm run build
```

バックエンドAPI

参考用 https://github.com/iAJue/wasteCode/tree/main/photo

返却データ形式

写真API

[
{
    "date": "\u6628\u5929",
    "items": [
        {
            "src": "https:\/\/moejuevideo.pages.dev\/file\/1730957555106_ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "alt": "ocgRCdDEA07fAILEKEFOA8ADAyETABBMffIBE6~tplv-dy-aweme-images_q75.webp",
            "isVideo": false,
            "duration": null
        }
    ]
}
]

アルバムAPI

[
{
    "folder_id": "3",
    "folder_name": "images",
    "created_at": "2024-11-07 15:09:06",
    "photo_count": "61",
    "latest_image": "https:\/\/moejuevideo.pages.dev\/file\/1730963758087_GZIaBGlbAAALz_E.jpeg",
    "attribute": "2",
    "ispassword": true
}
]

ランダムAPI

ネット回線速度の速遅による違い

Sat, 07 Nov 2020 14:09:07 +0000

ネット速度の速遅による違いについて

ネットワークの普及に伴い、ユーザーは応答速度の速遅をますます重視するようになっています。ウェブサイトが速ければ速いほど、ユーザーの定着率とコンバージョン率も高まります。簡単に言えば、スピードアップが重要です！ウェブサイトの速度に影響を与える要因はたくさんあります。例えば………………….

真面目な話は私のスタイルではありません。さて、私のパフォーマンスをご覧ください。 アイデアの起源：最初は純粋なCSSで実装することを考えました。背景画像をbase64エンコードしてbackground-imageに直接配置すれば、背景画像がウェブページと一緒に読み込まれる効果が得られるだろうと。

ステップ1：まず、事前に準備した素材画像を処理し、水着と水着のスカートを脱がせますステップ2：新しいHTMLファイルを作成しますステップ3：

完了。。すると問題が見つかりました。私の背景画像ファイルサイズが12MBに達していたため、エンコード後の文字列が大きすぎ、ウェブページの読み込みが重く遅くなり、まったくユーザー体験がありませんでした。さらに、この方法で読み込まれた背景画像は突然表示され、唐突すぎて効果が良くありませんでした。

その後、変更しました： CSS+JavaScriptで実装することにしました。background-imageで背景画像を直接読み込むことで、徐々に表示される効果が得られ、背景画像の読み込みが完了した後、JSで動的に画像を挿入します。

思わず一言漏らしました。「なんてひどいネットワークだ、遅すぎて人物画像の服すら読み込めないなんて！」

サボっていた主が、新版の三合一を持って帰ってきました。

Sun, 04 Aug 2019 01:42:18 +0000

5月20日の告白以来、ハト主は行方不明の状態が続いていました……. 何ヶ月ぶりか分かりませんが、三合一がまた更新されました。2ヶ月前にグループで立てた目標を、今日達成しました。間の2ヶ月間何をしていたかは聞かないでください-.-（大規模なハトの集会に参加するのに忙しかった）

正文

ネットワーク認識が頻繁にダウンし、非常に不安定であるというフィードバックを多くの仲間から受けていたため、今回特別にローカル認識を更新しました。 1G以上のメモリを搭載したマシンへのインストールを推奨します。推奨構成は2コア2G、最適構成は16コア32Gです [#手動顔文字]

v2.0

ローカルQRコード認識と生成を追加
ネットワーク認識インターフェースを削除
既知のバグを修正
その他のいくつかの詳細な最適化

詳細な説明とインストールチュートリアルは、こちらをクリックして以前のバージョンをご覧ください。新しいバージョンのウェブサイトはすべて古いバージョンのデータを保持しており、以前のユーザーの使用には影響せず、スポンサー版のデータとも同期されています。

スポンサー版

旧バージョンの海賊版が横行していたため、新版の三合一にはスポンサー版が追加されました。デモサイト：https://qr.moeins.cn

スポンサー版の主な特徴：

QRコードの認識と生成を最適化し、認識精度を大幅に向上させ、認識速度を高速化し、CPUとメモリを占有せず、より安定しています。
21種類の三合一生成テンプレートを新規追加し、無限拡張をサポートします。追加チュートリアルは文末にあります。
外部APIインターフェースを新規追加しました。このプログラムに限定されず、どのプログラムからでも呼び出し可能です。

入手方法：こちらをクリックして18.88元以上をプロジェクトに寄付すると、決済コード三合一のスポンサー限定版を入手できます。ぜひお試しください！

スポンサー版に関するいくつかの小さな説明（これまでは特に説明していませんでした）これまでのところ、私のすべてのスポンサー版プロジェクトはドメインに縛られず、暗号化されておらず、自由に拡張でき、二次開発をサポートしており、スポンサー金額も低く設定されています。そのため、スポンサーしてくださった方々は、入手したソースコードを安易に共有しないようお願いいたします。これは作者への敬意であり、ご自身の権利の保護でもあります。売買関係ではないため、重大なバグがない限り、作者は不定期に更新するか、無期限に更新を延期する場合があります。小さな問題が発生した場合、作者が空いている時間であれば指導や修正を手伝う用意がありますが、大規模な新機能の追加といった場合には、協力を拒否するか、別途料金をいただく権利があります。

スポンサー版テンプレート拡張チュートリアル

テンプレートの推奨サイズは：900*1200

テンプレート画像を/public/static/images/template/テンプレートディレクトリに配置します。注意点として、中国語名を使用せず、jpg拡張子のみをサポートします。
ルートディレクトリのconfig.phpにあるqr_template項目に関連データを以下のような形式で設定します。
```
'001' => [
	'name' => '默认模板',
	'data' => [
		150,200
	],
	'title' => true,
	'size' => 20
]
```

パラメータ説明

名称	変数名	必須	型	例	説明
テンプレートID	なし	はい	int	001	テンプレートのファイル名。数字を推奨し、重複不可。
エイリアス	name	はい	string	デフォルトテンプレート	フロントエンドに表示されるテンプレートのエイリアス
X,Y	data	はい	array	[150,200]	QRコード生成の左上隅の開始X（横座標）、Y（縦座標）座標。負の値は不可で、テンプレートサイズより小さいこと。
テンプレートタイトル	title	いいえ	bool	false	テンプレートタイトルを有効にするかどうか。テンプレートがサポートしている場合（デフォルトテンプレートなど）に使用。空でも可。
サイズ	size	いいえ	int	20	QRコードの生成サイズ。デフォルトは20。空でも可。

はい、とても簡単です！

フォームをスマートに送信するには

Mon, 06 May 2019 07:28:33 +0000

これは非常に基本的なHTMLフォームの送信に関する問題ですが、非常に実用的なテクニックでもあります。私の業務シーンは次のとおりです： inputを動的に作成できるフォームです。下の図のように。これは、inputのnameを固定値にできないことを意味します。さもなければ、間違いなく上書きされてしまいます。

1つ目は、従来の一般的な送信方法で、送信する各inputに一意のnameを付けます。

ブラウザが送信したデータをキャプチャした形式は次のようになります。サーバー側で取得して出力するとこのようになり、バックエンドでのデータ処理には非常に不親切です。

2つ目は、配列形式でのフォーム送信です。

ブラウザとバックエンドでの出力はそれぞれ次のようになります。

よく見ると、送信されたnameの値が変化し、同じような？配列？になっていることがわかります。バックエンドに送信すると、データが以前よりもずっと整理されていることがわかります。ただし、ここで注意すべき点は、送信する配列のキーに引用符を使用する必要はないということです。さもなければ、引用符もキーの一部になってしまいます。

もちろん、実際の開発では、送信するグループの数（上記の1、2、3のような）が不確定で、フロントエンドで自由に追加できるという問題に遭遇することもあります。このような場合、どうやって配列を使ってこれらの内容を送信すればよいのでしょうか？以下が私の業務での実際の解決策ですこのようにすれば、2次元配列のキーを自分で管理する必要がなくなり、ブラウザが自動的に生成してくれます。バックエンドで受信したデータはこのようになり、非常に処理しやすくなります。この方法は、不確定な数の関連データセットをまとめて送信する場合に適しています。一件落着！〜

よく使われる機能のクエリSQL

Wed, 10 Apr 2019 09:33:11 +0000

1、シーン：ある選手のランキングと、1つ上の順位の選手との票差をクエリする
方法2（重複を除外してソートし、自分より票の少ない数をクエリする）

$temp = DB::fetch_first(“SELECT distinct total+jewel_vote+forge_vote ,COUNT(*)+1 AS RANK FROM " . DB::table(‘vote_competition’) .” WHERE total+jewel_vote+forge_vote>" . $competition[‘all’] . " and aid={$aid} ORDER by forge_vote desc"); $rank = $temp[‘RANK’]; 1つ上の順位の選手の票数を直接クエリすることはできない if ($temp[’total+jewel_vote+forge_vote’]) { //ここでクエリされるのは1位の選手との票差です $up = $temp[’total+jewel_vote+forge_vote’]-$competition[‘all’]; }

方法1（変数を定義して累加ソート）

$temp = DB::fetch_all(“SELECT a.cid,a.total,a.forge_vote,a.jewel_vote,(@rowNum:=@rowNum+1) AS rank FROM pre_vote_competition AS a, (SELECT (@rowNum :=0) ) b WHERE aid={$aid} ORDER BY (a.total+a.forge_vote+a.jewel_vote) DESC “); foreach ($temp as $key => $value) { if ($value[‘cid’] == $cid) { //現在の自分のランキング $rank = $value[‘rank’]; if ($up) { $up = $up - ($value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]); } break; } //1つ上の順位の選手との票差 $up = $value[’total’] + $value[‘forge_vote’] + $value[‘jewel_vote’]; }

萌音影视 - オンライン動画アプリ

Tue, 25 Sep 2018 07:41:02 +0000

ブログ | デモサイト | QQグループ | GitHub

洗練されたLaravelフレームワークと、全然可愛くないMeizi UIに基づいたオンライン動画アプリケーション

作者より

オンライン動画サイトはどこにでも溢れていますが、それは私が自分で一つ書くことを妨げるものではありません。こうすれば、後で自分でアニメを見るのも便利になりますし、結局、自分で手を動かしてこそ豊かになれるものです。さらに新しい知識も学べるのですから、なんと素晴らしいことでしょう。

ページデザインは一部のウェブサイトを参考にしました。動画リソースはすべてインターネットからのものです。もし著作権侵害がありましたら、速やかにご連絡ください。

一緒にあのうんざりする60秒広告を捨てましょう〜

データベースなし、バックエンドモードなし、設定ファイルは一つだけ(config/web.php)
広告なし、VIP解析をサポート、公式ソース、高速、多チャンネル、多カテゴリ

To-do:

- 独立したチャンネルホームページ
- テレビ局ライブ配信
- 複数の解析インターフェース
- 追加予定…

スポンサー限定版

これはデュアルバージョンアプリケーションです。つまり、2つの異なるバージョンがあります。スポンサー版は通常版を最適化したもので、機能とパフォーマンスが大幅に向上し、実行速度が大幅に向上し、優先的な更新が維持されます。

さて、問題です。スポンサー限定版はどのように入手できますか？

ここまたはここでプロジェクトに58元以上を寄付することで入手できます。

もちろん、もしプロジェクトがあなたのお役に立てたなら、またはあなたが必要とするなら、私たちを支援することを選択できます。たとえわずかな金額でも、それは愛です。

オープンソースプロジェクトを書く人が利益のために書くことはないと思います。結局のところ、それはレンガ工場で一日レンガを運ぶよりも稼げないからです。

インストール要件

LNMP/AMP (PHP5.6+が必要)
curl、OpenSSL拡張機能
Composer

Composerによるメインプログラムのインストール

1. Composerを使用してmoeinsをインストール

$ composer create-project a-jue/moeins

#依存ライブラリのインストール後、インストールスクリプトが自動的に実行されます
#以下のプロンプトが表示されたらインストール完了です

> Illuminate\Foundation\ComposerScripts::postInstall
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.
> php artisan key:generate
Application key [base64:Hx0I9UUQg7OyIz8lpDYG6Y/gW1uxS760ERdWfGG2jyQ=] set successfully.

2. ディレクトリ権限

publicサブディレクトリを公開Webディレクトリとして設定します

3. URLリライト

Apacheサーバーの場合、プロジェクトディレクトリ内の.htaccessにはすでにリライトルールが設定されています。必要に応じて適宜修正してください。Nginxサーバーの場合、以下は参考となる設定です：

CSS3ランダム背景画像切り替えエフェクト

Wed, 16 May 2018 11:58:08 +0000

CSS3のランダム背景画像フェードイン・フェードアウト切り替えエフェクトデモ効果はこの記事の背景に表示されています
皆さんが私の幻想領域二次元限定版のソースコードを解析するのに苦労しているようなので（30分以上もかけている人もいるようです）、時間を見つけて整理して公開することにしました
当初はjQueryで実装する予定でしたが、CSS3の@keyframesルールに気づきました。CSS3は、かつてJSでしか実現できなかった効果を実装できるほど強力になっています

定義と使い方

@keyframesルールを使用することで、アニメーションを作成できます。

アニメーション作成の原理は、あるCSSスタイルを別のスタイルに徐々に変化させることです。

アニメーションの過程で、このCSSスタイルを複数回変更することができます。

変化が起こるタイミングは、パーセンテージで指定するか、キーワード「from」と「to」（それぞれ0%と100%に相当）で指定します。

0%はアニメーションの開始時点、100%はアニメーションの終了時点です。

最高のブラウザサポートを得るためには、常に0%と100%のセレクタを定義する必要があります。

注：アニメーションの見た目を制御するには、アニメーション関連のプロパティを使用し、アニメーションをセレクタにバインドしてください。

CSSのコア部分（画像アドレスの変更を忘れないでください）

body {
	background: #000;
	background-attachment: fixed;
	word-wrap: break-word;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat
}

ul {
	list-style: none
}

.cb-slideshow li:nth-child(1) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341099)
}

.cb-slideshow li:nth-child(2) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341159)
}

.cb-slideshow li:nth-child(3) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341149)
}

.cb-slideshow li:nth-child(4) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341139)
}

.cb-slideshow li:nth-child(5) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341129)
}

.cb-slideshow li:nth-child(6) span {
	background-image: url(https://random.52ecy.cn/randbg.php?v=1520341119)
}

.cb-slideshow,.cb-slideshow:after {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2
}

.cb-slideshow:after {
	content: ''
}

.cb-slideshow li span {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	color: transparent;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: none;
	opacity: 0;
	z-index: -2;
	-webkit-backface-visibility: hidden;
	-webkit-animation: imageAnimation 36s linear infinite 0s;
	-moz-animation: imageAnimation 36s linear infinite 0s;
	-o-animation: imageAnimation 36s linear infinite 0s;
	-ms-animation: imageAnimation 36s linear infinite 0s;
	animation: imageAnimation 36s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-o-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s
}

.cb-slideshow li:nth-child(3) span {
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-o-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s
}

.cb-slideshow li:nth-child(4) span {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s
}

.cb-slideshow li:nth-child(5) span {
	-webkit-animation-delay: 24s;
	-moz-animation-delay: 24s;
	-o-animation-delay: 24s;
	-ms-animation-delay: 24s;
	animation-delay: 24s
}

.cb-slideshow li:nth-child(6) span {
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	-o-animation-delay: 30s;
	-ms-animation-delay: 30s;
	animation-delay: 30s
}

@-webkit-keyframes imageAnimation {
	0% {
		opacity: 0;
		-webkit-animation-timing-function: ease-in
	}

	8% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-out
	}

	17% {
		opacity: 1;
		-webkit-transform: scale(1.1) rotate(0)
	}

	25% {
		opacity: 0;
		-webkit-transform: scale(1.1) rotate(0)
	}

	100% {
		opacity: 0
	}
}

もちろん、HTMLコードと組み合わせる必要があります
HTML部分（中のテキスト部分と

の数は自由に変更可能です）

ランダム二次元画像API第二弾

Sun, 04 Mar 2018 11:01:46 +0000

約3ヶ月ぶり、最初のランダム二次元画像APIの公開からかなりの時間が経ちました。
第二弾API、突然の登場です。

更新内容：

前バージョンと比較して、今回の画像は、背景画像やデスクトップ壁紙などにより適しています。
前バージョンはまさに寄せ集めで、あらゆる種類の画像があり、ひどいものでした（私自身も使っていません）。今回のバージョンでは、時間をかけて一部の画像（1080P以上）を選別し、新浪雲にアップロードしました。
真の意味でHTTPSをサポートし、画像はすべて新浪雲でホストされており、速度も向上しました。
あらゆる意味でのパラメータ設定を削除しました。
画像コンテンツはすべてアニメ・二次元画像です（全年齢向け（笑））。

APIエンドポイント：

https://random.52ecy.cn/randbg.php

はい、呼び出しはこれほど簡単です。直接アクセスするだけで利用できます。どうぞお試しください。
以前の簡易版
 プロジェクトホームページ

ランダムアニメ壁紙、毎日更新して、毎回違う画像を楽しめます。

HTML5キャンバス - ボールの衝突

Tue, 18 Jul 2017 09:17:31 +0000

HTML5は、World Wide Webのコア言語であり、標準汎用マークアップ言語を応用したハイパーテキストマークアップ言語（HTML）の5回目の大幅な改訂版です。
1999年以降、HTML 4.01は大きく変化しました。今日では、HTML 4.01の一部の要素は廃止され、これらの要素はHTML5で削除または再定義されています。現代のインターネットアプリケーションをより良く扱うために、HTML5では多くの新しい要素と機能が追加されました。例えば、図形の描画、マルチメディアコンテンツ、より良いページ構造、より良いフォーム処理、そしてドラッグ＆ドロップ要素、ジオロケーション、ウェブアプリケーションキャッシュ、ストレージ、ウェブワーカーなどのいくつかのAPIが含まれます。

タグ

説明

簡単なCSS3アバター回転と3D回転効果

Mon, 10 Jul 2017 07:45:23 +0000

ウェブサイトのコメント欄で、コメント投稿者のアバターにマウスカーソルを合わせると360°回転するのをよく見かけます。

まず効果を見てみましょう。

.tximg{ height:300px; border-radius:50%; border:2px solid green; /*変化規則*/ transition:all 2s; } .tximg:hover{ /* 変化動作 定義2d回転、パラメータは角度を記入 */ transform:rotate(360deg); }

CSS部分

img{
	height:300px;
	border-radius:50%;
	border:2px solid green;
	/*変化規則*/
	transition:all 2s;
}

img:hover{
	/*
		変化動作
		2D回転を定義し、パラメータに角度を記入
	*/
	transform:rotate(360deg);
}

HTML部分（非常にシンプルで、画像が1枚だけです）

<img src="http://www.52ecy.cn/log0.png">

3D回転効果（フロントエンドの表示スタイルがやはり競合しているようです -。-）

.div{ width:300px; height:300px; border:1px solid red; /*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/ perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/ } .img{ width:300px; height:300px; border:1px solid red; /*変化規則*/ /*回転要素の原点位置を設定*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*変化動作*/ transform:rotateX(60deg); }

CSSコード

div{
	width:300px;
	height:300px;
	border:1px solid red;
	/*3D効果を見たい場合は、動く要素の親要素にperspective属性を追加する必要があります*/
	perspective:300px;/*3D要素からビューまでの距離、通常は画像の高さと同じにすると最も効果的です*/
}
img{
	width:300px;
	height:300px;
	border:1px solid red;
	/*変化規則*/
	/*回転要素の原点位置を設定*/
	transform-origin:bottom;
	transition:all 2s;
}

img:hover{
	/*変化動作*/
	transform:rotateX(60deg);
	
}

HTMLコードの部分はアバター回転の部分と全く同じで、画像を1枚置くだけなので、ここでは省略します。

効果画像を現在のページに直接挿入すると、現在のページのCSSスタイルと競合し、ページ全体が崩れてしまうため、効果画像のスタイルセレクタを変更しました。

注意：IEモードでは動作しない可能性があります。

CSS3でiPhoneを描く

Mon, 03 Jul 2017 06:09:01 +0000

まずは完成イメージをご覧ください、お先にどうぞ。(これは決して画像ではありません。うん～、なんか変な言い方ですね～)

iPhoneの何世代目か聞かないでください、私も知らないし、使ったこともないので、お察しください。

CSSスタイル部分

#phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*设置div元素的圆角边框*/ }

#camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*距离上边距10px 左右居中*/ }

#receiver{ width:80px; height:8px; border:2px solid #505050; margin:10px auto; border-radius:10px; background-color:#1A1A1A; }

#screen{ width:225px; height:385px; background-color:#0A0A0A; border:3px solid #1C1C1C; margin:10px auto; }

#btn{ width:40px; height:40px; background:#1A1A1A; border-radius:50%; /*当宽高相同时，则为圆*/ margin:10px auto; }

/*:before 选择器在被选元素的内容前面插入内容。*/ #btn:before{ width:22px; height:22px; border:2px solid white; border-radius:30%; content:""; /*即使插入的内容为空也需要写，否则不显示*/ display:inline-block; margin-top:7px; margin-left:7px; }

HTML部分

後で少し機能を追加しました

ホームボタンをクリックすると携帯の画面が点灯し、5秒後に再び画面が消えます