-
Notifications
You must be signed in to change notification settings - Fork 0
/
Anim_impossible.html
60 lines (55 loc) · 1.21 KB
/
Anim_impossible.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
<html>
<head>
<!-- <link href="main.css" type="text/css" rel="stylesheet"> -->
<style>
.asd {
background-color: black;
}
.svg-wrap {
width: 300px;
height: 70px;
margin: auto;
margin-top: 200px;
}
.box {
stroke-dasharray: 45 800;
stroke-dashoffset: -670;
stroke: #ff0000;
stroke-width: 7px;
transition: all ease-in-out 1.5s;
}
.text {
position: relative;
color: white;
top: -80px;
left: 58px;
letter-spacing: 5px;
}
.text-hover {
transition: all ease-in-out1.5s;
}
.svg-wrap:hover .box {
stroke-dashoffset: 0;
stroke-dasharray: 1000;
stroke-width: 7px;
stroke: #00faac;
}
.svg-wrap:hover .text-hover {
margin-left: 15px;
}
</style>
</head>
<body class="asd">
<div>
<div class="svg-wrap">
<svg width="350" height="70">
<rect class="box" width="350" height="70" />
<h1 class="text">
im
<span class="text-hover">possible.</span>
</h1>
</svg>
</div>
</div>
</body>
</html>