8,960
edits
No edit summary |
No edit summary |
||
| Line 10: | Line 10: | ||
li.circle::before, | li.circle::before, | ||
li.circle::after { | li.circle::after, | ||
li.circle div { | |||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| Line 16: | Line 17: | ||
height: 50%; | height: 50%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
transition: background-color 0.3s ease; | |||
} | } | ||
| Line 33: | Line 35: | ||
li.circle div.top-right { | li.circle div.top-right { | ||
background-color: #3CB371; /* Третий цвет */ | background-color: #3CB371; /* Третий цвет */ | ||
bottom: 0; | bottom: 0; | ||
right: 0; | right: 0; | ||
| Line 43: | Line 42: | ||
li.circle div.bottom-left { | li.circle div.bottom-left { | ||
background-color: #FFD700; /* Четвертый цвет */ | background-color: #FFD700; /* Четвертый цвет */ | ||
bottom: 0; | bottom: 0; | ||
left: 0; | left: 0; | ||
border-bottom-left-radius: 50%; | border-bottom-left-radius: 50%; | ||
} | } | ||
/* Эффекты при наведении */ | |||
li.circle::before:hover { | |||
background-color: #FF7F50; /* Первый цвет - немного ярче */ | |||
} | |||
li.circle::after:hover { | |||
background-color: #5A9BD3; /* Второй цвет - немного ярче */ | |||
} | |||
li.circle div.top-right:hover { | |||
background-color: #4FD39E; /* Третий цвет - немного ярче */ | |||
} | |||
li.circle div.bottom-left:hover { | |||
background-color: #FFEB3B; /* Четвертый цвет - немного ярче */ | |||
} | |||