Backup Code
Transition:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>working with animations</title>
<style>
ul {
border:0px;
padding:0px;
margin:0px;
}
ul li {
list-style:none;
height:60px;
width:60px;
background:#999;
padding:10px;
margin:5px;
transition:0.5s;
}
ul li img {
width:60px;
height:60px;
}
ul li:hover {
padding-left:80px;
transition:0.5s;
}
div {
width:150px;
height:150px;
background:#F60;
margin-left:auto;
margin-right:auto;
border-radius:100px;
position:relative;
transition:0.5s;
}
div img {
width:70px;
height:50px;
position:absolute;
top:33%;
left:33%;
transition:0.5s;
}
div:hover {
transform:scale(2) translateY(-200px) skewX(45deg);
transition:0.5s;
}
div:hover img {
transform:rotate(720deg);
transition:0.5s;
}
article {
width:200px;
height:200px;
background:#36C;
margin:50px auto;
overflow:auto;
}
</style>
</head>
<body>
<ul>
<li><img src="file:///G|/images/social media icons/icons_01.gif"></li>
<li><img src="file:///G|/images/social media icons/icons_02.gif"></li>
<li><img src="file:///G|/images/social media icons/icons_06.gif"></li>
</ul>
<div>
<img src="file:///G|/images/social media icons/icons_02.gif">
</div>
<article>
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
The text editors are: -
Notepad
Wordpad
Edit plus
Notepad ++
Dreamweaver
Sublime etc…
</article>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>working with animations</title>
<style>
ul {
border:0px;
padding:0px;
margin:0px;
}
ul li {
list-style:none;
height:60px;
width:60px;
background:#999;
padding:10px;
margin:5px;
transition:0.5s;
}
ul li img {
width:60px;
height:60px;
}
ul li:hover {
padding-left:80px;
transition:0.5s;
}
div {
width:150px;
height:150px;
background:#F60;
margin-left:auto;
margin-right:auto;
border-radius:100px;
position:relative;
transition:0.5s;
}
div img {
width:70px;
height:50px;
position:absolute;
top:33%;
left:33%;
transition:0.5s;
}
div:hover {
transform:scale(2) translateY(-200px) skewX(45deg);
transition:0.5s;
}
div:hover img {
transform:rotate(720deg);
transition:0.5s;
}
article {
width:200px;
height:200px;
background:#36C;
margin:50px auto;
overflow:auto;
}
</style>
</head>
<body>
<ul>
<li><img src="file:///G|/images/social media icons/icons_01.gif"></li>
<li><img src="file:///G|/images/social media icons/icons_02.gif"></li>
<li><img src="file:///G|/images/social media icons/icons_06.gif"></li>
</ul>
<div>
<img src="file:///G|/images/social media icons/icons_02.gif">
</div>
<article>
Help of the html to develop web pages and websites
Web page means: - collection of the various information
Web site means: - collection the pages
Language: - collection of the programs
Program: - collection of the instructions / commands / orders
Markup means: - directions / existing commands / instructions
Hypertext: - Interlinks (to link one page to another page)
The html program to write by using any text editors
The text editors are: -
Notepad
Wordpad
Edit plus
Notepad ++
Dreamweaver
Sublime etc…
</article>
</body>
</html>
Key Frame animation: -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>exp for animation</title>
<style>
div {
width:200px;
height:200px;
background:#F90;
border-radius:200px;
position:absolute;
left:0px;
top:0px;
animation:myanimation 5s infinite alternate;
}
@keyframes myanimation{
0% {
left:0px;
}
25% {
left:250px;
top:500px;
width:50px;
height:50px;
background:#F0C;
}
50% {
left:500px;
top:0px;
width:200px;
height:200px;
background:#0C0;
}
75% {
left:750px;
top:500px;
width:50px;
height:50px;
background:#66F;
}
100% {
left:1000px;
top:0px;
width:200px;
height:200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Overflow: -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>exp. on transition and overflow</title>
<style>
*{
border:0px;
padding:0px;
margin:0px;
}
div, img {
width:500px;
height:320px;
position:relative;
overflow:hidden;
}
div p {
width:100%;
height:30px;
background:rgba(255,00,00,0.5);
color:#fff;
line-height:30px;
text-align:center;
position:absolute;
left:0px;
bottom:350px;
transition:1s;
}
div:hover p {
bottom:0px;
left:0px;
transition:1s;
}
</style>
</head>
<body>
<div>
<img src="images/10.jpg">
<p>Welcome to image Caption</p>
</div>
</body>
</html>
Comments
Post a Comment