pfych/experiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added linear gradient page

Browse Source
This commit is contained in:
pfych 2025-04-14 16:17:34 +10:00
parent 0dedb0ec6a
commit c6505cde26
2 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -12,3 +12,4 @@ Small micro-projects that fit into a single HTML file. Used to experiment and me
- [Swipeable scrolling](./src/scrolling.html) - [Swipeable scrolling](./src/scrolling.html)
- [88x31](./src/88x31.html) - [88x31](./src/88x31.html)
- [Spawning queues](./src/spawning.html) - Fireworks! - [Spawning queues](./src/spawning.html) - Fireworks!
- [Animated linear gradients](./src/linear-gradients.html)

58
src/linear-gradients.html Normal file
View File

@ -0,0 +1,58 @@
<html>
<head>
<title>Linear Gradients</title>
</head>
<body></body>
<style>
@property --colour1 {
syntax: "<color>";
inherits: false;
initial-value: #86a8e7;
}
@property --colour2 {
syntax: "<color>";
inherits: false;
initial-value: #91eae4;
}
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes tilt {
0% {
--angle: -45deg;
}
100% {
--angle: 45deg;
}
}
@keyframes shift {
0% {
--colour1: #86a8e7;
--colour2: #91eae4;
}
100% {
--colour1: #91eae4;
--colour2: #86a8e7;
}
}
html,
body {
height: 100vh;
padding: unset;
margin: unset;
}
body {
animation: tilt 10s infinite ease-in-out alternate, shift 5s infinite linear alternate;
background: linear-gradient(var(--angle), var(--colour1), var(--colour2));
}
</style>
</html>