featured
Circle Crossing Automatic as a Gif Effect With CSS
Hi Friends,
This blog is indented for you all to learn and use CSS to make sharp effect like a gif image. We’re going to create effects using CSS3 which were earlier possible by using only jquery. So here we’ve mentioned steps to create effects for website loader without using any image. By specifying the animation on the element
itself, you define the animation to occur in any site as like a site loader. You may change it
as your way.
Also see the effect live on this link - http://mrsinghcafe.com/Effect/
<div class="content">
<div class="bel-container color1 bel-container-1"><span
class="bel"></span></div>
<div class="bel-container color2 bel-container-2"><span
class="bel"></span></div>
<div class="bel-container color3 bel-container-3"><span
class="bel"></span></div>
<div class="bel-container color1 bel-container-4"><span
class="bel"></span></div>
<div class="bel-container color2 bel-container-5"><span
class="bel"></span></div>
<div class="bel-container color3 bel-container-6"><span
class="bel"></span></div>
<div class="bel-container color1 bel-container-7"><span
class="bel"></span></div>
<div class="bel-container color2 bel-container-8"><span
class="bel"></span></div>
<div class="bel-container color3 bel-container-9"><span
class="bel"></span></div>
<div class="bel-container color1 bel-container-10"><span
class="bel"></span></div>
<div class="bel-container color2 bel-container-11"><span
class="bel"></span></div>
<div class="bel-container color3 bel-container-12"><span
class="bel"></span></div>
<div class="bel-container color1 bel-container-13"><span
class="bel"></span></div>
<div class="bel-container color2 bel-container-14"><span
class="bel"></span></div>
<div class="bel-container color3 bel-container-15"><span
class="bel"></span></div>
</div>
CSS :-
body {
background-color: #141414;
margin: 0;
padding: 0;
height: 100%;
font-family: "Montserrat";
}
.content {
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.inspiration {
font-size: 14px;
text-align: center;
color: #d0d0d0;
position: absolute;
bottom: 10px;
width: 100%;
}
a {
color: rgba(255,214,70, 1);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: rgba(203,102,43,1);
}
.circles .bel {
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
}
.circles .content {
-webkit-animation: rotateContent 25s linear
infinite;
animation: rotateContent 25s linear
infinite;
}
.bel-container {
position: absolute;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -5px;
}
.bel-container .bel {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
}
.bel-container.color1 .bel{
background: rgba(255,214,70, 1);
}
.bel-container.color2 .bel{
background: rgba(203,102,43,1);
}
.bel-container.color3 .bel{
background: rgba(80,149,144,1);
}
.bel-container.color4 .bel{
background: rgba(98,64,146, 1);
}
.bel-container.color1 .bel{
-webkit-animation: movingFirstColor 2.5s
ease-in-out infinite alternate;
animation: movingFirstColor 2.5s
ease-in-out infinite alternate;
}
.bel-container.color2 .bel{
-webkit-animation: movingSecondColor 2.5s
ease-in-out infinite alternate;
animation: movingSecondColor 2.5s
ease-in-out infinite alternate;
}
.bel-container.color3 .bel{
-webkit-animation: movingThirdColor 2.5s
ease-in-out infinite alternate;
animation: movingThirdColor 2.5s ease-in-out
infinite alternate;
}
.bel-container-2 {
-webkit-transform: rotate(24deg);
transform: rotate(24deg);
}
.bel-container-3 {
-webkit-transform: rotate(48deg);
transform: rotate(48deg);
}
.bel-container-4 {
-webkit-transform: rotate(72deg);
transform: rotate(72deg);
}
.bel-container-5 {
-webkit-transform: rotate(96deg);
transform: rotate(96deg);
}
.bel-container-6 {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
.bel-container-7 {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
.bel-container-8 {
-webkit-transform: rotate(168deg);
transform: rotate(168deg);
}
.bel-container-9 {
-webkit-transform: rotate(192deg);
transform: rotate(192deg);
}
.bel-container-10 {
-webkit-transform: rotate(216deg);
transform: rotate(216deg);
}
.bel-container-11 {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
.bel-container-12 {
-webkit-transform: rotate(264deg);
transform: rotate(264deg);
}
.bel-container-13 {
-webkit-transform: rotate(288deg);
transform: rotate(288deg);
}
.bel-container-14 {
-webkit-transform: rotate(312deg);
transform: rotate(312deg);
}
.bel-container-15 {
-webkit-transform: rotate(336deg);
transform: rotate(336deg);
}
.circles .bel-container-2 .bel{
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.circles .bel-container-3 .bel{
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.circles .bel-container-4 .bel{
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.circles .bel-container-5 .bel {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.circles .bel-container-6 .bel {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.circles .bel-container-7 .bel {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.circles .bel-container-8 .bel {
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.circles .bel-container-9 .bel {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.circles .bel-container-10 .bel {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.circles .bel-container-11 .bel {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.circles .bel-container-12 .bel {
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.circles .bel-container-13 .bel {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.circles .bel-container-14 .bel {
-webkit-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.circles .bel-container-15 .bel {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s;
}
@-webkit-keyframes movingFirstColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(255,214,70,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
}
@keyframes movingFirstColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(255,214,70,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(255,214,70,1);
}
}
@-webkit-keyframes movingSecondColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(203,102,43,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
}
@keyframes movingSecondColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(203,102,43,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(203,102,43,1);
}
}
@-webkit-keyframes movingThirdColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(80,149,144,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
}
@keyframes movingThirdColor {
0% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
33% {
-webkit-transform: translate3D(-100px,0,0);
transform: translate3D(-100px,0,0);
width: 10px;
opacity: 1;
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
50% {
width: 30px;
opacity: 0.7;
box-shadow: 3px 0px 5px 0px
rgba(80,149,144,1);
}
66% {
-webkit-transform: translate3D(100px, 0,
0);
transform: translate3D(100px, 0, 0);
width: 10px;
box-shadow: 0px 0px 0px 0px rgba(80,149,144,1);
}
100% {
width: 10px;
opacity: 1;
-webkit-transform: translate3D(100px,0,0);
transform: translate3D(100px,0,0);
box-shadow: 0px 0px 0px 0px
rgba(80,149,144,1);
}
}
@-webkit-keyframes rotateContent {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotateContent {
from {
-webkit-transform: rotate(0);
transform: rotate(0);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
!-----------------------------------------HunterTech-----------------------------------------------!Team
www.bel-technology.com
0 comments