[html + css] SVG动画发光渐变炫彩猫猫头

L_Chee

已于 2022-04-17 13:52:52 修改

阅读量1.6k

点赞数 1

分类专栏： LChee的专栏文章标签： css html svg 动画 hover

于 2022-04-15 14:56:07 首次发布

本文链接：https://blog.csdn.net/L_Chee/article/details/124194469

版权

LChee的专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

SVG 发光渐变炫彩猫猫头

效果展示
发光渐变炫彩猫猫头
- html
- css

效果展示

鼠标悬浮效果
gif演示的源代码在这里：
CodePen: https://codepen.io/lz7-owo/pen/VwyGreE(可实时调试).
（原svg动画效果是很流畅的，为了缩短gif录制时间删去了一些中间帧）

源代码的一些讲解在这里：
bilibili: https://www.bilibili.com/video/BV19T4y1Y7ku?share_source=copy_web.

发光渐变炫彩猫猫头

鼠标移动到svg路径上，svg路径会变成猫猫路径。变成猫猫路径后会带有渐变颜色和发光效果。
为不同代码块写了一些简单的注释，如果仍有疑问，可以在文章下留言评论，或私信我。

html

<!-- svg后面的圆形面板 -->
<div class="bgcircle"></div>
<div class="bgcircle2"></div>
<div class="bgcircle3"></div>

