css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

青灯夜游

Jun 30, 2020 am 09:44 AM

css3 アニメーションミニオン

CSS3 でミニオンを描画するにはどうすればよいですか?次の記事では、CSS を使用してミニオンを描画し、アニメーション効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

まずはレンダリング（ミニオンアニメーション）を見てみましょう

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

いかがでしょうか？手と足のアニメーションはまだあまり似ていませんが、賢い人間の脳はそれでも意味を理解できます。今日はミニオンを生み出す方法を学びましょう。

まず第一に、誰でも見られるように HTML 構造を公開しましょう:

<div class="wrapper"><!-- 容器 -->
        <div class="littleH"><!-- 小黄人 -->
            <div class="bodyH"><!-- 身体 -->
                <div class="trousers"><!-- 裤子 -->
                    <div class="condoleBelt"><!-- 吊带 -->
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                    <div class="trousers_top"></div><!-- 裤子突出的矩形部分 -->
                    <div class="pocket"></div><!-- 裤袋 -->
                    <!-- 三条线 -->
                    <span class="line_left"></span>
                    <span class="line_right"></span>
                    <span class="line_bottom"></span>
                </div>
            </div>
            <div class="hair"><!-- 头发 -->
                <span class="left_hair_one"></span>
                <span class="left_hair_two"></span>
            </div>
            <div class="eyes"><!-- 眼睛 -->
                <div class="leftEye"><!-- 左眼 -->
                    <div class="left_blackEye">
                        <div class="left_white"></div>
                    </div>
                </div>
                <div class="rightEye"><!-- 右眼 -->
                    <div class="right_blackEye">
                        <div class="right_white"></div>
                    </div>
                </div>
            </div>
            <div class="mouse"><!-- 嘴巴 -->
                <div class="mouse_shape"></div>
            </div>
            <div class="hands"><!-- 双手 -->
                <div class="leftHand"></div>
                <div class="rightHand"></div>
            </div>
            <div class="feet"><!-- 双脚 -->
                <div class="left_foot"></div>
                <div class="right_foot"></div>
            </div>
            <div class="groundShadow"></div><!-- 脚底阴影 -->
        </div>
    </div>

ログイン後にコピー

わかりました。すべての場所にその目的をマークしました。少し確認してみてください。それを理解し、大まかなモデルや階層を頭の中に入れてください。

次のステップは、エキサイティングなニュースです。。。ステップバイステップで説明し、ステップバイステップで実装していきます。

まず、コンテナと全体にいくつかの簡単なスタイル設定を行います。

body{
    margin: 0;
    padding:0;
}
.wrapper{
    width: 300px;
    margin:100px auto;
}
.litteH{
    position: relative;
}
.bodyH{
    position: absolute;
    width: 240px;
    height: 400px;
    border:5px solid #000;
    border-radius: 115px;
    background: rgb(249,217,70);
    overflow: hidden;
    z-index: 2;
}

ログイン後にコピー

その中には、があります。 bodyH は主にミニオンを描画するために使用されます。ボディ、ボディの比率は非常に重要です。効果を確認するために実行してください:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

OK、ボディはすでに完成していますさあ、早くパンツを履いてください！

.bodyH .condoleBelt{
    position: absolute;
}
.bodyH .trousers{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    border-top: 6px solid #000;
    background: rgb(32,116,160);
}
.trousers_top{
    width: 160px;
    height: 60px;
    border:6px solid #000;
    border-bottom: none;
    border-radius: 0 0 5px 5px;
    background: rgb(32,116,160);
    position: absolute;
    bottom: 100px;
    left:34px;
}

ログイン後にコピー

このうち、.trousers_top は長方形の部分ですが、パンツを履いた後はどのように見えるでしょうか?

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

どう見てもカプセルです、いや、急いで改造してサスペンダーをつけないとパンツが脱げてしまいます:

