经验分享程序开发文档资料数据资源其它资源

仿iPhone拍照快门效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 仿iPhone拍照快门效果特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

仿iPhone拍照快门效果特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <title>HTML5 SVG仿iPhone拍照快门效果</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>

<body>

  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'>

    <div class="main-content">

<div class="mask">

<svg width="100%" height="100%" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

<defs>
    <filter id="shadow1">
    <feGaussianBlur stdDeviation="2"  in="SourceAlpha" />
  <feOffset dx="2" dy="1" result="offsetblur" mode="multiply"/>
  </filter>
   <filter id="shadow2">
    <feGaussianBlur stdDeviation="2"  in="SourceAlpha" />
  <feOffset dx="-2" dy="-1" result="offsetblur" mode="multiply"/>
  </filter>
</defs>

<g><path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z" filter="url(#shadow1)"/></g>

<g><path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z" filter="url(#shadow2)"/></g>

<g id="mask">
	<path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z"/>
</g>

<g class="border1">
	<polygon points="199.49,14.678 156.518,39.627 149.93,28.684 199.587,0.015 322.441,70.946 315.668,81.778" />
	<polygon points="156.867,38.268 151.312,29.041 199.587,1.17 321.044,71.294 315.332,80.429 199.489,13.522"   />
</g>

<g class="border2">
	<polygon points="359.598,248.5 359.598,107.141 313.935,80.777 320.708,69.945 372.365,99.769 372.365,248.5"/>
	<polygon points="315.332,80.429 360.598,106.564 360.598,247.5 371.365,247.5 371.365,100.346 321.044,71.294"/>
</g>

<g class="border3">
	<polygon points="238.784,361.657 359.598,291.906 359.598,246.5 372.365,246.5 372.365,299.277 243.778,373.516"/>
	<polygon points="360.598,247.5 360.598,292.483 240.048,362.082 244.26,372.084 371.365,298.7 371.365,247.5"/>
</g>

<g class="border4">
	<polygon points="73.809,326.412 81.666,316.204 199.486,384.732 240.526,360.641 245.523,372.509 199.587,399.03"/>
	<polygon points="240.048,362.082 199.489,385.89 81.922,317.51 75.297,326.117 199.587,397.876 244.26,372.084"/>
</g>

<g class="border5">
	<polygon points="26.809,299.277 26.809,158.045 39.576,157.452 39.576,291.906 83.411,317.215 75.556,327.421"/>
	<polygon points="81.922,317.51 38.576,292.483 38.576,158.5 27.809,159 27.809,298.7 75.297,326.117"/>
</g>

<g class="border6">
	<polygon points="26.809,99.769 151.662,27.684 158.249,38.625 39.253,107.19 39.582,159.454 26.809,160.047"/>
	<polygon points="38.576,158.5 38.25,106.614 156.867,38.268 151.312,29.041 27.809,100.346 27.809,159"/>
</g>

</svg>

</div>

<div class="shutter-area">

<div class="text">

<h3>Dan's</h3>

<h2>SHUTTER</h2>

<h1>TEST</h1>

</div>

<div class="shutter no-1">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg>

<!--<svg width="200%" height="200%" viewBox="0 0 184.451 186.986" enable-background="new 0 0 184.451 186.986" xml:space="preserve">
<path d="M184.451,94.943V0H24.413C8.867,28.493,0,61.293,0,96.208c0,32.716,7.78,63.578,21.55,90.778,C55.825,132.013,115.928,95.426,184.451,94.943z" />
</svg>-->

</div>

<div class="shutter no-2">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>

<div class="shutter no-3">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>

<div class="shutter no-4">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>

<div class="shutter no-5">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>

<div class="shutter no-6">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778

	C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>

</div><!--shutter-area-->

</div><!--main-content-->

  <script src='js/TweenMax.min.js'></script>

  <script src="js/index.js"></script> 
</body>
</html>

JS代码(index.js):

// JavaScript Documentvar shutterAll = document.getElementsByClassName('shutter');
	var shutter01 = document.getElementsByClassName('no-1');
	var shutter02 = document.getElementsByClassName('no-2');
	var shutter03 = document.getElementsByClassName('no-3');
	var shutter04 = document.getElementsByClassName('no-4');
	var shutter05 = document.getElementsByClassName('no-5');
	var shutter06 = document.getElementsByClassName('no-6');
	//ResetsTweenLite.to(shutter01,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter02,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter03,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter04,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter05,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter06,0,{
	transformOrigin:"150% 0%"}
);
	TweenLite.to(shutter02,0,{
	rotationZ:60}
);
	TweenLite.to(shutter03,0,{
	rotationZ:120}
);
	TweenLite.to(shutter04,0,{
	rotationZ:180}
);
	TweenLite.to(shutter05,0,{
	rotationZ:240}
);
	TweenLite.to(shutter06,0,{
	rotationZ:300}
);
	//Timelinevar masterTimeline = new TimelineMax({
	repeat:-1,yoyo:true,repeatDelay:2}
);
	var shutterAni = new TimelineMax({
}
);
	shutterAni//Fully open.to(shutter01,0.5,{
	rotationZ:"+=27"}
