 | Bài viết này sẽ hướng tạo mộ hiệu loading cho trang web với hiệu ứng bóng chớp chớp phía sau bằng CSS Animations. |
CSS Animations Loading Effect Shadows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - CSS Animations</title>
<style type='text/css'>
body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
#loader {
background: #ddd;
color: #333;
border-radius: 4px;
padding: 4px;
display: inline-block;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
-moz-animation-name: glow;
-moz-animation-duration: .8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-direction: alternate;
-webkit-animation-name: glow;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
@-moz-keyframes glow {
from { box-shadow: 0 0 5px #333; }
to { box-shadow: 0 0 10px #046; }
}
@-webkit-keyframes glow {
from { -webkit-box-shadow: 0 0 5px #333; }
to { -webkit-box-shadow: 0 0 10px #046; }
}
</style>
</script>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>VNLIVES.NET - CSS Animations</title>
<style type='text/css'>
body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
#loader {
background: #ddd;
color: #333;
border-radius: 4px;
padding: 4px;
display: inline-block;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
-moz-animation-name: glow;
-moz-animation-duration: .8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-direction: alternate;
-webkit-animation-name: glow;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
@-moz-keyframes glow {
from { box-shadow: 0 0 5px #333; }
to { box-shadow: 0 0 10px #046; }
}
@-webkit-keyframes glow {
from { -webkit-box-shadow: 0 0 5px #333; }
to { -webkit-box-shadow: 0 0 10px #046; }
}
</style>
</script>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
No comments:
Post a Comment