.bodyH .condoleBelt .left,
.bodyH .condoleBelt .right{
    width: 100px;
    height: 16px;
    border:5px solid #000;
    background: rgb(32,116,160);
    position: absolute;
    top:-90px;
    left:-35px;
    z-index: 2;
    -webkit-transform:rotate(45deg);
}
.bodyH .condoleBelt .left{
    top:-88px;
    left:165px;
    -webkit-transform:rotate(-45deg);
}
.bodyH .condoleBelt .left:after,
.bodyH .condoleBelt .right:after{
    content: &#39;&#39;;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:4px;
    left:88px;
}

.bodyH .condoleBelt .left:after{
    left:5px;
}

ログイン後にコピー

この作品主なことは、2 つのスリングを実装することです (左右に 1 つずつ)。次に、疑似要素の後に次を使用して、スリング上の小さな黒い点を実現します:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

おい、見栄えが良くなってきた。次に、ズボンのポケットと修正されたエッジを実現するために懸命に努力した:

.pocket{
    width: 60px;
    height: 45px;
    border:6px solid #000;
    border-radius: 0px 0px 25px 25px;
    position: absolute;
    bottom:65px;
    left:84px;
}
.line_right{
    width: 30px;
    height: 30px;
    border-bottom-left-radius: 100px;
    border-bottom:6px solid #000;
    border-left:6px solid #000;
    position: absolute;
    left: 0;
    bottom:60px;
    -webkit-transform:rotate(-75deg);
}
.line_left{
    width: 30px;
    height: 30px;
    border-bottom-right-radius: 100px;
    border-bottom:6px solid #000;
    border-right:6px solid #000;
    position: absolute;
    right: 0;
    bottom:63px;
    -webkit-transform:rotate(75deg);
}
.line_bottom{
    height: 40px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:118px;
    bottom: 0px;
}

ログイン後にコピー

まずはレンダリングを見てみる:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

##OK、2 つの注意点:

1. パンツをボディの中に入れて、overflow:hidden を .bodyH に追加しました。オーバーフローを心配する必要がなく、パンツの効果を得るのが非常に簡単です;

2. 両方に 2 つの曲線セグメントがあることがわかります。パンツの側面。長方形の 1 つの角を与えることで丸みを帯びた効果を実現しました。次に、この角に隣接する 2 つの辺の境界線スタイルのみを設定し、角度を回転してこの効果を実現します。もちろん、これだけで達成できます。よりシンプルな効果。

わかりました、続けましょう。次に、次の目のパーツを実現してみましょう:

.eyes{
    position: relative;
    z-index: 3;
}
.eyes .leftEye,.eyes .rightEye{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border:6px solid #000;
    background: #fff;
    position: absolute;
    top:60px;
    left: 27px;
}
.eyes .leftEye{
    left: 124px;
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top:24px;
    left:22px;
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top:7px;
    left:17px;
}
.eyes .leftEye .left_blackEye .left_white{
    top:4px;
    left:17px;
}
.eyes .leftEye:after,
.eyes .rightEye:after{
    content: &#39;&#39;;
    width: 28px;
    height: 18px;
    background: #000;
    position: absolute;
    left:-30px;
    top:37px;
    -webkit-transform:skewX(20deg) rotate(7deg);
}
.eyes .leftEye:after{
    left:89px;
    top:37px;
    -webkit-transform:skewX(-20deg) rotate(-7deg);
}

ログイン後にコピー

目は非常に簡単に実現できます。最初にメガネを描き、次に眼球を黒くしてから、メガネのフレームは最後に描きましたが、目のフレームは:after疑似要素を使用して実現しました。レンダリングは次のとおりです:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

口が私にとって最もわかりにくいですが、それでも最終的には達成できます:

.mouse{
    position: relative;
}
.mouse .mouse_shape{
    width: 55px;
    height: 35px;
    border:5px solid #000;
    border-bottom-left-radius: 30px;
    background: #fff;
    position: absolute;
    top:175px;
    left:98px;
    z-index: 3;
    -webkit-transform:rotate(-35deg);
}

