Template:PGPS Cell: Difference between revisions
Jump to navigation
Jump to search
Wikiadmin1 (talk | contribs) No edit summary |
Wikiadmin1 (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
<style> | |||
div.pg-psoa-cell{ | |||
position: relative; | |||
width: 100px; | |||
height: 50px; | |||
border: 0px solid black; | |||
background-color: #d2d1d4; | |||
} | |||
div.pg-psoa-action-chaser { | |||
width: 100%; | |||
height: 10%; | |||
border: 0; | |||
overflow: hidden; | |||
} | |||
div.pg-psoa-action-animation { | |||
position: absolute; | |||
height: 100%; | |||
width: 100%; | |||
border: 0; | |||
background: linear-gradient(to right, #d2d1d4, rgb(12, 1, 1)); | |||
animation: pg-chaser-horizontal 2s linear infinite; | |||
} | |||
@keyframes pg-chaser-horizontal{ | |||
0%{ | |||
transform: translateX(-100%); | |||
} | |||
100%{ | |||
transform: translateX(0%); | |||
} | |||
} | |||
</style> | |||
<div style="overflow: hidden; resize:both; border:solid; background-color: white; width: 1000px; height: 450px;" > | |||
<div class="pg-psoa-cell"><span style="position:absolute; width: 100%; height: 100%; text-align: center; padding: 15px 0; "><a href="xxx">PU/CL</a></span> | |||
<div class="pg-psoa-action-chaser; visibility: hidden;" style="rotate: 0deg;" > | |||
<div class="pg-psoa-action-animation" style="left: 100%;" ></div> | |||
<div class="pg-psoa-action-animation" style="left: 5%; "></div> | |||
</div> | |||
<div class="pg-psoa-action-chaser" style="position: absolute; rotate: 180deg; bottom: 0;" > | |||
<div class="pg-psoa-action-animation" style="left: 100%;" ></div> | |||
<div class="pg-psoa-action-animation" style="left: 5%; "></div> | |||
</div> | |||
<div class="pg-psoa-action-chaser" style="width:45px; position: absolute; rotate: 90deg; transform-origin: bottom right; right: 5%; top: 90%;" > | |||
<div class="pg-psoa-action-animation" style="left: 100%;" ></div> | |||
<div class="pg-psoa-action-animation" style="left: 0%; "></div> | |||
</div> | |||
<div class="pg-psoa-action-chaser" style="width:45px; position: absolute; rotate: 270deg; transform-origin: bottom left; left: 5%; top: 80%;" > | |||
<div class="pg-psoa-action-animation" style="left: 100%;" ></div> | |||
<div class="pg-psoa-action-animation" style="left: 0%; "></div> | |||
</div> | |||
</div> | |||
</div> | |||
Revision as of 18:42, 14 February 2023
<style>
div.pg-psoa-cell{
position: relative;
width: 100px;
height: 50px;
border: 0px solid black;
background-color: #d2d1d4;
}
div.pg-psoa-action-chaser {
width: 100%;
height: 10%;
border: 0;
overflow: hidden;
}
div.pg-psoa-action-animation {
position: absolute;
height: 100%;
width: 100%;
border: 0;
background: linear-gradient(to right, #d2d1d4, rgb(12, 1, 1));
animation: pg-chaser-horizontal 2s linear infinite;
}
@keyframes pg-chaser-horizontal{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
</style>