mirror of
https://github.com/chinchang/web-maker.git
synced 2025-03-24 12:39:51 +01:00
add scroll animation on hero img;
This commit is contained in:
parent
317d803a18
commit
6ad63526c7
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -48,6 +48,7 @@
|
||||
|
||||
html {
|
||||
font-size: var(--base-font-size);
|
||||
scroll-timeline: --root-scroll block;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -60,6 +61,7 @@
|
||||
margin: 0;
|
||||
color: #3a3a3a;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
}
|
||||
body.docs {
|
||||
max-width: 70ch;
|
||||
@ -483,6 +485,20 @@
|
||||
.people-say-bottom .say {
|
||||
--shadow-y: -5px;
|
||||
}
|
||||
|
||||
@keyframes hero-img-progress {
|
||||
from {
|
||||
transform: rotateX(4deg) rotateY(-6deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotateX(-40deg) rotateY(100deg);
|
||||
}
|
||||
}
|
||||
.screenshot {
|
||||
animation: hero-img-progress auto linear;
|
||||
animation-timeline: --root-scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user