<!-- 第一个svg图标 -->
<svg viewBox="0 -10 224.98 165.81" class="cls cls-1">
  <defs>
			<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
			<stop offset="70%" stop-color="#ffe6fc"></stop>
			<stop offset="100%" stop-color="#ffcbbc"></stop>
			</linearGradient>
      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
			<stop offset="70%" stop-color="#bed3f0"></stop>
			<stop offset="100%" stop-color="#f0bede"></stop>
			</linearGradient>
      <linearGradient id="Gradient3" x1="0" x2="0" y1="0" y2="1">
			<stop offset="70%" stop-color="#a5d5ff"></stop>
			<stop offset="100%" stop-color="#dafff2"></stop>
			</linearGradient>
	</defs>
  <path fill="#44557a" d="M513.89,243.87a4.34,4.34,0,0,0-.74-1.92,8,8,0,0,0-1.17-1.38,16.6,16.6,0,0,0-2.65-2,43.5,43.5,0,0,0-5.65-3,191.46,191.46,0,0,0-23.7-8.11q-3.83-1.09-7.67-2.11a74.71,74.71,0,0,0-68.47-68.24,1.66,1.66,0,0,0-1.59.85,7.34,7.34,0,0,0-.67,5.83c.18.51,1,3,3.16,3.78,3.6,1.32,6.92-3.64,9.46-2.31,2,1.06.74,4.64,3.57,6.73,1.67,1.23,2.82.49,3.79,1.68,1.62,2,.55,6.66-2.11,8.41-1.1.73-1.63.4-5.88,1.26-2.84.58-3.18.84-4.42,1-6.23,1.08-10.51-3.31-11.56-2.1s1.52,6.46,5.26,7.36c2.16.51,3.23-.81,5.88,0,1.66.5,1.85,1.2,4.21,2.52,2.7,1.51,4,1.48,5.25,2.1,4.64,2.37,6,13.26,2.31,21.24-1.88,4.09-5.88,9.12-8.61,8.41A2.81,2.81,0,0,1,410,222c-.68-2.71,4.45-4.9,4-8-.15-1-.79-1.72-2.1-2.73-7-5.41-14.13-3.63-16.23-7.61-1.2-2.29.94-3.24-.13-7-1.32-4.68-5.77-7.36-7.53-8.42-4.56-2.74-6.1-1.37-9.18-3.9s-4.67-7.92-5-9.42c-1.25-5.26-1.88-7.92-.43-10.43,1.7-2.91,5.13-3.72,10.6-5a46,46,0,0,1,9.66-1.22,1,1,0,0,0,.75-.83c0-.4-.67-.66-.81-.71a76.59,76.59,0,0,0-59.35,35.69,73,73,0,0,0-5.11,10l-2.42-.14a193.88,193.88,0,0,0-25.05,0,44.65,44.65,0,0,0-6.31,1,16.18,16.18,0,0,0-3.15,1.05,8.38,8.38,0,0,0-1.56.92,4.45,4.45,0,0,0-1.33,1.58A3.58,3.58,0,0,0,289,209a5.62,5.62,0,0,0,.72,1.84,12.57,12.57,0,0,0,2.22,2.64,37.74,37.74,0,0,0,5.14,3.89,113.75,113.75,0,0,0,11,6.15c3.76,1.87,7.56,3.62,11.38,5.29l3.66,1.57q-.06,3.33.19,6.86a75.49,75.49,0,0,0,10.56,33.05,4.11,4.11,0,0,0,2.95-.14c1.4-.72,1.16-2.3,2.52-4s2.9-3.54,5.49-4.29c.49-.14,4.08-1.12,6.07.72,1.76,1.63.66,4,1.26,6.09,2.36,8.19,29,4.15,32.17,12.41,1.49,3.94,0,9.22-1.31,12.92a26.47,26.47,0,0,1-3.62,7,1.66,1.66,0,0,1-1.8.63,63.28,63.28,0,0,1-10.56-3.54A72.66,72.66,0,0,1,341,277.45a.89.89,0,0,0-1.14-.22.9.9,0,0,0-.28,1.36,74.18,74.18,0,0,0,16.57,15.16,76.32,76.32,0,0,0,37.63,12.48c1.35.08,2.72.12,4.09.12a74.75,74.75,0,0,0,70.79-50.73q-7.72.45-15.5.58c-2.09,0-4.18,0-6.28,0s-4.18-.08-6.27-.17c-4.19-.18-8.36-.52-12.53-.94s-8.31-1-12.45-1.62-8.25-1.39-12.33-2.29-8.15-1.87-12.19-2.93-8-2.29-12-3.66l.1-.38a413.78,413.78,0,0,0,49.2,6.9,390,390,0,0,0,41.32,1.05,74.91,74.91,0,0,0,2.84-20.5c0-1.76-.06-3.51-.19-5.24q3.63,1.1,7.24,2.25a190.32,190.32,0,0,1,23.21,8.77,42,42,0,0,1,5.31,2.95,14.21,14.21,0,0,1,2.27,1.81,3.69,3.69,0,0,1,1.19,2,2,2,0,0,1-1,1.63,10.56,10.56,0,0,1-2.42,1.35,34.55,34.55,0,0,1-5.75,1.74,111.11,111.11,0,0,1-12.16,1.9c-4.1.45-8.23.76-12.36,1-2.74.17-5.48.29-8.22.38-.34,1.18-.7,2.35-1.1,3.5q4.78-.28,9.55-.68c4.16-.35,8.32-.77,12.48-1.32a116,116,0,0,0,12.42-2.25,38.11,38.11,0,0,0,6.12-2,12.87,12.87,0,0,0,3-1.78,5.6,5.6,0,0,0,1.28-1.5A3.67,3.67,0,0,0,513.89,243.87Zm-190.61-17-2.55-1c-3.83-1.57-7.63-3.21-11.36-5a111.75,111.75,0,0,1-10.9-5.73,34.93,34.93,0,0,1-4.87-3.51,10.35,10.35,0,0,1-1.85-2.06,2,2,0,0,1-.38-1.85,3.64,3.64,0,0,1,1.75-1.48,15.27,15.27,0,0,1,2.74-1,43.19,43.19,0,0,1,6-1.07,191.41,191.41,0,0,1,24.8-.79l2,.05A75.59,75.59,0,0,0,323.28,226.88Z" transform="translate(-288.93 -156.73)"/>
</svg>

