Как добавить многоцветную строку в стиле Google One к круглому изображению?

#css #html5 #svg #css_animation #svg_animation

Я создаю веб-сайт для клуба Google DSC в моем университете, и я хотел бы добавить
границу стиля Google One style border к круговым изображениям портфолио на сайте. 

Мне интересует, как сделать это с помощью CSS, но также подойдут предварительно отрисованные
решения в Photoshop или Illustrator.   

Я попытался изменить код, приведенный в этом ответе, но не смог добиться идеального
эффекта.



.test {
  margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, #ea4335 36%, #4285f4 30%),
                    linear-gradient(120deg, #4285f4 36%, #34a853 30%),
                    linear-gradient(300deg, #fbbc04 36%, #ea4335 30%),
                    linear-gradient(210deg, #34a853 36%, #fbbc04 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(90deg);
}





Как видите, цвета границ выровнены неправильно.

Есть ли способ сделать это, используя более простой метод?
    

Ответы

Ответ 1

Предлагаю решение без особых вычислений:








Или так:






Ответ 2

Вариант SVG

Для более глубокого изучения и понимания этого ответа можно почитать топик на нашем
сайте: 

Помогите с dasharray и dashoffset

Для создания разноцветных секторов окружности используем атрибут stroke-dasharray  

Расчет длин черточек и пробелов:   


Для радиуса R=100px длина окружности =2 * 3.1415 * 100 = 628.3
px`
Чтобы получить черту равной одной четвертой окружности  расcчитаем
атрибуты stroke-dasharray:  628.3 / 4 = 157.075
Пробел    составит 3 / 4 длины окружности = 471px


Итого параметы атрибута будут равны   stroke-dasharray="157 471"   

Но так как длина синего , красного и зеленого секторов немного больше четверти окружности,
то добавляем эту разницу.   stroke-dasharray="183.255 445.045"     


stroke-dashoffset="78.54" сдвигает начало сектора на 1/8 длины
окружности


Пример кода для одного сектора:  



	 





И  таким же способом устанавливаем  параметры аттрибута
stroke-dasharray для остальных цветных секторов.










Добавляем изображение и вырезаем его с помощью маски по размеру
окружностей:




	 




Решение адаптивно и работает одинаково во всех современных браузерах в включая IE11,Edge  

SVG+CSS анимация

Чтобы оживить приложение, я добавляю опции анимации.   

#1. Анимация вращения строки вокруг изображения   


Оберните все круги, которые образуют многоцветную линию,  групповым
тегом  
fill ="none" заменяется на fill ="transparent" для срабатывания
анимации при наведении на любую часть окружности




.student {
background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#gr1 {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#gr1:hover {
  -webkit-transform: rotate(720deg);
          transform: rotate(720deg);
}
 
 

	
  
 

	 
 
 
 

 	 
  
 
 




2.# Анимация вращения изображения внутри многоцветной строки  

Используемые правила CSS: 

#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}




.student {

background: rgb(238,174,202);
background: linear-gradient(90deg, rgba(238,174,202,1) 0%, rgba(148,208,233,1) 100%);
}
.container {
display: inline-block;
width:25%;
}
#img {
transform-origin:125px 125px;
  -webkit-transition: -webkit-transform 1s ease-in-out;
          transition:         transform 1s ease-in-out;
}

#img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}