HTML-CSS--Basic-Project/add.css at main · abhishekmhasal/HTML-CSS--Basic-Project · GitHub

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
*{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;

}

html,body{
  height: 100%;
  width: 100%;

}
html{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
}
@property --rotate{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

@keyframes animate{
   from{
    --rotate:0deg;
   }

   to{
    --rotate:360deg;
   }
}
.box{
  max-width: 300px;
  padding-inline:10px;
  padding-bottom: 10px;
  border-radius: 15px;
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  /* box-shadow: 0px 0px 60px rgb(187, 18, 170); */
  background:linear-gradient(rgb(5, 0, 0))padding-box,
  conic-gradient(from var(--rotate),rgb(6, 0, 0),rgb(246, 3, 250),black) border-box;
  border: 0px solid rgb(255,255,255,0);
  animation: animate 10s infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
  box-shadow: 0 0 0px  rgb(246, 3, 250);
  color: white;
  transition: all 0.2s linear;
  text-shadow:  0 0 0px rgb(246, 3, 250);
}

.box:hover{
  animation-play-state: running;
  box-shadow: 0  0 60px rgb(246, 3, 250);
  border-width: 5px ;
  color: rgb(246, 3, 250);
  text-shadow:  0 0 40px rgb(246, 3, 250);

}

.box img{

  width: 100%;

}

 /* h1{
  text-shadow: 5px 5px 5px rgb(230, 10, 10);
 } */