<!-- 第二个svg图标 -->
<svg viewBox="0 -10 224.98 165.81" class="cls cls-2">
  <path fill="#44557a" d="M513.89,243.87a4.34,4.34,0,0,0-.74-1.92,8,8,0,0,0-1.17-1.38,16.6,16.6,0,0,0-2.65-2,43.5,43.5,0,0,0-5.65-3,191.46,191.46,0,0,0-23.7-8.11q-3.83-1.09-7.67-2.11a74.71,74.71,0,0,0-68.47-68.24,1.66,1.66,0,0,0-1.59.85,7.34,7.34,0,0,0-.67,5.83c.18.51,1,3,3.16,3.78,3.6,1.32,6.92-3.64,9.46-2.31,2,1.06.74,4.64,3.57,6.73,1.67,1.23,2.82.49,3.79,1.68,1.62,2,.55,6.66-2.11,8.41-1.1.73-1.63.4-5.88,1.26-2.84.58-3.18.84-4.42,1-6.23,1.08-10.51-3.31-11.56-2.1s1.52,6.46,5.26,7.36c2.16.51,3.23-.81,5.88,0,1.66.5,1.85,1.2,4.21,2.52,2.7,1.51,4,1.48,5.25,2.1,4.64,2.37,6,13.26,2.31,21.24-1.88,4.09-5.88,9.12-8.61,8.41A2.81,2.81,0,0,1,410,222c-.68-2.71,4.45-4.9,4-8-.15-1-.79-1.72-2.1-2.73-7-5.41-14.13-3.63-16.23-7.61-1.2-2.29.94-3.24-.13-7-1.32-4.68-5.77-7.36-7.53-8.42-4.56-2.74-6.1-1.37-9.18-3.9s-4.67-7.92-5-9.42c-1.25-5.26-1.88-7.92-.43-10.43,1.7-2.91,5.13-3.72,10.6-5a46,46,0,0,1,9.66-1.22,1,1,0,0,0,.75-.83c0-.4-.67-.66-.81-.71a76.59,76.59,0,0,0-59.35,35.69,73,73,0,0,0-5.11,10l-2.42-.14a193.88,193.88,0,0,0-25.05,0,44.65,44.65,0,0,0-6.31,1,16.18,16.18,0,0,0-3.15,1.05,8.38,8.38,0,0,0-1.56.92,4.45,4.45,0,0,0-1.33,1.58A3.58,3.58,0,0,0,289,209a5.62,5.62,0,0,0,.72,1.84,12.57,12.57,0,0,0,2.22,2.64,37.74,37.74,0,0,0,5.14,3.89,113.75,113.75,0,0,0,11,6.15c3.76,1.87,7.56,3.62,11.38,5.29l3.66,1.57q-.06,3.33.19,6.86a75.49,75.49,0,0,0,10.56,33.05,4.11,4.11,0,0,0,2.95-.14c1.4-.72,1.16-2.3,2.52-4s2.9-3.54,5.49-4.29c.49-.14,4.08-1.12,6.07.72,1.76,1.63.66,4,1.26,6.09,2.36,8.19,29,4.15,32.17,12.41,1.49,3.94,0,9.22-1.31,12.92a26.47,26.47,0,0,1-3.62,7,1.66,1.66,0,0,1-1.8.63,63.28,63.28,0,0,1-10.56-3.54A72.66,72.66,0,0,1,341,277.45a.89.89,0,0,0-1.14-.22.9.9,0,0,0-.28,1.36,74.18,74.18,0,0,0,16.57,15.16,76.32,76.32,0,0,0,37.63,12.48c1.35.08,2.72.12,4.09.12a74.75,74.75,0,0,0,70.79-50.73q-7.72.45-15.5.58c-2.09,0-4.18,0-6.28,0s-4.18-.08-6.27-.17c-4.19-.18-8.36-.52-12.53-.94s-8.31-1-12.45-1.62-8.25-1.39-12.33-2.29-8.15-1.87-12.19-2.93-8-2.29-12-3.66l.1-.38a413.78,413.78,0,0,0,49.2,6.9,390,390,0,0,0,41.32,1.05,74.91,74.91,0,0,0,2.84-20.5c0-1.76-.06-3.51-.19-5.24q3.63,1.1,7.24,2.25a190.32,190.32,0,0,1,23.21,8.77,42,42,0,0,1,5.31,2.95,14.21,14.21,0,0,1,2.27,1.81,3.69,3.69,0,0,1,1.19,2,2,2,0,0,1-1,1.63,10.56,10.56,0,0,1-2.42,1.35,34.55,34.55,0,0,1-5.75,1.74,111.11,111.11,0,0,1-12.16,1.9c-4.1.45-8.23.76-12.36,1-2.74.17-5.48.29-8.22.38-.34,1.18-.7,2.35-1.1,3.5q4.78-.28,9.55-.68c4.16-.35,8.32-.77,12.48-1.32a116,116,0,0,0,12.42-2.25,38.11,38.11,0,0,0,6.12-2,12.87,12.87,0,0,0,3-1.78,5.6,5.6,0,0,0,1.28-1.5A3.67,3.67,0,0,0,513.89,243.87Zm-190.61-17-2.55-1c-3.83-1.57-7.63-3.21-11.36-5a111.75,111.75,0,0,1-10.9-5.73,34.93,34.93,0,0,1-4.87-3.51,10.35,10.35,0,0,1-1.85-2.06,2,2,0,0,1-.38-1.85,3.64,3.64,0,0,1,1.75-1.48,15.27,15.27,0,0,1,2.74-1,43.19,43.19,0,0,1,6-1.07,191.41,191.41,0,0,1,24.8-.79l2,.05A75.59,75.59,0,0,0,323.28,226.88Z" transform="translate(-288.93 -156.73)"/>
