CSS_Clone Site : VisaCard

2021.07.30

その他のアニメーションの例

パチンコ🏀

cubic-bezierを使用して加速度をボールに設定し、キーフレームアニメーションでx、y座標を変更して位置を移動することができます.
CSSコード

.ball2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: radial-gradient(#333, #ff0000);
  animation: play2 3s alternate infinite cubic-bezier(0.78, 0, 0.21, 0.99);
}
@keyframes play2 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(250px, 300px);
  }
  50% {
    transform: translate(500px, 0);
  }
  75% {
    transform: translate(750px, 300px);
  }
  100% {
    transform: translate(1000px, 0);
  }
}

グラフィック交差🌗

キーフレームアニメーションを使用して、左から右に移動する図形を左から右に移動する図形とは逆に、異なる図形を0%~50%に設定し、片側でz-index値を拡大して交差する図形にするだけです.
CSSコード

#logobox .circle1 {
  left: 0;
  background-color: indigo;
  animation: circle1 1s infinite;
}
#logobox .circle2 {
  right: 0;
  background-color: red;
  animation: circle2 1s infinite;
}
@keyframes circle1 {
  0% {
    left: 0;
    z-index: 1;
  }
  50% {
    left: 60%;
  }
}
@keyframes circle2 {
  0% {
    right: 0;
  }
  50% {
    right: 60%;
  }
}

ハンバーガー効果🍔

3つのspanラベルを位置に配置した後、サスペンション効果に遷移を加えます.1つ目の例はspanで1つ目と3つ目を選択し、transform-originで変化し、45度回転し、transformyで位置を少し移動してX文字を作成します.2つ目の例はspanが180度回転し、各spanでtranを行います.違うition時間を与えて帰りの時間差を作りました
CSSコード

.line {
  width: 50px;
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-25%, -25%);
}
.line2 {
  width: 50px;
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-25%, -25%);
}
.line span,
.line2 span {
  width: 100%;
  height: 2px;
  background-color: #333;
  margin: 10px 0;
  display: block;
  transition: 0.5s;
}
.line:hover span:nth-child(2) {
  opacity: 0;
}
.line span:nth-child(1) {
  transform-origin: 50%;
}
.line span:nth-child(3) {
  transform-origin: 50%;
}
.line:hover span:nth-child(1) {
  transform: translateY(12px) rotate(45deg);
}
.line:hover span:nth-child(3) {
  transform: translateY(-12px) rotate(-45deg);
}

.line2:hover span {
  transform: rotateY(1turn);
}
.line2:hover span:nth-child(1) {
  transition-duration: 0.5s;
}
.line2:hover span:nth-child(2) {
  transition-duration: 0.75s;
}
.line2:hover span:nth-child(3) {
  transition-duration: 1s;
}

market clone coding 👜

このサイトで整理する機能は、画像を背景に入れたときに、アニメーションを止める方法や変換-原点に変化を与え、指定された図形をネズミが火遊びをするように回転させる効果です.
バックグラウンド画像にサスペンション効果を追加するには、バックグラウンドサイズを大きくしたり、対応するプロパティを指定して遷移したり、直接遷移したりすることができます:1 s;に示すように、継続時間のみを指定するとデフォルト値はallなので、自分で指定して画像を大きくすることができます.
transform-originで変化する、すなわちakaマウスの火遊び効果はtransform-origin: 100px 100px;であり、x,y座標を大幅に移動させ、その中心に公転現象を生じさせることができる.
主要CSSコード

.imgbox .bg1,
.imgbox .bg2,
.imgbox .bg3 {
  transition: 1s;
}

.imgbox:hover .bg1,
.imgbox:hover .bg2,
.imgbox:hover .bg3 {
  border-color: orangered;
  background-size: 110%;
}

.icon {
  background-color: green;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 50px;
  position: absolute;
  left: 10px;
  top: 10px;
  transition: 0.5s, 2s;
  transform-origin: 100px 100px;
}
.imgbox:hover .icon {
  background-color: orangered;
  transform: rotate(1turn);
}

Visa card site clone coding 💳

フォルダ構造
index.html
images
css folder > all.min.css + reset.css + style.css
favicon.ico
webfont
以上のように構成する.
Webfontはallmin.cssの役割は、画像ファイルをフォントに変換し、フォントに適用することです.
https://fontawesome.com/ここで無料で提供されるアイコンは、使用のために適用されるファイルと見なすことができる.
reset.cssは、デフォルトのブロックで余白やリストスタイルを除去したり、リンクのデフォルト値の下線や青のフォントを除去したりするグローバルプリセットのスタイルです.
実際に設計するファイルはstyleです.cssです.
faviconと以上のファイルをhtmlにすべて適用するには、次のようにリンクをヘッダーに掛けます.

    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="css/all.min.css" />
    <!-- 폰트 아이콘 -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />

このサイトの主な機能はpositionのstickyプロパティを利用して、スクロール時に画面に固定して、フォローするタブメニューとタブメニューの各リストをクリックすることで、aラベルにhref値でリンクされた#idの領域に移動することもできます.
font awesomeサイトのアイコンをフォントのように使って、希望の位置に並べてリンクする機能もあります.
それからhtmlの中で直接スクロールして、スクロールをもっと滑らかにします.
主要CSS、HTMLコード

html {
  scroll-behavior: smooth;
}

#tab_menu {
  height: 60px;
  border-bottom: 2px solid #ccc;
  box-shadow: 1px 1px 10px #eee;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10;
}

            <dl>
              <dt>팔로우하세요</dt>
              <dd>
                <a href="#"><i class="fab fa-facebook-f"></i></a>
              </dd>
              <dd>
                <a href="#"><i class="fab fa-twitter"></i></a>
              </dd>
              <dd>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
              </dd>
              <dd>
                <a href="#"><i class="fab fa-instagram"></i></a>
              </dd>
            </dl>