<!doctype html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG响应式路径过渡动画幻灯片特效</title>
<link href='http://fonts.useso.com/css?family=Source+Sans+Pro:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header class="htmleaf-header">
<h1>HTML5 SVG响应式路径过渡动画幻灯片特效<span>A Animated SVG Image Slider</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="www.jb51.net/jiaoben/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/jiaoben/374608.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
<ul class="cd-filter">
<li><a href="index.html">Line 1</a></li>
<li><a href="line-2.html">Line 2</a></li>
<li><a class="selected" href="curve.html">Curve</a></li>
</ul>
</header>
<div class="cd-slider-wrapper">
<ul class="cd-slider" data-step1="M1402,800h-2c0,0,0-213,0-423s0-377,0-377h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H724c0,0-297-155-297-423C427,139,728,0,728,0h671c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0c0,0,1-213,1-423S1,0,1,0h1398c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2c0,0,0-213,0-423S0,0,0,0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h676c0,0,297-155,297-423C973,139,672,0,672,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400c0,0-1-213-1-423s0-377,0-377L1,0C0.4,0,0,0.4,0,1L0,800z">
<li class="visible">
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-1">
<path id="cd-changing-path-1" d="M1400,800H0c0,0,1-213,1-423S1,0,1,0h1398c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
<li>
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-2">
<path id="cd-changing-path-2" d="M1400,800H0c0,0,1-213,1-423S1,0,1,0h1398c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-2)" xlink:href="img/img-2.jpg"></image>
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
<li>
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-3">
<path id="cd-changing-path-3" d="M1400,800H0c0,0,1-213,1-423S1,0,1,0h1398c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-3)" xlink:href="img/img-3.jpg"></image>
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
<li>
<div class="cd-svg-wrapper">
<svg viewBox="0 0 1400 800">
<title>Aimated SVG</title>
<defs>
<clipPath id="cd-image-4">
<path id="cd-changing-path-4" d="M1400,800H0c0,0,1-213,1-423S1,0,1,0h1398c0.6,0,1,0.4,1,1V800z"/>
</clipPath>
</defs>
<image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="img/img-4.jpg"></image>
</svg>
</div> <!-- .cd-svg-wrapper -->
</li>
</ul> <!-- .cd-slider -->
<ul class="cd-slider-navigation">
<li><a href="#0" class="next-slide">Next</a></li>
<li><a href="#0" class="prev-slide">Prev</a></li>
</ul> <!-- .cd-slider-navigation -->
<ol class="cd-slider-controls">
<li class="selected"><a href="#0"><em>Item 1</em></a></li>
<li><a href="#0"><em>Item 2</em></a></li>
<li><a href="#0"><em>Item 3</em></a></li>
<li><a href="#0"><em>Item 4</em></a></li>
</ol> <!-- .cd-slider-controls -->
</div> <!-- .cd-slider-wrapper -->
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
基于HTML5 SVG响应式路径过渡动画幻灯片特效源码.zip
版权申诉
157 浏览量
2022-11-09
22:22:08
上传
评论
收藏 626KB ZIP 举报
基于HTML5 SVG响应式路径过渡动画幻灯片特效源码.zip （26个子文件） 
132686867824998722 html5_svg_xys css 
reset.css 1KB default.css 6KB style.css 4KB related 
2.jpg 34KB 1.jpg 14KB partials _layout.scss 377B _mixins.scss 444B _variables.scss 155B img img-4.jpg 137KB
cd-icon-arrows.svg 997B img-2.jpg 67KB img-1.jpg 103KB img-3.jpg 194KB
line-2.html 5KB curve.html 5KB fonts icomoon.woff 1KB icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB index.html 5KB js jquery.mobile.custom.min.js 8KB modernizr.js 15KB snap.svg-min.js 75KB main.js 6KB jquery-2.1.1.min.js 82KB scss style.scss 4KB资源评论
