鼠标悬停SVG动画

下载代码

html

css

分享到微信朋友圈

html

<h1>Harry Potter Spells</h1>
<h3>Hover over the spells to see how they are casted.</h3>
<main>
	<div class="spell-card">
		<div class="spell-card__inner">
			<div class="spell-card__shape">
				<div class="spell-card__trace" style="background-image: url('https://www.jq22.com/gxwj/code2509/accio.svg');"></div>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 184 73.89">
			<clipPath id="clip-accio">
				<path class="cls-1" d="M125,89c43.91,0,80.83,27.11,91.58,63.89C210.25,111.13,171.66,79,125,79s-85.25,32.13-91.58,73.89C44.17,116.11,81.09,89,125,89Z"/>
			</clipPath>
			<path clip-path="url(#clip-accio)" class="trace-motion" fill="none" stroke="#ddfffb" stroke-miterlimit="10" stroke-width="14" class="cls-2" d="M33,150s20-64,92-64,92,64,92,64" transform="translate(-33 -79)"/></svg>

</div>
			<div class="spell-card__name">
				<h5>Accio</h5>
				<p>Summons an object towards the caster</p>
			</div>
		</div>
	</div>

<div class="spell-card">
		<div class="spell-card__inner">
			<div class="spell-card__shape">
				<div class="spell-card__trace" style="background-image: url('https://www.jq22.com/gxwj/code2509/aguamenti.svg');"></div>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 117.05">
					<clipPath id="clip-aguamenti">
						<path d="M21,139s-1,24,30,32c28.83,7.44,58.34-38.49,61.63-45.22.29-.61,29.53-47,51.19-54.41.65-.22,43.46-16.21,58.18,31.63,0,0-.25-.69-.78-1.87-9.33-20.51-34.05-28.73-54.07-18.36A53.11,53.11,0,0,0,154,92c-11.69,11.69-48.35,63.55-48.76,64.14C101.44,161.61,83.84,185,60,185c0,0-19,5-31-12C29,173,21,164,21,139Z"/>
					</clipPath>
					<path clip-path="url(#clip-aguamenti)" class="trace-motion" fill="none" stroke="#ddfffb" stroke-miterlimit="10" stroke-width="14" d="M21.14,141.53S25,181,60,181c0,0,15,1,32-17s36-46,39-54c0,0,25-34,40-34,0,0,29-15,48,21" transform="translate(-21 -68.63)"/>
				</svg>
			</div>
			<div class="spell-card__name">
				<h5>Aguamenti</h5>
				<p>Produces a clean, drinkable jet of water from the wand tip</p>
			</div>
		</div>
	</div>

</div>
			<div class="spell-card__name">
				<h5>Arresto Momentum</h5>
				<p>Also known as the Slowing Charm. Slows down the velocity of an object</p>
			</div>
		</div>
	</div>

</div>
			<div class="spell-card__name">
				<h5>Meteolojinx Recanto</h5>
				<p>Incantation to a counter-charm that causes weather effects</p>
			</div>
		</div>
	</div>

</div>
			<div class="spell-card__name">
				<h5>Expecto Patronum</h5>
				<p>The only known defence against Dementors</p>
			</div>
		</div>
	</div>

</div>
			<div class="spell-card__name">
				<h5>Riddikkulus</h5>
				<p>Forces a Boggart to take the appearance of an object the caster is focusing on</p>
			</div>
		</div>
	</div>
</main>

css

body {
  font-family: 'Comfortaa', sans-serif;
  background: #111;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.trace-motion {
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  opacity: .8;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
h1 {
  font: 60px 'Cinzel Decorative';
  margin: 2em 0 .2em;
}

h3 {
  font: 24px 'Cinzel';
}

main {
  margin: 4em auto 8em;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.spell-card {
  background: linear-gradient(315deg, #9d523c 0%, #f2a65a 74%);
  flex: 0 0 300px;
  padding: 5px;
  margin: 2em;
  border-radius: 20px;
  box-shadow: 0 0 0 14px #333;
  text-align: center;
  position: relative;
}
.spell-card:before {
  content: 'Harry Potter spells';
  font-family: 'Cinzel';
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .5px;
  border-radius: 20px;
  background: linear-gradient(to top, #9d523c 0%, #f2a65a 74%);
  position: absolute;
  z-index: 10;
  max-width: 225px;
  top: -8px;
  padding: 5px;
  left: 0;
  right: 0;
  margin: auto;
}
.spell-card__inner {
  border-radius: 17px;
  overflow: hidden;
  background: #333;
}
.spell-card h5 {
  font-family: 'Cinzel Decorative', 'Bahianita';
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 15px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.spell-card p {
  font-family: 'Cinzel', 'Alice';
  font-size: 16px;
  width: 90%;
  margin: 0 auto 20px;
  min-height: 45px;
}
.spell-card__shape {
  width: 100%;
  height: 300px;
  background: #333;
  display: grid;
  place-items: center;
  position: relative;
  margin-top: 20px;
}
.spell-card__shape svg {
  width: 70%;
  max-width: 250px;
  filter: drop-shadow(0 0 12px #0ff) drop-shadow(-2px -2px 12px #00bcd4);
}
.spell-card__trace {
  position: absolute;
  width: 100%;
  opacity: .4;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
}
.spell-card:hover {
  cursor: pointer;
}
.spell-card:hover .trace-motion {
  animation: draw .7s linear forwards;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg