时间戳

首页 > 解决方案 > 按下按钮动画

html - 按下按钮动画

问题描述

我想用 CSS 制作动画。我希望当我按下“工作”按钮时，黑色站点会过渡到底部。但是当我单击按钮时，什么也没有发生。可能我在 CSS 的最后一个参数中做错了，但我不知道是什么。

我已经尝试过使用 transform: translateY(-50vh); 在最后一个论点。感谢所有的答案。

body{
margin: 0 0 0 0;
font-family: 'Segoe UI';
background-color: turquoise;
text-align: center;
overflow: hidden;
}
.Home {
    transform: translateY(50vh);
}
.Work {
    color: #fff;
    background-color: transparent;
    border: 0;
    font-size: 150%;
    flex-direction: row;
    display: flex;
    align-self: center;
    align-content: center;
    z-index: 3;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    width: 100vw;
    height: 5vh;
    transform: translateY(-50vh);
}

.Workpg {
    color: white;
    height: 110vh;
    width: 110vw;
    top: -150vh;
    position: fixed;
    z-index: 4;
    background-color: rgb(0, 0, 0);
}
.Work:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.Work:active .Workpg {
    top: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Home">
    <button class="Work" type="button">Work</button>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem harum voluptatibus nulla dolore sed, quisquam dignissimos hic deserunt corrupti fugit doloremque repellat, doloribus, animi maxime eum distinctio reprehenderit fuga. Facere.
</div>


    <div class="Workpg">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident maiores dolore velit non soluta laborum beatae nulla ex veritatis sint autem fugit nisi facilis minima reiciendis ipsa, perspiciatis quibusdam nostrum!
    </div>
</body>
</html>

标签： htmlcssanimationcss-transitions

解决方案

CSS 动画非常适合诸如“悬停”之类的东西以及这里或那里的一些装饰。

你也可以把一些东西拼凑在一起，感觉就像与复选框和东西交互，

但是 - 当您需要真正的“点击”事件和功能时 - 这就是 JavaScript 的用途。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

console.clear();

var toggleBody = document.querySelector('.toggle-body');

toggleBody.addEventListener('click', function() {
    document.body.classList.toggle('toggled');
});
body {
    background-color: yellow;
    transition: 1s;
}

body button {
    transition: 2s;
}

body.toggled {
    background-color: orange;
}

body.toggled button {
    transform: translate(20px, 20px);
}
<button class='toggle-body'>Toggle body color</button>

https://codepen.io/sheriffderek/pen/0e0f8227242c5481fbb978fa83a5859c

推荐阅读