利用HTML5实现SVG遮罩图片切换特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

134 533 178



特效描述:利用HTML5实现 SVG 遮罩图片 切换特效。利用HTML5实现SVG遮罩图片切换特效

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/libs/bootstrap.min.css">
<link rel="stylesheet" href="css/slider.css">
<link rel="stylesheet" href="css/main.css">

2. 引入JS

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/libs/jquery.mobile.custom.min.js" type="text/javascript"></script>
<script src="js/libs/snap.svg-min.js" type="text/javascript"></script>
<script src="js/libs/bootstrap.min.js" type="text/javascript"></script>
<script src='js/TweenMax.min.js' type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>

3. HTML代码

<div class="portfolio slider-wrapper">
	<ul class="slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z">
		<li class="visible">
			<div class="svg-wrapper">
				<svg viewBox="0 0 1400 800">
					<defs>
						<clipPath id="image-1">
							<path id="changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z">
						</clipPath>							
					</defs>						
					<image height='100%' width="100%" clip-path="url(#image-1)" href="img/2.jpg"></image>
					<div class="slider__info">
						<p class="slider__title text">
							<span class="text__first">
								<span class="text__word">Karbokam</span>
								<span class="text__first-bg" style="background-color: #3A7E94"></span>
							</span>
						</p>
						<p class="slider__desc text">
							<span class="text__second">
								<span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>
								<span class="text__second-bg" style="background-color: #E688A1"></span>
							</span>
						</p>
					</div>
					<div class="slider__link cd-slider-navigation">
						<a href="#0" class="next-slide slider__site text">
							<span class="text__first">
								<span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>
								<span class="text__first-bg" style="background-color: #3A7E94"></span>
							</span>
						</a>
						<p class="slider__visit text">
							<span class="text__second">
								<span class="text__word">Official website</span>
								<span class="text__second-bg" style="background-color: #E688A1"></span>
							</span>
						</p>
					</div>
				</svg>
			</div> <!-- .svg-wrapper -->
		</li>
		<li>
			<div class="svg-wrapper">
				<svg viewBox="0 0 1400 800">
					<defs>
						<clipPath id="image-2">
							<path id="changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z">
						</clipPath>
					</defs>
					<image height='100%' width="100%" clip-path="url(#image-2)" href="img/1.jpg"></image>	
					<div class="slider__info">
						<p class="slider__title text">
							<span class="text__first">
								<span class="text__word">UAZ KD</span>
								<span class="text__first-bg" style="background-color: #535986"></span>
							</span>
						</p>
						<p class="slider__desc text">
							<span class="text__second">
								<span class="text__word">Authorized distributor of UAZ (Ulyanovsk Automobile <br> Plant)</span>
								<span class="text__second-bg" style="background-color: #DABDB2"></span>
							</span>
						</p>
					</div>
					<div class="slider__link cd-slider-navigation">
						<a href="#0" class="next-slide slider__site text">
							<span class="text__first">
								<span class="text__word">Visit uaz159.ru<img class="arrow" src="img/arrow.svg" alt=""></span>
								<span class="text__first-bg" style="background-color: #535986"></span>
							</span>
						</a>
						<p class="slider__visit text">
							<span class="text__second">
								<span class="text__word">Official website</span>
								<span class="text__second-bg" style="background-color: #DABDB2"></span>
							</span>
						</p>
					</div>				
				</svg>
			</div> <!-- .svg-wrapper -->
		</li>
		<li>
			<div class="svg-wrapper">
				<svg viewBox="0 0 1400 800">
					<defs>
						<clipPath id="image-3">
							<path id="changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z">
						</clipPath>
					</defs>
					<image height='100%' width="100%" clip-path="url(#image-3)" href="img/3.jpg"></image>	
					<div class="slider__info">
						<p class="slider__title text">
							<span class="text__first">
								<span class="text__word">Karbokam</span>
								<span class="text__first-bg" style="background-color: #1ABDFE"></span>
							</span>
						</p>
						<p class="slider__desc text">
							<span class="text__second">
								<span class="text__word">Production of technical carboxymethyl cellulose <br> (CMC) and polyanionic cellulose (PAC)</span>
								<span class="text__second-bg" style="background-color: #CB1537"></span>
							</span>
						</p>
					</div>
					<div class="slider__link cd-slider-navigation">
						<a href="#0" class="next-slide slider__site text">
							<span class="text__first">
								<span class="text__word">Visit karbokam.ru <img class="arrow" src="img/arrow.svg" alt=""></span>
								<span class="text__first-bg" style="background-color: #1ABDFE"></span>
							</span>
						</a>
						<p class="slider__visit text">
							<span class="text__second">
								<span class="text__word">Official website</span>
								<span class="text__second-bg" style="background-color: #CB1537"></span>
							</span>
						</p>
					</div>			
				</svg>
			</div> <!-- .svg-wrapper -->
		</li>
	</ul> <!-- .slider -->
	<ol class="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 2</em></a></li>
	  <!-- other list items here -->
   </ol> <!-- .slider-controls -->
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片头像上传 带标题的焦点图 文字提示框 文件上传 带缩略图的幻灯片 带简介的焦点图 提示框/弹出层 文本框 图片轮播 layer 下拉框 自动滚动图片轮播 lightbox 复选 马赛克幻灯片 单选 Tooltip工具提示框 全屏焦点图 登录框 浮动提示框 注册框 html5弹窗动画 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 flash焦点图 弹出层拖动 窗口提示框 切换按钮 form表单 焦点图幻灯片

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到