,"open").to(shutter02,0.5,{
	rotationZ:"+=27"}
,"open").to(shutter03,0.5,{
	rotationZ:"+=27"}
,"open").to(shutter04,0.5,{
	rotationZ:"+=27"}
,"open").to(shutter05,0.5,{
	rotationZ:"+=27"}
,"open").to(shutter06,0.5,{
	rotationZ:"+=27"}
,"open")//Closed.to(shutter01,0.5,{
	rotationZ:"-=27"}
,"close+=2").to(shutter02,0.5,{
	rotationZ:"-=27"}
,"close+=2").to(shutter03,0.5,{
	rotationZ:"-=27"}
,"close+=2").to(shutter04,0.5,{
	rotationZ:"-=27"}
,"close+=2").to(shutter05,0.5,{
	rotationZ:"-=27"}
,"close+=2").to(shutter06,0.5,{
	rotationZ:"-=27"}
,"close+=2")//half.to(shutter01,0.5,{
	rotationZ:"+=12"}
,"half").to(shutter02,0.5,{
	rotationZ:"+=12"}
,"half").to(shutter03,0.5,{
	rotationZ:"+=12"}
,"half").to(shutter04,0.5,{
	rotationZ:"+=12"}
,"half").to(shutter05,0.5,{
	rotationZ:"+=12"}
,"half").to(shutter06,0.5,{
	rotationZ:"+=12"}
,"half")//Closed.to(shutter01,0.5,{
	rotationZ:"-=12"}
,"close2").to(shutter02,0.5,{
	rotationZ:"-=12"}
,"close2").to(shutter03,0.5,{
	rotationZ:"-=12"}
,"close2").to(shutter04,0.5,{
	rotationZ:"-=12"}
,"close2").to(shutter05,0.5,{
	rotationZ:"-=12"}
,"close2").to(shutter06,0.5,{
	rotationZ:"-=12"}
,"close2")//Fully open.to(shutter01,0.5,{
	rotationZ:"+=27"}
,"open2").to(shutter02,0.5,{
	rotationZ:"+=27"}
,"open2").to(shutter03,0.5,{
	rotationZ:"+=27"}
,"open2").to(shutter04,0.5,{
	rotationZ:"+=27"}
,"open2").to(shutter05,0.5,{
	rotationZ:"+=27"}
,"open2").to(shutter06,0.5,{
	rotationZ:"+=27"}
,"open2");
	masterTimeline.add(shutterAni)

CSS代码(style.css):

@charset "UTF-8";/* CSS Document */
body{background:#2a282a;color:white;}
/*TYPE*/
h1,h2,h3,h4,h5,h6,p{text-align:center;text-shadow:3px 3px 5px #000000;}
h1{font:140px/140px 'Yanone Kaffeesatz',sans-serif;margin-top:-13px;}
h2{font:50px/50px 'Alegreya Sans SC',sans-serif;margin-bottom:-10px;}
h3{font:30px/40px 'Lobster',cursive;}
/*MAIN*/
.main-content{margin:30px auto 0;width:400px;position:relative;}
.mask{background-size:100% 100%;width:400px;height:400px;position:absolute;top:0;left:0;z-index:10;overflow:hidden;}
#mask{fill:#2a282a;}
/*SHUTTER*/
.shutter-area{width:400px;height:400px;overflow:hidden;position:absolute;background:#2b4654;background:-moz-radial-gradient(center,ellipse cover,#2b4654 0%,#2a282a 46%,#2a282a 46%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#2b4654),color-stop(46%,#2a282a),color-stop(46%,#2a282a));background:-webkit-radial-gradient(center,ellipse cover,#2b4654 0%,#2a282a 46%,#2a282a 46%);background:-o-radial-gradient(center,ellipse cover,#2b4654 0%,#2a282a 46%,#2a282a 46%);background:-ms-radial-gradient(center,ellipse cover,#2b4654 0%,#2a282a 46%,#2a282a 46%);background:radial-gradient(ellipse at center,#2b4654 0%,#2a282a 46%,#2a282a 46%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b4654',endColorstr='#2a282a',GradientType=1 );}
.shutter{width:184px;height:187px;background-size:100% 100%;position:absolute;z-index:0;}
.no-1{top:-165px;left:147px;z-index:1;}
.no-2{top:211px;left:351px;z-index:1;}
.no-3{top:575px;left:130px;z-index:1;}
.no-4{top:566px;left:-297px;z-index:1;}
.no-5{top:191px;left:-503px;z-index:2;}
.no-6{top:-175px;left:-281px;z-index:1;}
.no-1,.border1{fill:#97d17a;}
.no-2,.border2{fill:#f6c45b;}
.no-3,.border3{fill:#4aabd5;}
.no-4,.border4{fill:#aaced0;}
.no-5,.border5{fill:#de6d52;}
.no-6,.border6{fill:#f5e448;}
/*TEXT*/
.text{margin-top:90px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
33.28 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
33.28 KB
立即下载
元巧香
了解
打赏作者 鼓励作者
html5特效
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章