html - Animation by pressing a button

Question

Welcome To Ask or Share your Answers For Others

html - Animation by pressing a button

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Animation by pressing a button

I want to make animations with CSS. I want that when I press the button "work" a black site transitions to the bottom. But when I click the button nothing happens. Probably I did something wrong in the last argument of the CSS but I don't know what.

I already tried to use transform: translateY(-50vh); in the last argument. Thanks for all answers.

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>

question from:https://stackoverflow.com/questions/65557535/animation-by-pressing-a-button

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T18:50:44+0000

CSS animations are great for stuff like 'hover' and a little embellishment here or there.

You can also kinda hack some stuff together that feels like interaction with check boxes and things,

but - when you need real 'click' events and functionality - that's what JavaScript is for.

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>

Categories

html - Animation by pressing a button

html - Animation by pressing a button

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags