5 طرح CSS برای سایت های فروشگاهی

5 طرح CSS برای سایت های فروشگاهی
The 5+ CSS loading animation provided here may help your e-commerce website’s design look good. Hope, this tutorial helpful for you.
The CSS e-commerce loading animation does not uses any images/gif to do animation, also it does not uses any library to do animation stuff. The design and animations are achieved using only CSS.
The last three CSS e-commerce loading uses font awesome icon font for icons, if you don’t know what font awesome icons are then please read this article.
دانلود سورس کد CSS
5 طرح CSS برای سایت های فروشگاهی
CSS Spinning cart wheels loading animation
The major part of the cart is drawn from adding extra element from CSS3 :before and :after property.
cart Wheels are given infinite rotation from CSS3 animation.
HTML
<div id="cart-block">
<div id="cart-body"> </div>
<div id="cart-wheel1"> </div>
<div id="cart-wheel2"> </div>
</div>
CSS
#cart-block{
position:relative;
width:90px;
}
#cart-body{
border-top: 50px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
height: 0;
width: 50px;
}
#cart-body:after{
content: "";
position:absolute;
border: 0 solid transparent;
border-top: 8px solid black;
border-left: 8px solid black;
width: 10px;
height: 20px;
top:-15px;
right:-12px;
transform: rotate(30deg);
border-radius:5px;
}
#cart-body:before{
position:absolute;
content:"";
border-top: 30px solid white;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
height: 0;
width: 40px;
top:10px;
left:10px;
}
#cart-wheel1{
position:relative;
width:20px;
height:20px;
border-radius:100%;
border:3px solid #000;
background:rgba(0,0,0,0);
top:1px;
left:15px;
animation: rotation 0.5s linear infinite;
}
#cart-wheel1:after{
content:"";
position:absolute;
width:20px;
height:3px;
background-color:#000;
top:8px;
}
#cart-wheel1:before{
content:"";
position:absolute;
width:3px;
height:20px;
background-color:#000;
left:8px;
}
#cart-wheel2{
position:relative;
width:20px;
height:20px;
border-radius:100%;
border:3px solid #000;
background:rgba(0,0,0,0);
top:-25px;
left:45px;
animation: rotation 0.5s linear infinite;
}
#cart-wheel2:after{
content:"";
position:absolute;
width:20px;
height:3px;
background-color:#000;
top:8px;
}
#cart-wheel2:before{
content:"";
position:absolute;
width:3px;
height:20px;
background-color:#000;
left:8px;
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
Animated CSS loading e-commerce basket
The two new bars are drawn from CSS3 :after and :before property. the transform-origin of all three bars are set to bottom to make it scale from bottom and different speed duration is applied for each bar.
HTML
<div id="basket-block">
<div id="basket-body"> </div>
<div id="basket-handle"> </div>
<div id="basket-strip"> </div>
</div>
CSS
#basket-block{
position:relative;
}
#basket-body{
position:absolute;
border-top: 50px solid black;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 50px;
padding:20px;
top:0;
left:0;
}
#basket-body:before{
position:absolute;
content:"";
width:120px;
height:20px;
border-radius:10px;
background-color:#000;
top:-60px;
left:-15px;
}
#basket-body:after{
position:absolute;
content:"";
width:90px;
height:20px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
background-color:#000;
top:-10px;
left:0px;
}
#basket-handle{
position:absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #000;
top:-60px;
left:30px;
}
#basket-handle:after{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 30px solid #fff;
top:20px;
left:-15px;
}
#basket-handle:before{
content:"";
position:absolute;
width: 5px;
height: 5px;
border-radius:100%;
top:10px;
left:-2px;
background-color:#fff;
}
#basket-strip{
position:absolute;
width: 10px;
height: 35px;
background-color:#fff;
border-radius:10px;
top:10px;
left:25px;
transform-origin:bottom;
animation: scale 1s ease infinite;
}
#basket-strip:after{
content:"";
position:absolute;
width: 10px;
height: 35px;
background-color:#fff;
border-radius:10px;
left:25px;
transform-origin:top;
animation: scale 1s ease infinite;
}
#basket-strip:before{
content:"";
position:absolute;
width: 10px;
height: 35px;
background-color:#fff;
border-radius:10px;
left:50px;
transform-origin:bottom;
animation: scale 1s ease infinite;
}
@keyframes scale {
0% {transform: scaleY(0);}
50% {transform: scaleY(1);}
100% {transform: scaleY(0);}
}
CSS hanging baskets loading animation
Uses font awesome icon for icons. An infinite rotation is applied for each icon from -30deg to 30deg.
HTML
<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>
<div class="fa fa-shopping-basket icon-basket"></div>
CSS
.icon-basket{
font-size:36px;
color:black;
transform-origin:top;
animation: rotation 2s ease infinite;
}
@keyframes rotation {
0% {transform: rotate(-30deg);}
50% {transform: rotate(30deg);}
100% {transform: rotate(-30deg);}
}
Pure CSS cart glow animation
Uses font awesome icon for icons. Icon is scaled from 0 to 1 and vice-versa with opacity.
HTML
<div class="fa fa-shopping-cart icon-cart"></div>
CSS
.icon-cart{
font-size:70px;
color:#000;
animation: scale 2s ease infinite;
}
@keyframes scale {
0% {transform: scale(0.5);opacity:0;}
50% {transform: scale(1);opacity:1;}
100% {transform: scale(0.5);opacity:0;}
}
5 طرح CSS برای سایت های فروشگاهی
E-commerce basket CSS 3D rotation loading animation
Used font awesome for icon. Both Z and Y axis given rotation from 0 to 360 and vice-versa infinately.
HTML
<div class="fa fa-shopping-basket fa-5x icon-credit"></div>
CSS
.icon-credit{
font-size:70px;
color:#000;
animation: scale 3s ease infinite;
}
@keyframes scale {
0% {transform: rotateZ(0deg);transform: rotateY(0deg);}
50% {transform: rotateZ(360deg);transform:rotateY(360deg);}
100% {transform: rotateZ(0deg);transform:rotateY(0deg);}
}