レンダリングは次のとおりです。
3 月 8 日の女王の日の告白アーティファクトの開発に使用されるナレッジ ポイント: css33D シーン、3D 変換、ラブメイキング スキル、3D キューブ作成スキル、カスタム アニメーション、ネイティブ JS DOM ノード操作、ループなど。
:point_down:html コード:
<div id=display> </div> <div class='heart3d'> <div class='rib1'></div> <div class='rib2'></div> <div class='rib3'> </div> <div class='rib4'></div> <div class='rib5'></div> <div class='rib6'></div> <div class='rib7'></ディビジョン> <ディビジョンclass='rib8'></div> <div class='rib9'></div> <div class='rib10'></div> <div class='rib11'></div> <div class= 'rib12'></div> <div class='rib13'></div> <div class='rib14'></div> <div class='rib15'></div> <div class='rib16'></div> <div class='rib17'></div> <div class='rib18'></div> <div class='rib19'></div> <div class= 'rib20'></div> <div class='rib21'></div> <div class='rib22'></div> <div class='rib23'></div> <div class='rib24'></div> <div class='rib25'></div> <div class='rib26'></div> <div class='rib27'></div> <div class= 'rib28'></div> <div class='rib29'></div> <div class='rib30'></div> <div class='rib31'></div> <div class='rib32'></div> <div class='rib33'></div> <div class='rib34'></div> <div class='rib35'></div> <div class= 'rib36'></div> <div class=per> <div class=img><img width=50 height=50 src=images/1.jpg /></div> <div class=img><img width=50 height=50 src=images/2.jpg /></div> <div class=img><img width=50 height=50 src=images/3.jpg /></div> <div class= img><img width=50 height=50 src=images/4.jpg /></div> <div class=img><img width=50 height=50 src=images/5.jpg /></div> <div class=img><img width=50 height=50 src=images/6.jpg /></div> </div> </div>
:point_down:CSS コード:
<style>/*Css スタイル シート ワードローブ*/ *{margin:0px;padding:0px;}/*デフォルトの外側マージンと内側マージンを削除*/ body{background:#000;} .heart3d {position:absolute; 0; 右: 0; 左: 0; 幅: 100 ピクセル; 中央中央;変換スタイル: 保存 3d; アニメーション: 15 秒の無限リニア } #display{width:200px;color:white;font-size:24px;white-space:normal;text-indent:55px;position:absolute;left :100px;top:100px;} .heart3d [class^=rib] { 位置: 絶対; 幅: 100px; 160px; ボーダー: ソリッド #f22613; ボーダー幅: 1px 1px 0 0; ボーダー半径: 50% 50% 0 / 40% 50% 0; } .heart3d [class$=1] { 変換: 回転Y(10度) (45度) 変換X(30px) } .heart3d [クラス$=2] { 変換: 回転 Y(20 度) 回転 Z(45 度) 変換 X(30 ピクセル); } .heart3d [クラス $=3] { 変換: 回転 Y(30 度) 回転 Z(45 度) 変換 X(30 ピクセル); } { 変換: 回転Y(40度) 回転Z(45度) 変換X(30ピクセル) } [クラス$=5] {変換:回転Y(50度)回転Z(45度)変換X(30ピクセル); } .heart3d [クラス$=6] {変換:回転Y(60度)回転Z(45度)変換X(30ピクセル); [クラス$=7] { 変換: 回転Y(70度) 回転Z(45度) 平行移動X(30ピクセル) } .heart3d [class$=8] { 変換: 回転 Y(80 度) 回転 Z(45 度) 変換 X(30 ピクセル) } .heart3d [クラス $=9] { 変換: 回転 Y(90 度) 回転 Z(45 度) 変換 X(30 ピクセル); .heart3d [class$=10] { 変換: 回転Y(100度) 回転Z(45度)変換X(30ピクセル); } .heart3d [クラス$=11] {変換:回転Y(110度) 回転Z(45度) 変換X(30ピクセル) } .heart3d [クラス$=12] {変換:回転Y(120度) 回転Z(45度)変換X(30px); } .heart3d [クラス$=13] {変換:回転Y(130度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=14] { 変換: 回転Y(140度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=15] { 変換:回転Y(150度) 回転Z(45度) 平行移動X(30ピクセル); .heart3d [class$=16] { 変換: 回転 Y(160 度) 回転 Z(45 度) 変換 X(30 ピクセル) } .heart3d [クラス $=17] { 変換: 回転 Y(170 度) 回転 Z(45 度) 変換 X(30 ピクセル); } .heart3d [class$=18] { 変換: 回転 Y(180 度) 回転 Z(45 度)変換X(30ピクセル); } .heart3d [クラス$=19] {変換:回転Y(190度) 回転Z(45度) 変換X(30ピクセル) } .heart3d [クラス$=20] {変換:回転Y(200度) 回転Z(45度)変換X(30px); } .heart3d [クラス$=21] {変換:回転Y(210度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=22] { 変換: 回転Y(220度) 回転Z(45度) 平行移動X(30ピクセル) } .heart3d [クラス$=23] { -webkit -transform: 回転Y(230度) 回転Z(45度) 平行移動X(30ピクセル);変換: 回転Y(230度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=24] { 変換: 回転Y(240度) 回転Z(45度) 平行移動X(30ピクセル); }変換: 回転Y(250度) 回転Z(45度) 変換X(30ピクセル); .heart3d [class$=26] { 変換: 回転 Y(260 度) 回転 Z(45 度) 変換 X(30 ピクセル) } .heart3d [クラス $=27] { 変換: 回転 Y(270 度) 回転 Z(45 度) 変換 X(30 ピクセル); } .heart3d [class$=28] { 変換: 回転Y(280度) 回転Z(45度)変換X(30ピクセル); } .heart3d [クラス$=29] {変換:回転Y(290度) 回転Z(45度) 変換X(30ピクセル) } .heart3d [クラス$=30] {変換:回転Y(300度) 回転Z(45度)変換X(30px); } .heart3d [クラス$=31] {変換:回転Y(310度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=32] { 変換: 回転Y(320度) 回転Z(45度) 平行移動X(30ピクセル); } .heart3d [クラス$=33] { 変換:回転Y(330度) 回転Z(45度) 平行移動X(30ピクセル); .heart3d [クラス$=34] { 変換: 回転Y(340度) 回転Z(45度) 変換X(30ピクセル) } .heart3d [クラス$=35] { 変換: 回転Y(350度) 回転Z(45度) 変換X(30ピクセル); } .heart3d [class$=36] { 変換: 回転Y(360度) 回転Z(45度)変換 X(30px); } @keyframes スピン { to { 変換: 回転 Y(360 度) 回転 X(360 度); } } .per{ 幅: 50 ピクセル; 高さ: 50 ピクセル; 位置: 絶対; トップ: 0; 左: 0; 右: 0;ボトム:0;マージン:自動;変換スタイル:保存-3d;パースペクティブ:800px; .img{幅:50px;高さ:50px;位置:絶対;背面の可視性:非表示; } .img:nth-child(1){上:-50px;左:0;変換元:下位; (30px) 回転X(90度);} .img:nth-child(2){top:50px;left:0;transform-origin:top;translateZ(30px)rotateX(-90deg);} .img:nth-child(3){top:0px ;左:-50px;変換原点:右;変換:translateZ(30px) 回転Y(-90度);} .img:nth-child(4){top:0px;left:50px;transform-origin:left;translateZ(30px)rotateY(90deg);} .img:nth-child(6){top:0px;左:0;変換:translateZ(30px);} .img:nth-child(5){top:0px;left:0;transform:translateZ(0px);} </style>:point_down:JavaScript コード:
<script> var i = 0; var str1 = HTML 言語はすべての Web ページ制作の基礎であるため、Web ページ制作者にとって HTML 言語は馴染みのないものではありません。しかし、そのページがネチズンにとって使いやすく、フレンドリーで寛大で、デスクトップ アプリケーションのようなものであれば、HTML 言語だけに依存するだけでは十分ではなく、JavaScript がこれにおいて重要な役割を果たします。 ; var str = 誰かを愛し、愛し合っていれば、早春に一緒に出かけ、真夏に一緒に蓮を楽しみ、淡い秋に一緒に月を眺め、晩冬に一緒に梅の花を探すことができます。うんざりだけど幸せ、特別だけど普通。そうすれば、この人生に後悔はありません。 ; window.onload = 関数タイピング(){ var mydiv = document.getElementById(display); var oBtn = document.getElementById('btn'); (入力,100); if(i==str.length){mydiv.value =; mydiv.innerHTML += //alert(プログラムの実行が完了しました!) } } </script>要約する上記は、編集者が紹介した女王の日の告白用の HTML5 開発ツールです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！