ログイン後にコピー

まず第一に。 , 丸い角も、長方形の角の 1 つによって実現されます。口の形状をシミュレートして回転するには:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

結果は次のようになります。目的の効果を達成したい場合は、上部をカバーする必要があるため、マスキング効果を達成するために疑似要素の後に使用します:

.mouse .mouse_shape:after{
    content: &#39;&#39;;
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: red;
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
}

ログイン後にコピー

この場所は、ゆっくりと適切な位置に調整する必要がありますシミュレーション図は次のとおりです:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

赤い部分はマスクであり、これも長方形です。下の境界線は、マスクの下の部分と閉じる効果を実現するように設定されています。

.mouse .mouse_shape:after{
    content: &#39;&#39;;
    width: 70px;
    height: 32px;
    border-bottom:5px solid #000;
    border-radius:35px 26px 5px 5px;
    background: rgb(249,217,70);
    position: absolute;
    top:-16px;
    left:3px;
    -webkit-transform:rotate(34deg);
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
}

ログイン後にコピー

効果の図は次のとおりです:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

次に、手の部分を実装します。この部分は難しいことではなく、2つの角丸長方形を角度ごとに回転させ、レベルを体のレベルより低くしてパス: 擬似的に腕の関節に要素を実装して完了です。

.hands{
    position: relative;
}
.hands .leftHand,
.hands .rightHand{
    width: 80px;
    height: 80px;
    border:6px solid #000;
    border-radius: 25px;
    background: rgb(249,217,70);
    position: absolute;
    top:220px;
    left:-23px;
    -webkit-transform:rotate(40deg);
}
.hands .leftHand{
    left:182px;
    top:220px;
    -webkit-transform:rotate(-40deg);
}
.hands .leftHand:after,
.hands .rightHand:after{
    content: &#39;&#39;;
    width: 6px;
    border:3px solid #000;
    border-radius: 3px;
    position: absolute;
    left:13px;
    top:50px;
    -webkit-transform:rotate(90deg);
}

.hands .leftHand:after{
    left:53px;
    top:50px;
    -webkit-transform:rotate(-90deg);
}

ログイン後にコピー

レンダリングは次のとおりです:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

次のステップは足で、主にアッパーのデザインです。長方形を使用し、次にフィレットの値を変えて少し回転を加えてシミュレーションしたのですが、この部分に関してはどうやっても似ていない気がしたので、最終的にはほぼ妥協しました。

.feet{
    position: relative;
}
.feet .left_foot,
.feet .right_foot{
    width: 36px;
    height: 50px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 9px;
    background: #000;
    position: absolute;
    top: 406px;
    left:88px;
    -webkit-transform-origin: right top;
}
.feet .left_foot{
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 6px;
    left:130px;
    -webkit-transform-origin: left top;
}
.feet .left_foot:after,
.feet .right_foot:after{
    content: &#39;&#39;;
    width: 60px;
    height: 35px;
    border-radius: 20px 10px 21px 15px;
    background: #000;
    position: absolute;
    left:-36px;
    top:14.4px;
    -webkit-transform:rotate(5deg);
}
.feet .left_foot:after{
    border-radius: 10px 20px 15px 21px;
    left:13px;
    -webkit-transform:rotate(-5deg);
}

ログイン後にコピー

レンダリングは次のとおりです:

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

本来是不想画头发的，感觉怪难的，最后尝试了一下，还是能出个样子，那就添加上去吧。原理跟裤子左右两边的实现原理是一样的，只是参数值不一样罢了，大家参考代码琢磨一下：

.hair{
    position: relative;
}
.left_hair_one{
    width: 130px;
    height: 100px;
    border-radius: 50%;
    border-top:8px solid #000;
    position: absolute;
    left:17px;
    top:-17px;
    -webkit-transform:rotate(27deg);
}
.left_hair_two{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top:6px solid #000;
    position: absolute;
    left:45px;
    top:-10px;
    -webkit-transform:rotate(15deg);
}

