TweenMax+svg实现情人节文字爱心表白动画效果代码

代码语言:html

所属分类:表白

代码描述:TweenMax+svg实现情人节文字爱心表白动画效果代码

代码标签: TweenMax svg 情人节 文字 爱心 表白 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    html, body {
  height: 100%;
}

body {
  overflow: hidden;
  background: radial-gradient(circle at center, red, #670000);
}

#scene {
  width: 100%;
  height: 100%;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="453.5px" height="453.5px" viewBox="0 0 453.5 453.5" overflow="scroll" enable-background="new 0 0 453.5 453.5"
        xml:space="preserve" id="scene">
<defs>
	<symbol id="heart">
		<path d="M16.6,0c-4.6-0.3-5.9,3.2-5.9,3.2S7.9-1.1,4,0.4C0.1,1.8-2.7,8.5,4.3,14.3c5.4,4.5,6.2,4.5,6.2,4.5
	s0.8,0,6.7-4.8C24,8.3,21.2,0.4,16.6,0z M16.5,13.7c-5.6,4.6-6,4.6-6,4.6S10.2,18.4,5,14C-1.6,8.4,0.5,2.2,4.3,0.8
	c3.7-1.4,6.4,3.5,6.4,3.5s1.3-4.1,5.7-3.8C20.8,0.8,23,8.3,16.5,13.7z"/>
	</symbol>
</defs>
	
	<svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xlink:href="#heart"></use>
	</svg>
    <svg class='heart-path'>
		<use fill="none" xli.........完整代码请登录后点击上方下载按钮下载查看

网友评论0