jQuery礼物贺卡编辑发送特效代码下载


jQuery礼物贺卡编辑发送特效代码下载
jQuery礼物贺卡编辑发送特效代码下载以及礼物贺卡、编辑发送等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/jquery.min.js'></script>
<script src='js/tilt.jquery.min.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<div class="wrap"> <!--main container-->
	<div class="gift-card-box"> <!--white area which hold the card and UI-->
		<div class="confirmation"> <!--section only seen after card is sent-->
			<!--the ring and check mark-->
			<svg class="all-good" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
  <circle class="path circle" fill="none" stroke="#777" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1">
  <polyline class="path check" fill="none" stroke="#777" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 ">
</svg>
			<!--message to say say it was successful-->
			<p class="success">已发送成功!</p>
		</div>
		<!--card iteself - parent container-->
		<div class="card">
			<!--design for the front card. Bg image is in the css-->
			<div class="front">
				<!--logo container-->
				<div class="front-logo-cnt">
					<!--apple logo-->
					<svg class="apple-logo" xmlns="http://www.w3.org/2000/svg" width="256" height="315" viewBox="0 0 256 315">
  <path fill="#fff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249">
</svg>
					<!--p class="card-description">$100</p-->
				</div>
			</div>
			<!--design for the back of the card-->
			<div class="back">
				<!--input fields-->
				<form class="form" autocomplete="off" novalidate>
					<fieldset>
						<label for="card-number">发送邮箱:</label>
						<input type="text" id="card-number" class="input-cart-number" maxlength="30" autofocus />
					</fieldset>
					<fieldset>
						<label for="card-holder">接收邮箱:</label>
						<input type="text" id="card-holder" class="input-cart-number" maxlength="30" />
					</fieldset>
					<fieldset>
						<label for="card-holder">内容:</label>
						<input type="text" id="card-holder" class="input-cart-number input-cart-number--lg" maxlength="80" />
					</fieldset>
				</form>
			</div>
		</div>
		<!--buttons parent-->
		<div class="button-cnt">
			<!--initial button-->
			<button id="btn-card-flip" class="primary-cta">发送邮件</button>
			<!--the two buttons which appear once card is flipped-->
			<button id="close" class="secondary-cta secondary-cta--done hidden">保存</button>
			<button id="btn-card-send" class="secondary-cta secondary-cta--send hidden">发送</button>
		</div>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 10px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章