doctype html html head script setInterval start 5000 function start do

  • Anonymous
  • NA
  • 31 Mar 2015 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>



<html>

	<head>

		<script>

			setInterval(start, 5000);

			function start() {

				document.getElementById("rightBorder").className = "border right";

				document.getElementById("bottomBorder").className = "border bottom";

			}

		</script>

		<style>

			.border {

				position: absolute;

				display: block;

				left: 10px;

				right: 10px;

				top: 10px;

				bottom: 10px;

				background: orange;

			}



			.left {

				right: auto;

				width: 4px;

				-webkit-animation: verticalMover 5s linear;

			}



			.right {

				left: auto;

				width: 4px;

				-webkit-animation: verticalMover 5s linear;

			}



			.top {

				bottom: auto;

				height: 4px;

				-webkit-animation: horizontalMover 5s linear;

			}



			.bottom {

				top: auto;

				height: 4px;

				-webkit-animation: horizontalMover 5s linear;

			}



			.none {

				display: none;

			}



			@-webkit-keyframes verticalMover {

				from {

					bottom: 100%;

				}

				to {

					bottom: 10px;

				}

			}



			@-webkit-keyframes horizontalMover {

				from {

					right: 100%;

				}

				to {

					right: 10px;

				}

			}

		</style>

	</head>

	<body>

	<div class="border left" id="leftBorder"></div>

	<div class="border none" id="rightBorder"></div>

	<div class="border top" id="topBorder"></div>

	<div class="border none" id="bottomBorder"></div>

		Hello, world!

	</body>

</html>
← newer dump
older dump →