Template:PGPS Cell: Difference between revisions

From Books
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
[[{{{1}}}|o]]
 
        <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>
<a href="xxx">PU/CL</a>