</svg>

<!-- 第三个svg图标 -->
<svg viewBox="0 -10 224.98 165.81" class="cls cls-3">
  <path fill="#44557a" d="M513.89,243.87a4.34,4.34,0,0,0-.74-1.92,8,8,0,0,0-1.17-1.38,16.6,16.6,0,0,0-2.65-2,43.5,43.5,0,0,0-5.65-3,191.46,191.46,0,0,0-23.7-8.11q-3.83-1.09-7.67-2.11a74.71,74.71,0,0,0-68.47-68.24,1.66,1.66,0,0,0-1.59.85,7.34,7.34,0,0,0-.67,5.83c.18.51,1,3,3.16,3.78,3.6,1.32,6.92-3.64,9.46-2.31,2,1.06.74,4.64,3.57,6.73,1.67,1.23,2.82.49,3.79,1.68,1.62,2,.55,6.66-2.11,8.41-1.1.73-1.63.4-5.88,1.26-2.84.58-3.18.84-4.42,1-6.23,1.08-10.51-3.31-11.56-2.1s1.52,6.46,5.26,7.36c2.16.51,3.23-.81,5.88,0,1.66.5,1.85,1.2,4.21,2.52,2.7,1.51,4,1.48,5.25,2.1,4.64,2.37,6,13.26,2.31,21.24-1.88,4.09-5.88,9.12-8.61,8.41A2.81,2.81,0,0,1,410,222c-.68-2.71,4.45-4.9,4-8-.15-1-.79-1.72-2.1-2.73-7-5.41-14.13-3.63-16.23-7.61-1.2-2.29.94-3.24-.13-7-1.32-4.68-5.77-7.36-7.53-8.42-4.56-2.74-6.1-1.37-9.18-3.9s-4.67-7.92-5-9.42c-1.25-5.26-1.88-7.92-.43-10.43,1.7-2.91,5.13-3.72,10.6-5a46,46,0,0,1,9.66-1.22,1,1,0,0,0,.75-.83c0-.4-.67-.66-.81-.71a76.59,76.59,0,0,0-59.35,35.69,73,73,0,0,0-5.11,10l-2.42-.14a193.88,193.88,0,0,0-25.05,0,44.65,44.65,0,0,0-6.31,1,16.18,16.18,0,0,0-3.15,1.05,8.38,8.38,0,0,0-1.56.92,4.45,4.45,0,0,0-1.33,1.58A3.58,3.58,0,0,0,289,209a5.62,5.62,0,0,0,.72,1.84,12.57,12.57,0,0,0,2.22,2.64,37.74,37.74,0,0,0,5.14,3.89,113.75,113.75,0,0,0,11,6.15c3.76,1.87,7.56,3.62,11.38,5.29l3.66,1.57q-.06,3.33.19,6.86a75.49,75.49,0,0,0,10.56,33.05,4.11,4.11,0,0,0,2.95-.14c1.4-.72,1.16-2.3,2.52-4s2.9-3.54,5.49-4.29c.49-.14,4.08-1.12,6.07.72,1.76,1.63.66,4,1.26,6.09,2.36,8.19,29,4.15,32.17,12.41,1.49,3.94,0,9.22-1.31,12.92a26.47,26.47,0,0,1-3.62,7,1.66,1.66,0,0,1-1.8.63,63.28,63.28,0,0,1-10.56-3.54A72.66,72.66,0,0,1,341,277.45a.89.89,0,0,0-1.14-.22.9.9,0,0,0-.28,1.36,74.18,74.18,0,0,0,16.57,15.16,76.32,76.32,0,0,0,37.63,12.48c1.35.08,2.72.12,4.09.12a74.75,74.75,0,0,0,70.79-50.73q-7.72.45-15.5.58c-2.09,0-4.18,0-6.28,0s-4.18-.08-6.27-.17c-4.19-.18-8.36-.52-12.53-.94s-8.31-1-12.45-1.62-8.25-1.39-12.33-2.29-8.15-1.87-12.19-2.93-8-2.29-12-3.66l.1-.38a413.78,413.78,0,0,0,49.2,6.9,390,390,0,0,0,41.32,1.05,74.91,74.91,0,0,0,2.84-20.5c0-1.76-.06-3.51-.19-5.24q3.63,1.1,7.24,2.25a190.32,190.32,0,0,1,23.21,8.77,42,42,0,0,1,5.31,2.95,14.21,14.21,0,0,1,2.27,1.81,3.69,3.69,0,0,1,1.19,2,2,2,0,0,1-1,1.63,10.56,10.56,0,0,1-2.42,1.35,34.55,34.55,0,0,1-5.75,1.74,111.11,111.11,0,0,1-12.16,1.9c-4.1.45-8.23.76-12.36,1-2.74.17-5.48.29-8.22.38-.34,1.18-.7,2.35-1.1,3.5q4.78-.28,9.55-.68c4.16-.35,8.32-.77,12.48-1.32a116,116,0,0,0,12.42-2.25,38.11,38.11,0,0,0,6.12-2,12.87,12.87,0,0,0,3-1.78,5.6,5.6,0,0,0,1.28-1.5A3.67,3.67,0,0,0,513.89,243.87Zm-190.61-17-2.55-1c-3.83-1.57-7.63-3.21-11.36-5a111.75,111.75,0,0,1-10.9-5.73,34.93,34.93,0,0,1-4.87-3.51,10.35,10.35,0,0,1-1.85-2.06,2,2,0,0,1-.38-1.85,3.64,3.64,0,0,1,1.75-1.48,15.27,15.27,0,0,1,2.74-1,43.19,43.19,0,0,1,6-1.07,191.41,191.41,0,0,1,24.8-.79l2,.05A75.59,75.59,0,0,0,323.28,226.88Z" transform="translate(-288.93 -156.73)"/>
