欧美性猛交xxx嘿人猛交_又色又爽又高潮免费观看_精品国产一区二区三区久久影院_青娱乐极品视觉盛宴国产视频

技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS+svg實現三條橫線點擊變叉菜單按鈕動畫

作者:admin    時間:2023-6-15 11:42:42    瀏覽:

本文介紹一款純CSS實現的三條橫線點擊變叉菜單動畫。

效果圖

 CSS三條橫線點擊變叉菜單動畫

demodownload

示例介紹

該菜單由純CSS實現。

該菜單為一款三條橫線菜單（漢堡菜單），點擊菜單后三條橫線變成一個叉（X）。

HTML

<body>
  <div class="container" onclick="this.classList.toggle('active')">
    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 200 200">
      <g stroke-width="6.5" stroke-linecap="round">
        <path d="M72 82.286h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
        <path d="M100.75 103.714l72.482-.143c.043 39.398-32.284 71.434-72.16 71.434-39.878 0-72.204-32.036-72.204-71.554" fill="none" stroke="#fff" />
        <path d="M72 125.143h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
        <path d="M100.75 103.714l-71.908-.143c.026-39.638 32.352-71.674 72.23-71.674 39.876 0 72.203 32.036 72.203 71.554" fill="none" stroke="#fff" />
        <path d="M100.75 82.286h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
        <path d="M100.75 125.143h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" /> </g>
    </svg>
  </div>
</body>

三條橫線菜單由svg標簽畫布畫成。

div是菜單容器，div有一個onclick事件，它觸發三橫線變叉的轉換動畫。

CSS

三橫線

svg {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
path {
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
path:nth-child(1) {
    transform-origin: 36% 40%;
}
path:nth-child(2) {
    stroke-dasharray: 29 299;
}
path:nth-child(3) {
    transform-origin: 35% 63%;
}
path:nth-child(4) {
    stroke-dasharray: 29 299;
}
path:nth-child(5) {
    transform-origin: 61% 52%;
}
path:nth-child(6) {
    transform-origin: 62% 52%;
}

叉（X）

.active svg {
    transform: rotate(90deg);
}
.active path:nth-child(1) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}
.active path:nth-child(2) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}
.active path:nth-child(3) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.active path:nth-child(4) {
    stroke-dasharray: 225 299;
    stroke-dashoffset: -72px;
}
.active path:nth-child(5) {
    transform: translateX(9px) translateY(1px) rotate(-45deg);
}
.active path:nth-child(6) {
    transform: translateX(9px) translateY(1px) rotate(45deg);
}

知識點介紹

本示例 CSS 主要使用了 transition 屬性，和 transform 屬性，它們實現了圖標的轉換動畫效果。這里介紹一下這兩個屬性。

CSS transition 屬性

transition 屬性用于在特定時間段內改變 CSS 屬性的值，例如寬度、高度、不透明度和變換。它是其他四個屬性的簡寫屬性。

句法

transition: transition-property transition-duration
transition-timing-function transition-delay

上述屬性的描述如下：

  • transition-property：它用于將過渡設置為任何 CSS 屬性，例如寬度、高度、不透明度、變換等等。
  • transition-duration：用于調整過渡的持續時間。
  • transition-timing-function：用于設置過渡的速度。
  • transition-delay：它指定轉換何時開始或延遲。

CSS transform 屬性

對于 HTML 元素的 2D 和 3D 轉換，使用了 CSS 的 transform 屬性。通過利用此屬性，可以修改元素的形狀和大小。它還允許元素旋轉、傾斜和縮放。

句法

transform: none|transform-functions

transform屬性的描述如下：

  • none：用于設置元素不變換。
  • transform-function：用于設置變換屬性的函數，如rotate()、skew()、translate()和scale()。此外， scale() 函數在水平和垂直方向上調整元素的大小。

總結

本文介紹了純CSS+svg實現三條橫線點擊變叉菜單按鈕動畫，這個菜單在移動網頁上很常用，喜歡的朋友可以收藏本頁，或者直接下載源碼備用。

您可能對以下文章也感興趣

相關文章

x