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

jQuery和CSS3添加到购物车特效代码

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

以下是 jQuery和CSS3添加到购物车特效代码 的示例演示效果:

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

部分效果截图:

jQuery和CSS3添加到购物车特效代码

HTML代码(index.html):

<!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>jQuery和CSS3添加到购物车特效</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<main>
	<h1>点击添加到购物车</h1>
	<a href="#0" class="cd-add-to-cart" data-price="25.99">添加到购物车</a>
</main>
<div class="cd-cart-container empty">
	<a href="#0" class="cd-cart-trigger">
		Cart
		<ul class="count"> <!-- cart items count -->
			<li>0</li>
			<li>0</li>
		</ul> <!-- .count -->
	</a>

	<div class="cd-cart">
		<div class="wrapper">
			<header>
				<h2>Cart</h2>
				<span class="undo">Item removed. <a href="#0">Undo</a></span>
			</header>
			
			<div class="body">
				<ul>
					<!-- products added to the cart will be inserted here using JavaScript -->
				</ul>
			</div>

			<footer>
				<a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
			</footer>
		</div>
	</div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	var cartWrapper = $('.cd-cart-container');
	//product id - you don't need a counter in your real project but you can use your real product idvar productId = 0;
	if( cartWrapper.length > 0 ){
	//store jQuery objectsvar cartBody = cartWrapper.find('.body')var cartList = cartBody.find('ul').eq(0);
	var cartTotal = cartWrapper.find('.checkout').find('span');
	var cartTrigger = cartWrapper.children('.cd-cart-trigger');
	var cartCount = cartTrigger.children('.count')var addToCartBtn = $('.cd-add-to-cart');
	var undo = cartWrapper.find('.undo');
	var undoTimeoutId;
	//add product to cartaddToCartBtn.on('click',function(event){
	event.preventDefault();
	addToCart($(this));
}
);
	//open/close cartcartTrigger.on('click',function(event){
	event.preventDefault();
	toggleCart();
}
);
	//close cart when clicking on the .cd-cart-container::before (bg layer)cartWrapper.on('click',function(event){
	if( $(event.target).is($(this)) ) toggleCart(true);
}
);
	//delete an item from the cartcartList.on('click','.delete-item',function(event){
	event.preventDefault();
	removeProduct($(event.target).parents('.product'));
}
);
	//update item quantitycartList.on('change','select',function(event){
	quickUpdateCart();
}
);
	//reinsert item deleted from the cartundo.on('click','a',function(event){
	clearInterval(undoTimeoutId);
	event.preventDefault();
	cartList.find('.deleted').addClass('undo-deleted').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){
	$(this).off('webkitAnimationEnd oanimationend msAnimationEnd animationend').removeClass('deleted undo-deleted').removeAttr('style');
	quickUpdateCart();
}
);
	undo.removeClass('visible');
}
);
}
function toggleCart(bool){
	var cartIsOpen = ( typeof bool === 'undefined' ) ? cartWrapper.hasClass('cart-open'):bool;
	if( cartIsOpen ){
	cartWrapper.removeClass('cart-open');
	//reset undoclearInterval(undoTimeoutId);
	undo.removeClass('visible');
	cartList.find('.deleted').remove();
	setTimeout(function(){
	cartBody.scrollTop(0);
	//check if cart empty to hide itif( Number(cartCount.find('li').eq(0).text()) == 0) cartWrapper.addClass('empty');
}
,500);
}
else{
	cartWrapper.addClass('cart-open');
}
}
function addToCart(trigger){
	var cartIsEmpty = cartWrapper.hasClass('empty');
	//update cart product listaddProduct();
	//update number of itemsupdateCartCount(cartIsEmpty);
	//update total priceupdateCartTotal(trigger.data('price'),true);
	//show cartcartWrapper.removeClass('empty');
}
function addProduct(){
	//this is just a product placeholder//you should insert an item with the selected product info//replace productId,productName,price and url with your real product infoproductId = productId + 1;
	var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
	cartList.prepend(productAdded);
}
function removeProduct(product){
	clearInterval(undoTimeoutId);
	cartList.find('.deleted').remove();
	var topPosition = product.offset().top - cartBody.children('ul').offset().top,productQuantity = Number(product.find('.quantity').find('select').val()),productTotPrice = Number(product.find('.price').text().replace('$','')) * productQuantity;
	product.css('top',topPosition+'px').addClass('deleted');
	//update items count + total priceupdateCartTotal(productTotPrice,false);
	updateCartCount(true,-productQuantity);
	undo.addClass('visible');
	//wait 8sec before completely remove the itemundoTimeoutId = setTimeout(function(){
	undo.removeClass('visible');
	cartList.find('.deleted').remove();
}
,8000);
}
function quickUpdateCart(){
	var quantity = 0;
	var price = 0;
	cartList.children('li:not(.deleted)').each(function(){
	var singleQuantity = Number($(this).find('select').val());
	quantity = quantity + singleQuantity;
	price = price + singleQuantity*Number($(this).find('.price').text().replace('$',''));
}
);
	cartTotal.text(price.toFixed(2));
	cartCount.find('li').eq(0).text(quantity);
	cartCount.find('li').eq(1).text(quantity+1);
}
function updateCartCount(emptyCart,quantity){
	if( typeof quantity === 'undefined' ){
	var actual = Number(cartCount.find('li').eq(0).text()) + 1;
	var next = actual + 1;
	if( emptyCart ){
	cartCount.find('li').eq(0).text(actual);
	cartCount.find('li').eq(1).text(next);
}
else{
	cartCount.addClass('update-count');
	setTimeout(function(){
	cartCount.find('li').eq(0).text(actual);
}
,150);
	setTimeout(function(){
	cartCount.removeClass('update-count');
}
,200);
	setTimeout(function(){
	cartCount.find('li').eq(1).text(next);
}
,230);
}
}
else{
	var actual = Number(cartCount.find('li').eq(0).text()) + quantity;
	var next = actual + 1;
	cartCount.find('li').eq(0).text(actual);
	cartCount.find('li').eq(1).text(next);
}
}
function updateCartTotal(price,bool){
	bool ? cartTotal.text( (Number(cartTotal.text()) + price).toFixed(2) ):cartTotal.text( (Number(cartTotal.text()) - price).toFixed(2) );
}
}
);