</svg>

css

/* 地球svg在鼠标悬浮状态下路径统一赋值为猫猫路径 */
.cls:hover path {
  d: path("M513.89,243.87a4.34,4.34,0,0,0-.74-1.92,8,8,0,0,0-1.17-1.38,16.6,16.6,0,0,0-2.65-2,43.5,43.5,0,0,0-5.65-3,191.46,191.46,0,0,0-23.7-8.11c-1.62-.47-3.41-.95-3.41-.95l-4.26-1.16-1.76-.53a73.52,73.52,0,0,1-3.66,29.78c-1.33,3.89-9.79,27.35-32.91,39.6a60.46,60.46,0,0,1-5.57,2.59q-3.07-16.38-6.18-32.75a16.92,16.92,0,0,0-.57-2.14c10.88-.43,20.6-1.84,28.52-5.72a34.48,34.48,0,0,0,6.26-3.92,32.14,32.14,0,0,0,5.91-6.07c9.13-12.22,8.94-29.87,4.62-43q-.47-1.42-1-2.76a50,50,0,0,0-7.75-13.21c2.68-2.67,2.55-14,2.54-15.31a64.22,64.22,0,0,0-4.25-22.11c-4.36,3.39-8.93,7.24-13.56,11.6q-3.39,3.19-6.39,6.31l-1.1,1.15a85.77,85.77,0,0,0-34-8.75,95.78,95.78,0,0,0-12,.08,85.33,85.33,0,0,0-13.58,1.91,66.2,66.2,0,0,0-13.52,4.66,1,1,0,0,0-.44,1.41,1,1,0,0,0,1.29.39,63.73,63.73,0,0,1,10-3.72,78.92,78.92,0,0,1,16.41-2.65c1.78-.13,4-.23,6.52-.23,1.59,0,3.31,0,5.13.14,13,.69,31.5,4.34,46.76,17.57.49-.62,1-1.3,1.49-2.05a36.06,36.06,0,0,0,4-7.75,36.51,36.51,0,0,0,2.17-10.21,37.14,37.14,0,0,1-.07,24.54c-.26.74-.53,1.43-.8,2.07l.24.26.12.13a48,48,0,0,1,9,14.5c5,12.85,6,31.4-3.36,43.87a30.82,30.82,0,0,1-7.58,7.22,35.66,35.66,0,0,1-7.81,3.91c-7,2.55-15.21,3.53-24.47,3.83a17.69,17.69,0,0,0-5.06-6.47l-.06-.05a18.13,18.13,0,0,0-10.88-3.84l-8.53-.05-54.9-.32a30.3,30.3,0,0,1-6.89-7.48c-4.18-6.43-5.85-14.16-5.69-22,1.95,4.33,13.89,9,16.61,6.12,1.15-1.21,1.18-4.32-.1-7.17a2.34,2.34,0,0,0,.2.27l10.3-3.79a15.55,15.55,0,1,1,.17.23l-8,6.57a22.2,22.2,0,0,0,31.32.31c.3,3.72,2.18,6.94,5.07,8.32a8,8,0,0,0,3.45.75,10.38,10.38,0,0,0,4.17-.92,12.16,12.16,0,0,0,5.87-5.59,12.45,12.45,0,0,0,6,5.53,9.25,9.25,0,0,0,7.6.1c2.79-1.34,4.68-4.4,5.09-8a22.2,22.2,0,0,0,27,2.8l-7.77-6.42a15.22,15.22,0,0,1-22-4.95,11.1,11.1,0,0,1-.63-1.24,15.05,15.05,0,0,1-1.36-6.29,15.24,15.24,0,1,1,24.13,12.36l10.76,4.17.17-.15a1.66,1.66,0,0,0,0,.22l0,0,0,.07v0a6.34,6.34,0,0,0,2,4.32c4.54,3.71,17.18-3.26,16.8-7.68-.28-3.15-7.38-7.28-12.79-6.18a22.23,22.23,0,0,0-38.74-20.63,22,22,0,0,0-4.55,13.46,22.9,22.9,0,0,0,.31,3.73,21.88,21.88,0,0,0,2.6,7.26,22.16,22.16,0,0,0,2,3,11,11,0,0,1-.24,2.95,7.61,7.61,0,0,1-3.77,5.37,7.32,7.32,0,0,1-5.95-.14,10.68,10.68,0,0,1-5.8-6.4c1.24-.31,2.37-1.18,4.23-2.63,2.53-2,4.44-3.46,4.14-4.74-.52-2.18-7.17-2.21-9.26-2.22s-8.65,0-9.23,2.14c-.33,1.27,1.46,2.79,3.63,4.61,1.75,1.49,3,2.52,4.46,2.85a10.48,10.48,0,0,1-5.64,6.46,7.22,7.22,0,0,1-5.95.19c-2.71-1.29-4.32-4.95-3.9-8.78a22.22,22.22,0,1,0-37.27-3.4,8.76,8.76,0,0,0-4.42-3.18c-4.57-1.43-9.4,1.19-10.76,3.79a60.58,60.58,0,0,1,9.22-27.84c.35-.55.71-1.08,1.08-1.6-.1-.7-.19-1.44-.27-2.23a49.17,49.17,0,0,1,4.39-25.9,36.12,36.12,0,0,0,2.47,11.66,34,34,0,0,0,2.23,4.6c.3.53.61,1,.91,1.5a63.41,63.41,0,0,1,8.85-6l-1-1.74-.06,0c-.06-.1-.12-.2-.17-.3q-5.82-9.92-11.61-19.83a57.29,57.29,0,0,0-10.26,22.61c-1.62,7.88-1.59,16.61-.06,19.19-.39.7-.77,1.41-1.13,2.13-7.51,14.86-10,35.13-.67,49.39a32.89,32.89,0,0,0,5.4,6.37l-10.9-.07a73.22,73.22,0,0,1-2.14-13.82c-.15-2.46-.16-4.78-.09-6.94,0-.41,0-.81.05-1.2a1,1,0,0,0-.86-1,1,1,0,0,0-1.08.72l-2.55-1c-3.83-1.57-7.63-3.21-11.36-5a111.75,111.75,0,0,1-10.9-5.73,34.93,34.93,0,0,1-4.87-3.51,10.35,10.35,0,0,1-1.85-2.06,2,2,0,0,1-.38-1.85,3.64,3.64,0,0,1,1.75-1.48,15.27,15.27,0,0,1,2.74-1,34.14,34.14,0,0,1,3.7-.76h0c1.1-.31,2.08-.55,2.93-.73,4.36-.94,8.82-1.05,17.56-1.22,3.08-.07,5.6-.08,7.25-.07l1-.17-.95-.06-.75,0a193.88,193.88,0,0,0-25.05,0,44.65,44.65,0,0,0-6.31,1,16.18,16.18,0,0,0-3.15,1.05,8.38,8.38,0,0,0-1.56.92,4.45,4.45,0,0,0-1.33,1.58A3.58,3.58,0,0,0,289,209a5.62,5.62,0,0,0,.72,1.84,12.57,12.57,0,0,0,2.22,2.64,37.74,37.74,0,0,0,5.14,3.89,113.75,113.75,0,0,0,11,6.15q5.31,2.64,10.72,5l.66.3c1.21.53,2.43,1,3.64,1.56,0,1.57,0,3.21.08,4.93.06,1.35.17,2.65.31,3.92.07.65.14,1.3.22,1.93a72.23,72.23,0,0,0,1.53,8h0a74.5,74.5,0,0,0,5.51,15.3l57.09-.21h.06a15.88,15.88,0,0,1,15.61,13L407.21,297c-.21,1.71-1.33,2.9-2.46,3a2.61,2.61,0,0,1-1.59-.57,2.52,2.52,0,0,1-.87-1.47l-3.71-19.82a10.89,10.89,0,0,0-10.7-8.88h0l-54.44.2c.08.16.17.31.26.46a73.62,73.62,0,0,0,5.77,8.43.91.91,0,0,0,.13.26,74,74,0,0,0,42.59,26.06l.13,0c2.3.48,4.45.83,6.38,1.07s3.64.39,5.1.48,2.72.12,4.09.12a74.39,74.39,0,0,0,30.26-6.41v0l.67-.3.16-.07h0c1.77-.81,3.89-1.86,6.25-3.23a83.58,83.58,0,0,0,11.59-8.25,76.59,76.59,0,0,0,23.37-37.53,74.84,74.84,0,0,0,2.23-24.2h0c1.45.44,2.9.88,4.35,1.34l2.89.91a190.32,190.32,0,0,1,23.21,8.77,42,42,0,0,1,5.31,2.95,14.21,14.21,0,0,1,2.27,1.81,3.69,3.69,0,0,1,1.19,2,2,2,0,0,1-1,1.63,10.56,10.56,0,0,1-2.42,1.35,34.55,34.55,0,0,1-5.75,1.74,111.11,111.11,0,0,1-12.16,1.9c-4.1.45-8.23.76-12.36,1-1.14.07-2.27.13-3.41.18l-.41,0a1.65,1.65,0,1,0,.2,3.3l3.85-.3c3.23-.27,7.31-.62,12.48-1.32a116,116,0,0,0,12.42-2.25,38.11,38.11,0,0,0,6.12-2,12.87,12.87,0,0,0,3-1.78,5.6,5.6,0,0,0,1.28-1.5A3.67,3.67,0,0,0,513.89,243.87Z");
}

