-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathTransition&Shadows.html
110 lines (104 loc) · 2.17 KB
/
Transition&Shadows.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
103
104
105
106
107
108
109
110
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.main1{
background: url(image1.jpg) no-repeat;
width:50%;
height:250px;
margin:50px auto;
border:5px #000000 solid;
background-repeat:none;
}
.main1:hover{
width:10%;
height:125px;
border-radius:50%;
background-size:100% 100%;
border:#0F0 solid 4px;
transition:all ease-out 4s;
}
.main1:not(:hover){
width:50%;
height:250px;
transition:all ease-out 4s;
}
.main2{
background:#00F;
color:#0FF;
border:#000 solid 4px;
width:30%;
outline:none;
height:50px;
font-size:36px;
cursor:pointer;
transition:all ease-out 3s;
}
.main2:hover{
border:#639 solid 4px;
color:#FF0;
background:#F00;
}
.main2:active{
border-radius:30px 0px 30px 0px;
box-shadow:inset 2px 2px 35px #000000;
}
.main3{
background:#F0F;
color:#609;
border:#000 solid 4px;
font-size:36px;
width:30%;
height:50px;
outline:none;
cursor:pointer;
margin:50px auto;
transition:all
ease-out 5s;
}
.main3:hover{
border:#639 solid 4px;
background:#FF0;
color:#000;
transition:all ease-out 3s;
border-radius:50px 30px / 15% 10%;
}
.main3:active{
background:#F00;
}
.main4{
background:#0F0;
color:#009;
border:#000 solid 4px;
font-size:36px;
width:30%;
height:50px;
outline:none;
cursor:pointer;
}
.main4:hover{
border:#C00 solid 4px;
background:#F39;
color:#00F;
transition:all ease-in 2s;
text-shadow:5px 2px 8px #000000;
box-shadow:8px 8px 25px #000000;
}
</style>
</head>
<body>
<div class="main">
<div class="main1">
</div>
</div>
<input type="button" value="Click Me" class="main2" />
<p>
<input type="button" value="Press Me" class="main3" />
</p>
<p>
<input type="button" value="Click Here" class="main4" />
</p>
</body>
</html>