<!doctype html>
<html>
<head>
<title>
transforms & animations
</title>
<style>
body{
padding: 5px;
margin: 0;
overflow: hidden;/*use hidden to hide scroll bar caused by power alert animation*/
}
*{
box-sizing: border-box;
}
.prototype{/*styles the container for both animation at the top and description at the bottom*/
float: left;
margin-right: 1em;
width:20%;
height: 22em;
box-shadow: 2px 2px 5px 0px gray;
font-family: sans-serif;
}
/*NOTE:use the class identifiers (one,two,three,..) to change main and dsc sections' styles*/
.main{/*main section default styles*/
width: 100%;
height: 40%;/*play with this height in order to fit main and description sections*/
}
.dsc{/*description of main content default styles*/
width: 100%;
background-color: #529eea;
color: white;
padding: 2px;
height:60%
}
.dsc h3{
text-transform: capitalize;
text-align: left;
font-family: sans-serif;
}
.flip-button{/*content of main inside prototype-1*/
width: 1.8em;
height: 1.8em;
border: 1px solid;
background:
linear-gradient(to bottom,black 0%,black 25%,white 25%,white 27%,black 27% ,black 50% ,white 50% ,white 52%,black 52%,black 75%,white 75% ,white 77%,black 77%);
background-repeat: no-repeat;
transform-origin: center;
transform: translate(2em,1em) rotate(0deg);
transition: transform 0.2s linear;
}
.flip-button:hover{
transform:translate(2em,1em) rotate(90deg);
}
.power-alert{
width: 20em;
height: 3em;
padding: 1em;
margin: 0;
border-right: 5px solid blue;
background-color: #d5d8dc;
position: absolute;
right: -50%;
text-align: center;
font-size: 25px;
font-weight: bolder;
text-transform: capitalize;
animation-name: pop;
animation-duration: 5s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction:alternate;
animation-timing-function: ease-in-out;
}
@keyframes pop{
20%,80%{
display: block;
animation-timing-function: ease-in-out;
right:0.5%;
}
100%{
right: -50%;
}
}
.cockies{
position: fixed;
bottom: -100%;
width: 98%;
right: 0.3%;
left: 0.3%;
opacity: 0.9;
margin: auto;
height: 3em;
background-color: black;
color: white;
text-transform: capitalize;
font-size: 20px;
text-align: center;
line-height: 3em;
animation-name: slide;
animation-duration: 10s;
animation-iteration-count: 1;
animation-delay: 1s;
animation-timing-function: linear;
}
/*slide effect for cockies pop-up window*/
@keyframes slide{
from{
bottom: -100%;
}
20%,70%{
bottom: 0.5%;
}
to{
bottom: -100%;
}
}
/*charging bar*/
.two{
height: 22em;
}
.two .dsc{
height: 40%;
}
.two .main{
height: 60%;
background-color: black;
}
.chg-mot-1a{
width: 10em;
height: 10em;
margin: 15px auto 0 auto;
border-radius: 100px;
border: 5px dotted transparent;
padding: 10px;
animation-name: flashing;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.chg-mot-1b{
width: 100%;
height: 100%;
border: 5px dotted transparent;
border-radius: 100px;
padding: 7px;
animation-name: flashing-b;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.chg-mot-1c{
width: 100%;
height: 100%;
border: 5px dotted transparent;
border-radius: 100px;
padding: 5px;
animation-name: flashing-c;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
font-family: sans-serif;
line-height: 4.5em;
text-align: center;
font-size: 19px;
font-weight: bold;
color: #43fa04;
}
@keyframes flashing{
0%{
border-color: white;
}
32%{
border-color: white;
}
33.3%{
border-color: transparent;
}
}
@keyframes flashing-b{
0%{
border-color: transparent;
}
32%{
border-color: transparent;
}
33%{
border-color: white;
}
65%{
border-color: white;
}
67%{
border-color: transparent;
}
}
@keyframes flashing-c{
0%{
border-color: transparent;
}
66%{
border-color: transparent;
}
67%{
border-color: white;
}
}
.status{
text-align: center;
text-transform: capitalize;
font-weight: bold;
font-size: 20px;
color: white;
font-family: sans-serif;
}
/*sony's PS4 foucs design */
.three .main{
height: 50%;
}
.three .dsc{
height: 50%;
}
.foucsing{
width: 75%;
height: 100px;
background-color: black;
transform: translate(40px,45px);
outline-width: 3px;
outline-style: solid;
outline-color: blue;
outline-offset: 0;
animation-name: bordere-grow;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes bordere-grow{
90%,0%{
outline-width: 3px;
outline-style: solid;
outline-color: blue;
outline-offset: 0;
}
95%{
outline-width: 6px;
outline-offset: 4px;
outline-color: transparent;
}
}
</style>
</head>
<body>
<div class="prototype one">
<div class="main">
<div class="flip-button"></div>
</div>
<div class="dsc">
<h3>rotated button and gradients</h3>
<p>the button was formed from gradients.black background along with three white lines colored with gradients.2D rotated.</p>
</div>
</div>
<div class="prototype two">
<div class="main">
<div class="status">charging..</div>
<div class="chg-mot-1a">
<div class="chg-mot-1b">
<div class="chg-mot-1c">100%</div>
</div>
</div>
</div>
<div class="dsc">
<h3>mobile charging indicator</h3>
<p>three elements with dotted borders are animated with some delay between each one.each with it's unique keyframe.</p>
</div>
</div>
<div class="prototype three">
<div class="main">
<div class="foucsing"></div>
</div>
<div class="dsc">
<h3>foucs indicator</h3>
<p>foucsing animated indicator inspired by sony PS4 menus desgin.the outline is changing it's offset position and color.then jumps back to the initial state right away.</p>
</div>
</div>
<div class="power-alert" dir="ltr">dualshock controler low battery!</div>
<div class="cockies">cockies !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! just hit okay and things will be more interisting</div>
</div>
</body>
</html>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.