- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 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
@keyframes shadow{
from {
-webkit-box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
-webkit-box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
-webkit-box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
.......
-webkit-box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
}
to{
-webkit-box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 1px 10px rgba(168,207,255,40);
.......
-webkit-box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 53px 10px rgba(168,207,255,40);
-webkit-box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 54px 10px rgba(168,207,255,40);
-webkit-box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
-moz-box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
box-shadow: 0px 0px 55px 10px rgba(168,207,255,40);
}
}
#progressShadow{
height:25px;
margin:-28px 0 0 30px;
border-radius: 10px;
position: absolute;
-webkit-animation: shadow 1s linear infinite;
-moz-animation: shadow 1s linear infinite;
animation: shadow 1s linear infinite;
}
Чувак хотел создать эффект пульсацию с CSS и расчет сделал от 55px до 1px и от 1px до 55px )))