যদিও একটি পৃষ্ঠায় অ্যানিমেটেড তুষার রাখুনএটি আমাদের কাছ থেকে বা ক্লায়েন্টের কাছ থেকে, এটি অন্য যে কোনও কিছুর চেয়ে পুরানো ডিজাইনের অনুশীলনের মতো মনে হয়, সত্যটি এটি অ্যানিমেশন আমরা এই উপলক্ষে উপস্থাপনা হ'ল মার্জিত সমুদ্র। এছাড়াও আপনার জাভাস্ক্রিপ্টের দরকার নেই, এটি সহজ 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 গ্রেডিয়েন্ট জেনারেটর, CSS3 গ্রেডিয়েন্ট জেনারেটর rator
উৎস - ডিজাইন শেক