<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body style="background-color:#8EE5EE;">
<div id="box">
<video src="videos/34.mp4" width="640" height="360" poster="images/myface.png"
autoplay loop controls > </video>
</div>
</body>
</html>
Animation and Transition
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="new.css">
</head>
<body>
<div id="box">
<p id="text">omgwtfbbq</p>
</div>
</body>
</html>
New.css:
body{
text-align: center;
}
#box{
display: block;
width: 500px;
margin: 150px auto;
padding: 15px;
text-align: center;
border: 7px solid blue;
background: yellow;
-webkit-transition: -webkit-transform 1s;
}
#box:hover{
-webkit-transform:rotate(45deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="new.css">
</head>
<body>
<div id="box">
<p id="text">omgwtfbbq</p>
</div>
</body>
</html>
New.css:
#box {
-webkit-border-radius: 10px;
-webkit-transition-property: background-color, width, opacity, height, -webkit-transform;
-webkit-transition-duration: 1s, 1s, 1s, 1s, 1s;
-webkit-transition-timing-function: linear, ease-in, ease-in, ease-in, ease-in;
}
#box:hover {
opacity: 1.0;
background: orange;
width: 200px;
height: 120px;
-webkit-transform: rotate(360deg);
}
Thanks for the post
ReplyDeleteBest Network Security and Information Security Training Insitute
Fortinet Training
Checkpoint Training
F5 Training
Juniper Training
PaloAlto Training
Sophos Training
Cyberoam Training
ArcSight Training
Sonicwall Training