-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (86 loc) · 3.57 KB
/
index.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
<style>
.block1 {
margin 50px auto;
background: blue;
width: 200px;
height: 200px;
}
.block1:hover, .rollover {
transform: rotate(630deg);
background: yellow;
border-radius: 50%;
width: 100px;
height: 100px;
}
.rotate { transition: all 2.0s ease-in-out; }
.rotate:hover { transition: all 2.5s ease-in-out; }
#transitionDiv {
border: 1px solid black;
background-color: lightblue;
width: 200px;
height: 100px;
border-radius: 5px;
text-align: left;
vertical-align: top;
overflow: auto;
}
#transitionDiv:hover {
background-color: yellow;
width: 300px;
height: 150px;
text-align: center;
vertical-align: middle;
padding: 100px;
border-radius: 0px;
}
/* -- This is the CSS for the form with fields that grow when they have focus -- */
#form {
width: 350px;
height: 200px;
border-radius: 0%;
text-align: center;
line-height: 94px; /* to vertically center */
font-size: 20px;
margin: auto; /* to center boxes */
background: SteelBlue;
color: white;
}
#field {
width: 100px;
transition: all 1.5s linear 0.3s;
}
#field:focus {
background: Aqua;
width: 200px;
}
</style>
</head>
<body>
<h3>Hover to automatically trigger the rotations</h3>
<p><button onclick="useJS('JSAndCSS')">Trigger Rotation</button> Transformation with JavaScript. Click again to undo. The code just adds a class to the div to rotate the div. A second click removes class and the transform reverses.</p>
<div id='JSAndCSS' class="block1 rotate">Hover over me</div>
<hr>
<h3>Hover over me and I change immediately.</h3>
<p><button onclick="addTransitionTime()">Inject Transition time</button> Click again to remove the transition time.</p>
<p><button onclick="useJS('transitionDiv')">Trigger Rotation</button> Transformation with JavaScript.</p>
<div id="transitionDiv">
<h4>Go CSS!!</h4>
</div>
<hr>
<h3>Try out different styles using JavaScript</h3>
<button onclick="flipStyle()">Rotate through some styles!</button>
<p id="newDiv">Now, let's add a new style element and attach it to this paragraph!</p>
<hr>
<h3>Form fields that grow and get your attention</h3>
<form id="form">
First name: <input id="field" type="text" name="firstname"><br>
Last name: <input id="field" type="text" name="lastname">
</form>
</body>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('5 k=0;5 9=2;h w(t){5 x=4.g(t);r(x.d.F(\'e\'))x.d.B("e");A x.d.D("e")}h E(){4.g("G").b.z="H "+9+"s";9=(9==2)?0:2}h y(b){5 a=4.g(\'7\');r(a!=v)a.C.J(a);5 7=4.S("R");7.U=\'7\';5 s;5 i=p.V(p.W()*I)+T;Q(k%3){f 0:s=4.o("#n {j-6: L; 6: M; 8-l: "+i+"q; 8-b: O;}");m;f 1:s=4.o("#n {j-6: N; 6: P; 8-l: "+i+"q;}");m;f 2:s=4.o("#n {j-6: c; 6: c; 8-l: c; 8-b: c;}");m}k++;7.u(s);4.K.u(7)}',59,59,'||||document|var|color|newStyle|font|transitionTime|oldStyle|style|initial|classList|rollover|case|getElementById|function|fontSize|background|styleIndex|size|break|newDiv|createTextNode|Math|px|if||elementId|appendChild|undefined|useJS||flipStyle|transition|else|remove|parentNode|add|addTransitionTime|contains|transitionDiv|all|20|removeChild|head|red|white|blue|italic|yellow|switch|STYLE|createElement|10|id|floor|random'.split('|'),0,{}))
</script>
</html>