CSSのみを使用して三角形のアニメーションを作成する方法

qunzi

このようなアニメーションを作成したいのですが、cssのみを使用しています。

ここに画像の説明を入力してください

三角形を作成しましたが、移動する三角形の背景を作成できません。写真の例を参照してください。

私のコード:

HTML:

 <div class="container">
        <div class="triangle up">
        </div>
        <div class="triangle down-right">

        </div>
        <div class=" down-right1">
        </div>

        <div class="triangle down-left">
        </div>
    </div>

CSS:

.container {
    position: relative;
    left: 45%;
    width: 300px;
    height: 250px;
}

.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(165,60,255);
    background: linear-gradient(90deg, rgba(165,60,255,1) 0%, rgba(98,0,255,1) 100%);
    z-index: 999999;
}

.up {
    top: 0;
    left: auto;
}


.down-right {
    top: 100px;
    left: 16.5%;
}

.down-right1 {
    top: 105px;
    left: 24%;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #c85e5e;
}


.down-left {
    top: 100px;
    left: -16.5%;
}

ページの読み込み中にこのアニメーションを開始したいと思います。

アフィフに同行

スキュー変換とボックスシャドウを使用するアイデア。完璧なものではありませんが、良い出発点です

.box {
  position:fixed;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:75px;
  height:64.5px;
  transition:0.5s all 0.5s;
  transform-origin: 50% 63%;
}
.box::before,
.box::after,
.box div:before,
.box div:after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   border-radius:8px;
   transform-origin:bottom;
   transition:0.5s all;
}
.box::before {
   background:#5840bc;
   transform:skewX(-30deg);
   border-bottom-right-radius: 0;
   box-shadow: 
    0px -20px #886df8,
    0px -40px #c2b3f8;
}
.box::after {
   background:#5844d9;
   box-shadow: 
    -20px 0 #7d69ca,
    -40px 0 #c7bee9;
   transform:skewX(30deg);
    border-top-right-radius: 0;
}

.box div:before {
    background: #714ffe;
    box-shadow: 
     0px -20px #7c6ade,
     0px -40px #c7bee9;
    transform: translate(0%,50%)rotate(120deg) skewX(-30deg);
    transform-origin: center;
    border-bottom-right-radius: 0;
}
.box div:after {
    background: #fff;
    z-index: 1;
    clip-path: polygon(50% 0,100% 100%,0 100%);
    border-radius:0;
}

html:hover .box{
  transform:rotate(60deg);
}
html:hover .box::before,
html:hover .box::after,
html:hover .box div:before,
html:hover .box div:after{
    box-shadow: 
     0px 0 transparent,
     0px 0 transparent;
}
<div class="box">
  <div></div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    PictureBoxで画像のブレンドを無効にする

  3. 3

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  4. 4

    テキストフィールドの値に基づいて UIslider を移動します

  5. 5

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  6. 6

    追加後、ブートストラップマルチセレクトがテーブルで機能しない

  7. 7

    MyBatisがネストされたオブジェクト属性を参照するとOgnlExceptionが発生します

  8. 8

    Ansibleで複数行のシェルスクリプトを実行する方法

  9. 9

    tf.nn_conv2dとtf.nn.depthwise_conv2dの違い

  10. 10

    Python / SciPyのピーク検出アルゴリズム

  11. 11

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  12. 12

    「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

  13. 13

    Dynamics365からローカルファイルにアクセスできます。ローカルリソースは許可されていません

  14. 14

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  15. 15

    Rパッケージ「AppliedPredictiveModeling」のインストール中にエラーが発生しました

  16. 16

    Chromeウェブアプリのウェブビューの高さの問題

  17. 17

    ZScalerと証明書の問題により、Dockerを使用できません

  18. 18

    C ++でのcURLとマルチスレッドの使用

  19. 19

    mutate_allとifelseを組み合わせるにはどうすればよいですか

  20. 20

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  21. 21

    java.lang.NoClassDefFoundError:com / sun / istack / tools / DefaultAuthenticator $ Receiver

ホットタグ

アーカイブ