ログイン後にコピー

补充脚底阴影部分：

.groundShadow{
    width: 200px;
    height: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    top: 455px;
    left:25px;
}

ログイン後にコピー

最后就是最初的效果了：

1css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

这时大家可能会问：然后呢？不是还会动的吗？

是的，这里我就大概讲一下实现的思路吧：

1.头发：头发我想实现的是被小风轻轻地吹起来，然后很快就塌下去，所以吹起和下塌分配的时间很关键；

2.眼睛：眼睛我设想的场景是小黄人在悠闲地走路，然后不时左右看一下两边的风景，所以眼睛转动很悠哉，所以分配的时间可以稍微长一点点；

3.嘴巴：让嘴巴动起来确实比较难，因为要动的话，遮罩也得实时跟着改变，而且不能露馅，所以最后实现的是当它往左边看了一下之后卖了一下萌；

4.双手和双脚：这部分确实很难逼真，本来脚就不是正常的走路状态，所以只能按卓别林老爷爷的走路方式模拟一下，而且左右脚动作是紧接实现而不是同步实现。双手的话，我是简单模拟人在走路时有摆手的自然惯性，而且是左脚配右手，右脚配左手。考虑到它的双手是放在背后的，所以我的摆动幅度设置为非常小，有效果但不明显。

OK，我就直接把动画代码放上来吧：

.left_hair_one{
    -webkit-animation: lefthair 2s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
    0%,25%,31%,100%{
    }
    30%{
        -webkit-transform: rotate(31deg) translate3d(-3px,-1px,0);
    }
}
.eyes .leftEye .left_blackEye,
.eyes .rightEye .right_blackEye{
    -webkit-animation: blackeye 5s ease-in infinite;
}
@-webkit-keyframes blackeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translateX(15px);
    }
    80%,90%{
        -webkit-transform: translateX(-15px);
    }
}
.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
    -webkit-animation: whiteeye 5s ease-in-out infinite;
}
@-webkit-keyframes whiteeye{
    0%,20%,50%,70%,100%{
        -webkit-transform: translateX(0px);
    }
    30%,40%{
        -webkit-transform: translate3d(3px,4px,0);
    }
    80%,90%{
        -webkit-transform: translate3d(-15px,4px,0);
    }
}
.mouse .mouse_shape{
    -webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
    40%,43%{
        width: 45px;
        height: 25px;
        top:180px;
    }
    0%,35%,48%,100%{
        width: 55px;
        height: 35px;
        top:175px;
        -webkit-transform:rotate(-35deg);
    }
}
.mouse .mouse_shape:after{
    -webkit-animation: mouse_mask 5s ease-in-out infinite;
}
@-webkit-keyframes mouse_mask{
    40%,43%{
        width: 60.5px;
        top:-19.3px;
        left:1.5px;
    }
    0%,35%,48%,100%{
        width: 70px;
        top:-16px;
        left:3px;
        -webkit-transform:rotate(33deg);
    }
}
.hands .rightHand{
    -webkit-animation:rightHand .8s ease-in-out infinite;
}
@-webkit-keyframes rightHand{
    0%,50%,100%{
        -webkit-transform: rotate(40deg);
    }
    30%{
        -webkit-transform: rotate(37deg) translateX(1px);
    }
}
.hands .leftHand{
    -webkit-animation:leftHand .8s ease-in-out infinite;
}
@-webkit-keyframes leftHand{
    0%,50%,100%{
        -webkit-transform: rotate(-40deg);
    }
    80%{
        -webkit-transform: rotate(-37deg) translateX(-1px);
    }
}
.feet .right_foot{
    -webkit-animation: rightfoot .8s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }
    80%{
        -webkit-transform: rotate(10deg);
    }
}
.feet .left_foot{
    -webkit-animation: leftfoot .8s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
    0%,50%,100%{
        -webkit-transform: rotate(0deg);
    }

    30%{
        -webkit-transform: rotate(-10deg);
    }
}

