3

Я создаю веб-сайт для клуба 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);
}
<div class="test"></div>

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

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

3

2 ответа 2

3

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

<svg viewbox="-5 -5 10 10" height="90vh">
  <defs>
    <mask id="mask1">
      <circle r="4.5" stroke="white" fill="black" stroke-width="0.5"></circle> 
    </mask>
    <mask id="mask2">
      <circle r="4"fill="white"></circle> 
    </mask>
  </defs>
  <g mask="url(#mask1)" transform="rotate(-45)">
    <rect width="7" height="7" fill="#fabb04" x="-7" y="-6"></rect>
    <rect width="7" height="7" fill="#34a852" x="-5" y="-1"></rect>
    <rect width="7" height="7" fill="#ea4335" x="-2" y="-5"></rect>
    <rect width="7" height="7" fill="#4285f4" x="0"  y="-1"></rect>
  </g>
  <image x="-4" y="-4" width="8" height="8" mask="url(#mask2)"
    xlink:href="https://i.stack.imgur.com/3q67w.gif"></image>
  <style>
    svg>g {
      transition: 1s;
    }
    svg:hover>g {
      transform: rotate(135deg);
    }

  </style>
</svg>

Или так:

<svg viewbox="-5 -5 10 10" height="90vh">
  <defs>
    <mask id="mask1">
      <circle r="4.5" stroke="white" fill="black" stroke-width="0.5"></circle> 
    </mask>
    <mask id="mask2">
      <circle r="4"fill="white"></circle> 
    </mask>
  </defs>
  <g mask="url(#mask1)" transform="rotate(-45)">
    <g transform="translate(-11,-12)">
      <rect width="20" height="10" fill="#ea4335"></rect>
      <rect width="10" height="10" fill="#fabb04"></rect>
    </g>
    <g transform="translate(-11,-2)">
      <rect width="20" height="10" fill="#4285f4"></rect>
      <rect width="10" height="10" fill="#34a852"></rect>
    </g>
  </g>
  <image x="-4" y="-4" width="8" height="8" mask="url(#mask2)"
    xlink:href="https://i.stack.imgur.com/3q67w.gif"></image>
  <style>
    svg rect, svg #mask1>circle {
      transition: 1s;
    }
    svg:hover rect {
      transform: translate(2px, 4px);
    }
    svg:hover #mask1 > circle {
      stroke-width: 0.7;
    }
  </style>
</svg>

15
  • Свежее решение, интересный подход. Было бы ещё полезней, по крайней мере для меня, увидеть реализацию анимации вращения строки при наведении. 3 июл 2019 в 17:39
  • Понял, задумал пару анимаций, доделаю попозже 3 июл 2019 в 17:42
  • я имел ввиду это, конкретное решение с прямоугольниками. Понятно, что анимацию, вращения строки на JS сделать не проблема, таких решений я видел достаточно много. Интересует именно решение анимации с прямоугольниками, обрезанное круговой маской. 3 июл 2019 в 17:46
  • @Alexandr_TT я про них самых, сделал 3 июл 2019 в 18:04
  • не то к сожалению Ты двигаешь прямоугольники, поэтому происходит визуальное изменение строки с изменением размеров цветных секторов. А я спросил именно вращение, с сохранением размеров цветных секторов. Смотри, мой пример анимации 3 июл 2019 в 18:09
3

Вариант 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 длины окружности

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="250" height="250" viewBox="0 0 250 250" > 
		 
<circle cx="125" cy="125" r="100" fill="none" stroke="#d3d3d3" stroke-width="8" />		 
 		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 
 
 </svg>	 

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="250" height="250" viewBox="0 0 250 250" >  
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="78.54" /> 
  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.255 425.045" stroke-dashoffset="281.9" /> 
  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="78.54 549.76" stroke-dashoffset="340	" /> 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.255 445.045" stroke-dashoffset="525.225	" /> 
 </svg>

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	     width="40%" height="40%" viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image xlink:href="https://i.stack.imgur.com/UsGg5.jpg" x="0" y="23" width="100%" height="100%" mask="url(#msk1)" />	
	<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 
  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 
  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
    <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	 

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

SVG+CSS анимация

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

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

  • Оберните все круги, которые образуют многоцветную линию, групповым тегом <g>
  • 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);
}
<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />	

<g id="gr1"> 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 </g>
 </svg>	
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
<g id="gr1">		 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
</g> 
 </svg>	 
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
<g id="gr1">	 
<circle id="blue" cx="125" cy="125" r="100" fill="transparent" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
</g> 
   </svg>	 
  </div> 
 </div>

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);
}
<div class="student"> 
 <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/IzNqO.jpg" x="0" y="24" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	
</div>  
 
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/d4AlZ.jpg" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
 </svg>	 
 </div> 
 <div class="container">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
	      viewBox="0 0 250 250" >  

 <defs> 
  <mask id="msk1"> 
    <rect width="100%" height="100%" fill="black" />
   <circle cx="125" cy="125" r="100" fill="white" stroke-width="20" stroke="black"  />
  </mask>
</defs>

 <image id="img" xlink:href="https://i.stack.imgur.com/YG6VN.png" x="0" y="25" width="100%" height="100%" mask="url(#msk1)" />	
		 
<circle id="blue" cx="125" cy="125" r="100" fill="none" stroke="#4285F4" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="78.54" /> 

  <circle id="red" cx="125" cy="125" r="100" fill="none" stroke="#EA4335" stroke-width="8" stroke-dasharray="203.3 425.1" stroke-dashoffset="281.9" /> 

  <circle id="gold" cx="125" cy="125" r="100" fill="none" stroke="#FABB04" stroke-width="8" stroke-dasharray="80 549.7" stroke-dashoffset="345	" /> 
 
   <circle id="green" cx="125" cy="125" r="100" fill="none" stroke="#34A852" stroke-width="8" stroke-dasharray="183.2 445.1" stroke-dashoffset="525.2	" /> 
 
   </svg>	 
  </div> 
 </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.