સીએસએસ સાથે એનિમેટેડ બરફ

તેમ છતાં એક પૃષ્ઠ પર એનિમેટેડ બરફ મૂકો, તે અમારા તરફથી અથવા ક્લાયંટનું હોય, એવું લાગે છે કે તે કોઈ પણ વસ્તુ કરતાં જૂની ડિઝાઇન પ્રેક્ટિસ જેવું લાગે છે, સત્ય એ છે કે એનિમેશન અમે આ પ્રસંગે રજૂ કરીએ છીએ તે ભવ્ય સમુદ્ર છે. તમને જાવાસ્ક્રિપ્ટની પણ જરૂર નથી, તે સરળ છે CSS3.

પ્રથમ વસ્તુ એક નજર છે એનિમેશન.

બહુ સારું લાગે છે ને? તેને વ્યવહારમાં મૂકવા માટે, આપણે ફક્ત સફેદ બિંદુઓથી ત્રણ છબીઓ બનાવવાની જરૂર છે અને તેમને સંપત્તિનો ઉપયોગ કરીને સજીવ કરવાની જરૂર છે @કીફ્રેમ્સ સીએસએસ 3 ની નીચે પ્રમાણે:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

વિવિધ ઉમેરવાનું વિવિધ બ્રાઉઝર્સ માટે ઉપસર્ગો, પછી આપણા શરીર માટે સ્થાપના:

body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}

જરૂરી ઉપસર્ગો પણ ઉમેરી રહ્યા છે. જોશુઆહ જોહ્ન્સનનો સૌજન્યપૂર્વક, વિગતવાર ખુલાસાઓ સાથે સંપૂર્ણ પ્રક્રિયા તેના બ્લોગ પર મળી શકે છે.

વધુ મહિતી - CSS3 radાળ જનરેટર, CSS3 radાળ જનરેટર
સોર્સ - ડિઝાઇન ઝુંપડી