我正在为我大学的 Google DSC 俱乐部创建一个网站,我想添加 Google One style border到网站上的圆形投资组合图像。
我想知道如何使用 CSS 来完成此任务,但预渲染 Photoshop 或 Illustrator 技巧也可以。
我尝试修改 this answer 中给出的一些代码,但我没能达到完美的效果。
.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>
如您所见,边框颜色未正确对齐。
有什么方法可以使用更简单的方法来完成此任务吗?
谢谢!
最佳答案
SVG 选项
要创建圆的多色扇形,请使用 stroke-dasharray
计算线条和空格的长度:
对于半径R = 100px
周长 = 2 * 3.1415 * 100 = 628.3 px
为了使直线等于圆的四分之一,我们计算属性 stroke-dasharray
628.3 / 4 = 157.075
空间将为圆长度的 3/4 = 471px
但是由于蓝色、红色和绿色部分的长度略大于四分之一圆,因此我们添加了此差异。笔划-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>
我们还为其他颜色扇区设置了属性。
<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="/image/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
更新
OP 没有询问,但也许这个补充会对他或其他人有用。
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="/image/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="/image/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="/image/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="/image/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="/image/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="/image/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>
关于css - 如何向圆形图像添加 Google One 风格的多色边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56839310/