|
|
| Line 1: |
Line 1: |
| .ring2 {
| |
| width: 50px;
| |
| height: 50px;
| |
| border-radius: 50%;
| |
| position: absolute;
| |
| top: 0; left: 0;
| |
| opacity: 0;
| |
| transform: scale(0.95);
| |
| transition:
| |
| opacity 0.6s cubic-bezier(.42,0,.59,1.03),
| |
| transform 0.7s cubic-bezier(.44,1.55,.72,1.1);
| |
| animation: ringPopIn 1.1s cubic-bezier(.36,1.46,.51,1) forwards;
| |
| }
| |
|
| |
|
| @keyframes ringPopIn {
| |
| 0% { opacity: 0; transform: scale(0.90) rotate(-12deg);}
| |
| 40% { opacity: 0.7; transform: scale(1.06) rotate(3deg);}
| |
| 85% { opacity: 1; transform: scale(1.01) rotate(0deg);}
| |
| 100% { opacity: 1; transform: scale(1.00) rotate(0deg);}
| |
| }
| |
| .center2 {
| |
| width: 28px;
| |
| height: 28px;
| |
| background: #f8fafb;
| |
| border-radius: 50%;
| |
| position: absolute;
| |
| top: 11px;
| |
| left: 11px;
| |
| z-index: 1;
| |
| box-shadow: 0 0 7px 1px #eaeaea inset;
| |
| opacity: 0;
| |
| transform: scale(0.85);
| |
| animation: centerAppear 0.9s 0.28s cubic-bezier(.36,1.46,.51,1) forwards;
| |
| }
| |
| @keyframes centerAppear {
| |
| 0% { opacity: 0; transform: scale(0.85);}
| |
| 70% { opacity: 1; transform: scale(1.05);}
| |
| 100% { opacity: 1; transform: scale(1);}
| |
| }
| |
|
| |
|
|
| |
|