/* cls-1、2、3为svg图像鼠标悬浮状态赋上渐变颜色 */
.cls-1:hover path { 
 fill:url(#Gradient1);
}

.cls-2:hover path { 
 fill:url(#Gradient2);
}

.cls-3:hover path { 
 fill:url(#Gradient3);
}

/* svg图标默认状态下阴影样式 */
svg {
    width: 30%;
    -webkit-filter: drop-shadow( 2px 2px 5px #262f4b);
    filter: drop-shadow( 2px 2px 5px #262f4b);
}

/* svg图标鼠标悬浮状态下阴影样式 */
svg:hover {
    width: 30%;
    -webkit-filter: drop-shadow( 0px 0px 5px #6477a2);
    filter: drop-shadow( 0px 0px 5px #6477a2);
}

/* 页面背景及基本样式 */
body {
  background:#293756;
  text-align:center;
  background-repeat: repeat;
  animation:3s bgmove linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2399afea' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* svg后面的圆形面板样式 */
.bgcircle,.bgcircle2,.bgcircle3 {
    width: 23vw; 
    height: 23vw;
    border-radius: 15vw;
    background-color: #2b3756;
    position: absolute;
    z-index: -1;
}

.bgcircle {
    margin-left: 7.5vw;
}

.bgcircle2 {
    margin-left: 37.5vw;
}

.bgcircle3 {
    margin-left: 67.5vw;
}

/* 背景图片移动动画 */
@keyframes bgmove{
  0% {
    background-position-x: 10em;
    background-position-y: -10em;
  }
   100% {
    background-position-x: 19.5em;
     background-position-y: -19.5em;
  }
}

L_Chee

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
[html + css] SVG动画发光渐变炫彩猫猫头

[html+css] SVG动画发光渐变炫彩猫猫头效果展示gif演示的源代码在这里：CodePen: https://codepen.io/lz7-owo/pen/VwyGreE.发光渐变炫彩猫猫头鼠标移动到svg路径上，svg路径会变成猫猫路径。变成猫猫路径后会带有渐变颜色和发光效果。为不同代码块写了一些简单的注释，如果仍有疑问，可以在文章下留言评论，或私信我。html<div class="bgcircle"&
复制链接

扫一扫