亚洲水蜜桃久久综合网站,黑人大战欲求不满人妻,国产精品日韩欧美制服

技術(shù)頻道 - html技術(shù)

純CSS+svg實(shí)現(xiàn)三條橫線點(diǎn)擊變叉菜單按鈕動(dòng)畫

作者:admin 時(shí)間:2023-6-15 11:42:42 瀏覽:

本文介紹一款純CSS實(shí)現(xiàn)的三條橫線點(diǎn)擊變叉菜單動(dòng)畫。

效果圖

CSS三條橫線點(diǎn)擊變叉菜單動(dòng)畫

demo download

示例介紹

該菜單由純CSS實(shí)現(xiàn)。

該菜單為一款三條橫線菜單（漢堡菜單），點(diǎn)擊菜單后三條橫線變成一個(gè)叉（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標(biāo)簽畫布畫成。

div是菜單容器，div有一個(gè)onclick事件，它觸發(fā)三橫線變叉的轉(zhuǎn)換動(dòng)畫。

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);
}

知識(shí)點(diǎn)介紹

本示例 CSS 主要使用了 transition 屬性，和 transform 屬性，它們實(shí)現(xiàn)了圖標(biāo)的轉(zhuǎn)換動(dòng)畫效果。這里介紹一下這兩個(gè)屬性。

CSS transition 屬性

transition 屬性用于在特定時(shí)間段內(nèi)改變 CSS 屬性的值，例如寬度、高度、不透明度和變換。它是其他四個(gè)屬性的簡(jiǎn)寫屬性。

句法

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

上述屬性的描述如下：

transition-property：它用于將過渡設(shè)置為任何 CSS 屬性，例如寬度、高度、不透明度、變換等等。
transition-duration：用于調(diào)整過渡的持續(xù)時(shí)間。
transition-timing-function：用于設(shè)置過渡的速度。
transition-delay：它指定轉(zhuǎn)換何時(shí)開始或延遲。

CSS transform 屬性

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

句法

transform: none|transform-functions

transform屬性的描述如下：

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

總結(jié)

本文介紹了純CSS+svg實(shí)現(xiàn)三條橫線點(diǎn)擊變叉菜單按鈕動(dòng)畫，這個(gè)菜單在移動(dòng)網(wǎng)頁(yè)上很常用，喜歡的朋友可以收藏本頁(yè)，或者直接下載源碼備用。

您可能對(duì)以下文章也感興趣