BinaryNinja/tvapp2
4
1
Fork 0
mirror of https://github.com/TheBinaryNinja/tvapp2.git synced 2026-06-06 16:45:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: add heartbeat animation to header health icon

Browse Source
This commit is contained in:
Aetherx
2025-04-10 02:56:39 -07:00
parent e4436ad7b7
commit f55ecae8f3
2 changed files with 104 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
tvapp2/www/css/tvapp2.min.css vendored
View File

@@ -239,6 +239,12 @@ p
padding-left: 7px;
}
.header .health
{
color: #ff7575;
text-decoration: none;
}
#breadcrumbs::before
{
margin-top: 4px;
@@ -620,6 +626,82 @@ code
position: relative;
}
@keyframes heartbeat
{
0%
{
transform: scale( .75);
}
20%
{
transform: scale( 1);
}
40%
{
transform: scale( .75);
}
60%
{
transform: scale( 1);
}
80%
{
transform: scale( .75);
}
100%
{
transform: scale( .75);
}
}
#heart
{
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
}
#heart:before,
#heart:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after
{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;