CSS代码(style.css):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{font-size:1.6rem;font-family:"Source Sans Pro",sans-serif;color:#2b3e51;background-color:#ecf0f1;}
a{color:#2c97de;text-decoration:none;}
img{max-width:100%;}
main{text-align:center;padding:2em 5%;}
h1{font-size:2rem;padding:3em 0 .8em;}
@media only screen and (min-width:768px){h1{font-size:3.2rem;}
}
.cd-add-to-cart{display:inline-block;padding:1.2em 1.8em;background:#2c97de;border-radius:50em;text-transform:uppercase;color:#ffffff;font-weight:700;letter-spacing:.1em;box-shadow:0 2px 10px rgba(0,0,0,0.2);-webkit-transition:all .2s;transition:all .2s;}
.cd-add-to-cart:hover{background:#42a2e1;}
.cd-add-to-cart:active{-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}
/* --------------------------------Main Components-------------------------------- */
.cd-cart-container::before{/* dark bg layer visible when the cart is open */
 content:'';position:fixed;z-index:1;height:100vh;width:100vw;top:0;left:0;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s;}
.cd-cart-container.cart-open::before{opacity:1;visibility:visible;}
.cd-cart-trigger,.cd-cart{position:fixed;bottom:20px;right:5%;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;/* Force Hardware Acceleration in WebKit */
 -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;will-change:transform;backface-visibility:hidden;}
.empty .cd-cart-trigger,.empty.cd-cart{/* hide cart */
 -webkit-transform:translateY(150px);-ms-transform:translateY(150px);transform:translateY(150px);}
@media only screen and (min-width:1170px){.cd-cart-trigger,.cd-cart{bottom:40px;}
}
.cd-cart-trigger{/* button that triggers the cart content */
 z-index:3;height:72px;width:72px;/* replace text with image */
 text-indent:100%;color:transparent;white-space:nowrap;}
.cd-cart-trigger::after,.cd-cart-trigger::before{/* used to create the cart/'X' icon */
 content:'';position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);height:100%;width:100%;background:url(../img/cd-icons-cart-close.svg) no-repeat 0 0;-webkit-transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,-webkit-transform .2s;transition:opacity .2s,transform .2s;transition:opacity .2s,transform .2s,-webkit-transform .2s;}
.cd-cart-trigger::after{/* 'X' icon */
 background-position:-72px 0;opacity:0;-webkit-transform:translateX(-50%) translateY(-50%) rotate(90deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(90deg);transform:translateX(-50%) translateY(-50%) rotate(90deg);}
.cart-open .cd-cart-trigger::before{opacity:0;}
.cart-open .cd-cart-trigger::after{opacity:1;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
.cd-cart-trigger .count{/* number of items indicator */
 position:absolute;top:-10px;right:-10px;height:28px;width:28px;background:#e94b35;color:#ffffff;font-size:1.5rem;font-weight:bold;border-radius:50%;text-indent:0;-webkit-transition:-webkit-transform .2s .5s;transition:-webkit-transform .2s .5s;transition:transform .2s .5s;transition:transform .2s .5s,-webkit-transform .2s .5s;}
.cd-cart-trigger .count li{/* this is the number of items in the cart */
 position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
.cd-cart-trigger .count li:last-of-type{visibility:hidden;}
.cd-cart-trigger .count.update-count li:last-of-type{-webkit-animation:cd-qty-enter .15s;animation:cd-qty-enter .15s;-webkit-animation-direction:forwards;animation-direction:forwards;}
.cd-cart-trigger .count.update-count li:first-of-type{-webkit-animation:cd-qty-leave .15s;animation:cd-qty-leave .15s;-webkit-animation-direction:forwards;animation-direction:forwards;}
.cart-open .cd-cart-trigger .count{-webkit-transition:-webkit-transform .2s 0s;transition:-webkit-transform .2s 0s;transition:transform .2s 0s;transition:transform .2s 0s,-webkit-transform .2s 0s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);}
.empty .cd-cart-trigger .count{/* fix bug - when cart is empty,do not animate count */
 -webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.cd-cart-trigger:hover + div .wrapper{box-shadow:0 6px 40px rgba(0,0,0,0.3);}
.cart-open .cd-cart-trigger:hover + div .wrapper{box-shadow:0 4px 30px rgba(0,0,0,0.17);}
.cd-cart{/* cart content */
 z-index:2;width:90%;max-width:440px;height:400px;max-height:90%;pointer-events:none;}
.cd-cart .wrapper{position:absolute;bottom:0;right:0;z-index:2;overflow:hidden;height:72px;width:72px;border-radius:6px;-webkit-transition:height .4s .1s,width .4s .1s,box-shadow .3s;transition:height .4s .1s,width .4s .1s,box-shadow .3s;-webkit-transition-timing-function:cubic-bezier(0.67,0.17,0.32,0.95);transition-timing-function:cubic-bezier(0.67,0.17,0.32,0.95);background:#ffffff;box-shadow:0 4px 30px rgba(0,0,0,0.17);pointer-events:auto;}
.cd-cart header,.cd-cart footer{position:absolute;z-index:2;left:0;width:100%;}
.cd-cart header,.cd-cart .body{opacity:0;}
.cd-cart header{top:0;border-radius:6px 6px 0 0;padding:0 1.4em;height:40px;line-height:40px;background-color:#ffffff;-webkit-transition:opacity .2s 0s;transition:opacity .2s 0s;border-bottom:1px solid #e6e6e6;}
.cd-cart header::after{clear:both;content:"";display:block;}
.cd-cart footer{bottom:0;border-radius:0 0 6px 6px;box-shadow:0 -2px 20px rgba(0,0,0,0.15);background:#ffffff;}
.cd-cart h2{text-transform:uppercase;display:inline-block;font-size:1.4rem;font-weight:700;letter-spacing:.1em;}
.cd-cart .undo{float:right;font-size:1.2rem;opacity:0;visibility:hidden;-webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s;color:#808b97;}
.cd-cart .undo a{text-decoration:underline;color:#2b3e51;}
.cd-cart .undo a:hover{color:#2c97de;}
.cd-cart .undo.visible{opacity:1;visibility:visible;}
.cd-cart .checkout{display:block;height:72px;line-height:72px;margin-right:72px;background:#2c97de;color:rgba(255,255,255,0);text-align:center;font-size:1.8rem;font-weight:600;-webkit-transition:all .2s 0s;transition:all .2s 0s;}
.cd-cart .checkout:hover{background:#399ee0;}
.cd-cart .checkout em{position:relative;display:inline-block;-webkit-transform:translateX(40px);-ms-transform:translateX(40px);transform:translateX(40px);-webkit-transition:-webkit-transform 0s .2s;transition:-webkit-transform 0s .2s;transition:transform 0s .2s;transition:transform 0s .2s,-webkit-transform 0s .2s;}
.cd-cart .checkout em::after{position:absolute;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;content:'';height:24px;width:24px;background:url(../img/cd-icon-arrow-next.svg) no-repeat center center;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s;}
.cd-cart .body{position:relative;z-index:1;height:calc(100% - 40px);padding:20px 0 10px;margin:40px 0 10px;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-transition:opacity .2s;transition:opacity .2s;}
.cd-cart .body ul{overflow:hidden;padding:0 1.4em;position:relative;padding-bottom:90px;}
.cd-cart .body li{position:relative;opacity:0;-webkit-transform:translateX(80px);-ms-transform:translateX(80px);transform:translateX(80px);-webkit-transition:opacity 0s .2s,-webkit-transform 0s .2s;transition:opacity 0s .2s,-webkit-transform 0s .2s;transition:opacity 0s .2s,transform 0s .2s;transition:opacity 0s .2s,transform 0s .2s,-webkit-transform 0s .2s;}
.cd-cart .body li::after{clear:both;content:"";display:block;}
.cd-cart .body li:not(:last-of-type){margin-bottom:20px;}
.cd-cart .body li.deleted{/* this class is added to an item when it is removed form the cart */
 position:absolute;left:1.4em;width:calc(100% - 2.8em);opacity:0;-webkit-animation:cd-item-slide-out .3s forwards;animation:cd-item-slide-out .3s forwards;}
.cd-cart .body li.deleted.undo-deleted{/* used to reinsert an item deleted from the cart when user clicks 'Undo' */
 -webkit-animation:cd-item-slide-in .3s forwards;animation:cd-item-slide-in .3s forwards;}
.cd-cart .body li.deleted + li{-webkit-animation:cd-item-move-up-mobile .3s;animation:cd-item-move-up-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.cd-cart .body li.undo-deleted + li{-webkit-animation:cd-item-move-down-mobile .3s;animation:cd-item-move-down-mobile .3s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}
.cd-cart .product-image{display:inline-block;float:left;/* the image height determines the height of the list item - in this case height = width */
 width:50px;}
.cd-cart .product-image img{display:block;}
.cd-cart .product-details{position:relative;display:inline-block;float:right;width:calc( 100% - 50px);padding:0.3em 0 0 0.5em;}
.cd-cart .product-details::after{clear:both;content:"";display:block;}
.cd-cart h3,.cd-cart .price{font-weight:bold;}
.cd-cart h3{width:70%;float:left;/* truncate title with dots if too long */
 white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.cd-cart h3 a{color:#2b3e51;}
.cd-cart h3 a:hover{color:#2c97de;}
.cd-cart .price{float:right;width:30%;text-align:right;}
.cd-cart .actions{font-size:1.4rem;height:1.6em;line-height:1.6em;}
.cd-cart .actions::after{clear:both;content:"";display:block;}
.cd-cart .delete-item,.cd-cart .quantity{float:left;color:#808b97;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-cart .delete-item{margin-right:1em;}
.cd-cart .delete-item:hover{color:#e94b35;}
.cd-cart .quantity label{display:inline-block;margin-right:.3em;}
.cd-cart .select{position:relative;}
.cd-cart .select::after{/* switcher arrow for select element */
 content:'';position:absolute;z-index:1;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:12px;height:12px;background:url(../img/cd-icon-select.svg) no-repeat center center;pointer-events:none;}
.cd-cart select{position:relative;padding:0 1em 0 0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;border-radius:0;font-size:1.4rem;margin:0;color:#808b97;}
.cd-cart select:focus{outline:none;color:#2b3e51;box-shadow:0 1px 0 currentColor;}
.cd-cart select::-ms-expand{/* hide default select arrow on IE */
 display:none;}
.cart-open .cd-cart .wrapper{height:100%;width:100%;-webkit-transition-delay:0s;transition-delay:0s;}
.cart-open .cd-cart header,.cart-open .cd-cart .body{opacity:1;}
.cart-open .cd-cart header{-webkit-transition:opacity .2s .2s;transition:opacity .2s .2s;}
.cart-open .cd-cart .body{-webkit-transition:opacity 0s;transition:opacity 0s;}
.cart-open .cd-cart .body li{-webkit-transition:opacity .3s .2s,-webkit-transform .3s .2s;transition:opacity .3s .2s,-webkit-transform .3s .2s;transition:transform .3s .2s,opacity .3s .2s;transition:transform .3s .2s,opacity .3s .2s,-webkit-transform .3s .2s;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
.cart-open .cd-cart .body li:nth-of-type(2){-webkit-transition-duration:.4s;transition-duration:.4s;}
.cart-open .cd-cart .body li:nth-of-type(3){-webkit-transition-duration:.5s;transition-duration:.5s;}
.cart-open .cd-cart .body li:nth-of-type(4),.cart-open .cd-cart .body li:nth-of-type(5){-webkit-transition-duration:.55s;transition-duration:.55s;}
.cart-open .cd-cart .checkout{color:#ffffff;-webkit-transition:color .2s .3s;transition:color .2s .3s;}
.cart-open .cd-cart .checkout em{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-transition:padding .2s 0s,-webkit-transform .2s .3s;transition:padding .2s 0s,-webkit-transform .2s .3s;transition:transform .2s .3s,padding .2s 0s;transition:transform .2s .3s,padding .2s 0s,-webkit-transform .2s .3s;}
.cart-open .cd-cart .checkout:hover em{padding-right:30px;}
.cart-open .cd-cart .checkout:hover em::after{opacity:1;}
@media only screen and (min-width:768px){.cd-cart .body li:not(:last-of-type){margin-bottom:14px;}
.cd-cart .body li.deleted + li{-webkit-animation:cd-item-move-up .3s;animation:cd-item-move-up .3s;}
.cd-cart .body li.undo-deleted + li{-webkit-animation:cd-item-move-down .3s;animation:cd-item-move-down .3s;}
.cd-cart .checkout{font-size:2.4rem;}
.cd-cart .product-image{width:90px;}
.cd-cart .product-details{padding:1.4em 0 0 1em;width:calc( 100% - 90px);}
.cd-cart h3,.cd-cart .price{font-size:1.8rem;}
}
@-webkit-keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);}
100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
}
@keyframes cd-qty-enter{0%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(0);transform:translateX(-50%) translateY(0);}
100%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
}
@-webkit-keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);}
}
@keyframes cd-qty-leave{0%{opacity:1;visibility:visible;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);}
100%{opacity:0;visibility:hidden;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);}
}
@-webkit-keyframes cd-item-move-up-mobile{0%{padding-top:70px;}
100%{padding-top:0px;}
}
@keyframes cd-item-move-up-mobile{0%{padding-top:70px;}
100%{padding-top:0px;}
}
@-webkit-keyframes cd-item-move-up{0%{padding-top:104px;}
100%{padding-top:0px;}
}
@keyframes cd-item-move-up{0%{padding-top:104px;}
100%{padding-top:0px;}
}
@-webkit-keyframes cd-item-move-down-mobile{0%{padding-top:0px;}
100%{padding-top:70px;}
}
@keyframes cd-item-move-down-mobile{0%{padding-top:0px;}
100%{padding-top:70px;}
}
@-webkit-keyframes cd-item-move-down{0%{padding-top:0px;}
100%{padding-top:104px;}
}
@keyframes cd-item-move-down{0%{padding-top:0px;}
100%{padding-top:104px;}
}
@-webkit-keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0;}
}
@keyframes cd-item-slide-out{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
100%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0;}
}
@-webkit-keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0;}
}
@keyframes cd-item-slide-in{100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1;}
0%{-webkit-transform:translateX(80px);transform:translateX(80px);opacity:0;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
39.09 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
39.09 KB
立即下载
武欢
了解
打赏作者 鼓励作者
Html 动画效果2
最新结算
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
打赏文章