JavaScript-如何制作这样的动画？-堆栈溢出

顺晟科技

2022-10-18 12:47:17

250

我想做这样的东西，就像我写的代码一样，但问题是当动画回到它的原始位置时，链接留在那里但不可见，我想让它们留在display: none：（

当我总是试图让这些链接停留在display: none中时，动画看起来不想工作..

HTML

<代码><；身体>；<；导航（>；）<；DIV类="；汉堡"；>；<；span类="；汉堡_棒棒1"；>；<；/span>；<；span类="；汉堡_棒棒2"；>；<；/span>；<；span类="；汉堡_棒棒3"；>；<；/span>；<；/DIV>；<；UL类="；NAV_列表_容器<；A类="；导航_列表_链接Link1"；href="；"；>；服务<；/a>；<；A类="；导航_列表_链接Link2"；href="；"；>；联系人<；/a>；<；/UL>；<；/导航>；<；页眉>；<；细分（>；）<；H1>；埃利安娜·莫拉<；/H1>；<；H2>；Enfermera专业入学考试<；/H2>；<；P>；Más de 10 años apoyando y sanando pacientes en la Ciudad de Santa Fe.<；/p>；<；P>；Y Hoy，¿cómo te Sentís？¿en quéte puedo ayudar？<；/p>；<；a href="；"；>；利尔MAS<；/A>；<；/DIV>；<；细分（>；）<；IMG SRC="；"；alt="；"；>；<；/DIV>；<；/页眉>；

CSS

<body>
<nav>
    <div class="hamburger">
        <span class="hamburger_stick stick1"></span>
        <span class="hamburger_stick stick2"></span>
        <span class="hamburger_stick stick3"></span>
    </div>
    <ul class="nav_list_container">
        <a class="nav_list_link link1" href="">Servicios</a>
        <a class="nav_list_link link2" href="">Contacto</a>
    </ul>
</nav>

<header>
    <div>
        <h1>Eliana Moura</h1>
        <h2>Enfermera Profesional Matriculada</h2>
        <p>Más de 10 años apoyando y sanando pacientes en la Ciudad de Santa Fe.</p>
        <p>Y hoy, ¿cómo te sentís? ¿En qué te puedo ayudar?</p>
        <a href="">Leer más</a>
    </div>
    <div>
        <img src="" alt="">
    </div>
</header>

@import "standar";

$color1: #dcf1fb;
$color2: #f8b14c;
$color3: #777887;
$color4: #384e5e;
$typo: 'Ubuntu', sans-serif;

* {
    font-family: $typo;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: $color1;
}

header {
    background-color: $color1;
}

nav {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

nav .nav_list_container {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

nav .nav_list_container .nav_list_link {
    margin: 10px 5px;
    padding: 10px 8px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0;
    transform: translateX(20px);
    transition: all .2s ease-in-out;
}

.hamburger {
    width: 40px;
    height: 30px;
    line-height: 5px;
    padding: 15px 20px;
}

.hamburger .hamburger_stick {
    display: inline-block;
    width: 100%;
    height: 3px;
    margin: auto;
    background-color: #000000;
    transition: all .2s ease-in-out;
}

.selected {
    transform: rotate(-45deg) translate(-3px, 8px);
}

.selected2 {
    transform: translateX(20px); opacity: 0;
}

.selected3 {
    transform: rotate(45deg) translate(-3px, -8px);
}

.selected4 {
    opacity: 1 !important;
    display: initial !important;
    transform: translateX(0) !important;
}

顺晟科技：

上一篇：如何以正确的格式在HTML中显示T- 下一篇：HTML-除了手机上的小空间外，绝对

网站建设

Html

JavaScript-如何制作这样的动画？-堆栈溢出