ログイン後にコピー

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全

更多相关教程请访问：CSS3最新版参考手册

以上がcss3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7554

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Windows 11 でアニメーション効果を高速化する方法: 2 つの方法を説明 Apr 24, 2023 pm 04:55 PM

Microsoft が Windows 11 を発表したとき、多くの変化がもたらされました。変更点の 1 つは、ユーザーインターフェイスのアニメーションの数が増加したことです。一部のユーザーは表示方法を変更したいと考えており、その方法を見つける必要があります。アニメーションがあると、より快適でユーザーフレンドリーな印象になります。アニメーションは視覚効果を使用して、コンピュータをより魅力的に見せ、応答性を高めます。それらの中には、数秒または数分後にスライドメニューが表示されるものもあります。コンピュータには、PC のパフォーマンスに影響を与え、速度を低下させ、作業を妨げる可能性のあるアニメーションが数多くあります。この場合、アニメーションをオフにする必要があります。この記事では、PC 上でアニメーションの速度を向上させるいくつかの方法を紹介します。レジストリエディターまたは実行するカスタムファイルを使用して変更を適用できます。 Windows 11 でアニメーションを改善する方法

CSS アニメーション: 要素のフラッシュ効果を実現する方法 Nov 21, 2023 am 10:56 AM

CSS アニメーション: 要素のフラッシュ効果を実現する方法、具体的なコード例が必要です。Web デザインでは、アニメーション効果がページに優れたユーザーエクスペリエンスをもたらすことがあります。グリッター効果は、要素をより目を引くようにできる一般的なアニメーション効果です。 CSSを使って要素のフラッシュ効果を実現する方法を紹介します。 1. フラッシュの基本的な実装まず、フラッシュ効果を実現するには、CSS のアニメーションプロパティを使用する必要があります。アニメーション属性の値には、アニメーション名、アニメーション実行時間、アニメーション遅延時間を指定する必要があります。

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

Vue を使用してタイプライターアニメーション効果を実装する方法 Sep 19, 2023 am 09:33 AM

Vue を使用してタイプライターアニメーションの特殊効果を実装する方法タイプライターアニメーションは、Web サイトのタイトル、スローガン、その他のテキスト表示でよく使用される、一般的で目を引く特殊効果です。 Vue では、Vue カスタム命令を使用してタイプライターアニメーション効果を実現できます。この記事では、Vue を使用してこの特殊効果を実現する方法を詳しく紹介し、具体的なコード例を示します。ステップ 1: Vue プロジェクトを作成するまず、Vue プロジェクトを作成する必要があります。 VueCLI を使用して新しい Vue プロジェクトをすばやく作成することも、手動で作成することもできます。

Windows 11でアニメーションを無効にする方法 Apr 16, 2023 pm 11:34 PM

Microsoft Windows 11 には、多くの新機能が含まれています。ユーザーインターフェイスが更新され、いくつかの新しいエフェクトも導入されました。デフォルトでは、アニメーション効果はコントロールやその他のオブジェクトに適用されます。これらのアニメーションを無効にする必要がありますか? Windows 11 には視覚的に魅力的なアニメーションとフェード効果が備わっていますが、特定のタスクに多少の遅れが生じるため、一部のユーザーにとってはコンピューターが遅く感じる場合があります。アニメーションをオフにして、応答性の高いユーザーエクスペリエンスを実現するのは簡単です。オペレーティングシステムに加えられたその他の変更を確認した後、Windows 11 でアニメーション効果をオンまたはオフにする方法を説明します。方法についての記事もあります

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。 Dec 18, 2023 am 08:07 AM

当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です

See all articles

css3 でミニオンを描画し、アニメーション効果を実現するにはどうすればよいですか? (コード例)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック