Monday, December 17, 2018

AWESOME TRANSITION EFFECT USING HTML CSS

Cloud Tech December 17, 2018 COMPUTER, WEB DESIGN

Awesome Transition Effect Using HTML CSS

Also read :3D IMAGE SLIDE SHOW USING HTML CSS

Also read :CREATE A USER FEEDBACK FORM USING HTML CSS

<!DOCTYPE html>
<html>
<head>
<title>Transition Effect</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header" class="blink">
This is a Awesome Transition Effect</div>
<div id="wraper">
<div class="box effect1">
<img src="b1.jpg" width="200px" height="200px">
<div class="text blink">
1<sup>st</sup>  Effect</div>
</div>
<div class="box effect2">
<img src="b2.jpg" width="200px" height="200px">
<div class="text blink">
2<sup>nd</sup>  Effect</div>
</div>
<div class="box effect3">
<img src="b3.jpg" width="200px" height="200px">
<div class="text blink">
3<sup>rd</sup>  Effect</div>
</div>
<div class="box effect4">
<img src="b4.jpg" width="200px" height="200px">
<div class="text blink">
4<sup>th</sup>  Effect</div>
</div>
<div class="box effect5">
<img src="b5.jpg" width="200px" height="200px">
<div class="text blink">
5<sup>th</sup>  Effect</div>
</div>
<div class="box effect6">
<img src="b6.jpg" width="200px" height="200px">
<div class="text">
6<sup>th</sup>  Effect</div>
</div>
</div>
<div class="blink mil">
<marquee behavior="scroll" direction="left">let's start</marquee></div>
<div class="blink mil">
<marquee behavior="scroll" direction="up">let's start</marquee></div>
</body>
</html>

Also read :AWESOME TRANSITION EFFECT USING HTML CSS

Also read :CREATE A SIMPLE WEB-PAGE USING HTML CSS

*{
 padding: 0px;
 margin: 0px;
}
body{
 background: #f6f6f6;
 background: linear-gradient(to bottom, #f5f6f6 0%, #c4c4c4 100%) fixed;
 border-top: 3px solid slateblue;
}
#wraper{
 width: 100%;
 display: -webkit-box ;
 -webkit-box-pack: center;
 -webkit-box-orient: horizontal;
 margin-top: 60px; 
}

#header{
 font-family: Serif;
 font-family: Sans-Serif;
 font-weight: 900;
 text-align: center;
 margin-top: 70px;
 color: #069;
 text-shadow: rgba(0,0,0,0.5) 3px 2px 4px;
 font-size: 50px;
}

.blink{
animation: colorchange 2.5s infinite;
}
@keyframes colorchange{
0%{color: green;}
25%{color: red;}
50%{color: yellow;}
75%{color: blue;}
100%{color: #bf55ec;}
}
.blink{
animation: colorchange 4s infinite;
}

.text{
 text-align: center;
 font-size: 18px;
 color: slateblue;
}
.box{
 position: relative;
 height: 200px;
 width: 200px;
 margin-right: 7px;
 border-radius: 100px;
 border: 5px solid yellow;
 overflow: hidden;
 box-shadow: rgba(0,0,0,0.5) 10px 10px 20px;
}
div .box img{
 border-radius: 100px;
}
div .box div{
 width: 200px;
 height: 105px;
 background: #000;
 text-align: center;
 border-radius: 100px;
 padding: 95px 0 0 0 ;
 color: white;
}
div .effect1 div{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity 700ms;
 color: white;
}
div .effect1 div:hover{
 opacity: 0.8;

}

div .effect2 img{
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.9;
 transition: margin-left 800ms;
 color: white;
}
div .effect2:hover img{
 margin-left: 200px;
}

div .effect3 div{
 position: absolute;
 opacity: 0.8;
 top: 0;
 left: 0;
 margin-left: -200px;
 transition: margin-left 800ms;
 color: white;
}
div .effect3:hover div{
 margin-left: 0;
}
div .effect4 img{
 position: absolute;
 top: 0;
 left: 0;
}

div .effect4 div{
 opacity: 0.8;
 margin-left: -0px;
 transform: scale(0);
 transition-duration: 500ms;
 color: white;
}

div .effect4:hover div{
 transform: scale(1);
}

div .effect5 img{
 position: absolute;
 top: 0;
 left: 0;
 transform: scale(1);
 transition-duration: 500ms;
 color: white;
}

div .effect5:hover img{
 transform: scale(0);
}

div .effect6 img{
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 transition-duration: 1200ms;
}

div .effect6:hover img{
 box-shadow: none;
 transform: rotate(-360deg);
}