হ্যালো বন্ধুরা আশা করি সবাই ভাল আছেন আজ আপনাদের জন্য নিয়ে হাজির হলাম  সিএসএস দিয়ে ছোট খাট এনিমেশন তৈরী করি “রাত এবং দিন মুডের জন্য সুইচ সাথে আছে খেক শিয়াল” কোড শেয়ার।

এই কোডটি দিয়ে আপনি  Day এবং Night সিলেক্ট করতে পারবেন Switch এর মাধ্যমে যেখানে দেখা যাবে একটি শিয়াল ঘুমাছে Night Switch এ ক্লিক করলে আর অপরদিকে Day Switch এ ক্লিক করলে দেখা যাবে শিয়ালটি ঘুম থেকে উঠছে। আর মাউস আইকন শিয়ালের উপর ক্লিক করলে একটা হাসি দিচ্ছে শিয়ালটি।




প্রথমতঃ-
নিচের কোডটি আপনি আপনার সাইটের </body> ট্যাগ খুজে বের করে </body> ট্যাগটির উপরে পেস্ট করবেন।

CSS:

/* DAY STYLES*/

body{

background: #FFF;

}

.the-container{

display: block;

position: absolute;

width: 500px;

height: 350px;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.c-window{

display: block;

position: relative;

width: 235px;

height: 235px;

margin: 0 auto;

border-radius: 100%;

border: 8px solid #34A87C;

background: #DDDDDD;

box-shadow: 0px 0px 5px rgba(0,0,0,0.25) inset;

overflow: hidden;

transition: all .5s linear;

-webkit-transition: all .5s linear;

}

.c-window .the-sun{

display: block;

position: relative;

top: 18px;

height: 40px; width: 40px;

background: #FFE067;

border-radius: 100%;

margin: 0 auto;

left: 30px;

}

.c-window .the-moon{

position: relative;

height: 24px; width: 24px;

background: #EEE;

border-radius: 100%;

display:none;

}

.c-window .the-fox{

display: block;

position: absolute;

bottom: -20px;

height: 140px;

width: 135px;

margin: 0 50px;

background: #E86A47;

transition: bottom 1s;

-webkit-transition: bottom .15s ease-in-out;

}

.c-window .the-fox:before{

width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 60px solid transparent;

border-bottom: 30px solid #E86A47;

top: -25px;

left: 0;

position: absolute;

content: "";

}

.c-window .the-fox:after{

width: 0;

height: 0;

border-right: 0px solid transparent;

border-left: 60px solid transparent;

border-bottom: 30px solid #E86A47;

top: -30px;

right: 0;

position: absolute;

content: "";

}

.c-window .the-fox:hover{

bottom: -30px;

}

.c-window .the-fox .eyes{

display: block;

position: absolute;

background: #FFFFFF;

height: 15px; width: 15px;

border-radius: 100%;

bottom: 90px;

-webkit-transition: all .15s linear;

}

.c-window .the-fox:hover .eyes{

height: 2px;

bottom: 97px;

}

.c-window .the-fox .eyes.left{

left: 30px;

}

.c-window .the-fox .eyes.right{

right: 30px;

}

.c-window .the-fox .nose{

display: block;

position: relative;

background: #333;

height: 12px; width: 12px;

border-radius: 100%;

margin: 0 auto;

top: 50px;

}

.c-window .the-fox .white-part{

display: block;

position: relative;

width: 0px;

height: 0px;

top: 55px;

border-style: solid;

border-width: 60px 70px 0 65px;

border-color: #ffffff transparent transparent transparent;

}

input[type=checkbox] {

position: absolute;

visibility: hidden;

}

input#toggle[type=checkbox]{

display:none;

}

label {

position: absolute;

height: 40px;

width: 120px;

display: block;

top: 0px; bottom: 0; right: 0; left:0;

z-index: 9999;

cursor: pointer;

margin: 0 auto;

}

.switch {

display: block;

position: relative;

border-bottom: 1px solid #FFF;

border-radius: 25px;

background: #34A87C;

box-shadow: inset 0 0 10px #888888;

-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.25);

height: 40px;

width: 100px;

margin: 0px auto 30px auto;

}

.switch .button{

display: block;

position: absolute;

border-top: 1px solid #FFF;

border-bottom: 1px solid #AAA;

border-radius: 100%;

background: #48E8AA;

height: 32px;

width: 32px;

top: 4px;

left: 4px;

box-shadow: 0 0 2px rgba(0,0,0,0.25)

}

.switch .button .b-inside{

display: block;

position: absolute;

border: 1px solid #888;

border-radius: 100%;

background: #FFE067;

height: 15px;

width: 15px;

top: 7px;

left: 7px;

box-shadow: 0 0 2px rgba(0,0,0,0.25)

}

.day-night-cont {

display: block;

position: absolute;

width: 180px;

margin: 0 auto;

left: 0; right: 0; top: 0; bottom:0;

height: 40px;

top: 0px;

}

.day-night-cont .the-sun{

display: block;

position: absolute;

left: 10px;

top: 10px;

height: 20px;

width: 20px;

border-radius: 100%;

background: #FFE067;

box-shadow: 0px 0px 10px #FFC41D;

}

.day-night-cont .the-moon {

display: block;

position: absolute;

right: 8px;

top: 10px;

height: 20px;

width: 20px;

border-radius: 100%;

background: #DDD;

box-shadow: 0px 0px 50px #CCC;

}

.day-night-cont .the-moon .moon-inside{

display: block;

position: absolute;

left: 8px;

height: 20px;

width: 20px;

border-radius: 100%;

background: #FFFFFF;

}

/* TOGGLE */

.switch .button {

transition: left .25s ease-in-out;

-webkit-transition: left .25s ease-in-out;

}

input[type=checkbox]:checked ~ .switch .button {

position: absolute;

left: 64px;

}

/* NIGHT ANIMATION */

input[type=checkbox]:checked ~ .c-window {

background: #222222;

}

input[type=checkbox]:checked ~ .c-window .the-sun{ display: none; }

input[type=checkbox]:checked ~ .c-window .the-moon{

display: block;

position: absolute;

margin: 0 auto;

top: 40px;

left: 60px;

}

input[type=checkbox]:checked ~ .c-window .the-fox{

background: #C74628;

}

input[type=checkbox]:checked ~ .c-window .the-fox:before{

width: 0;

height: 0;

border-left: 0px solid transparent;

border-right: 60px solid transparent;

border-bottom: 30px solid #C74628;

top: -30px;

left: 0;

position: absolute;

content: "";

}

input[type=checkbox]:checked ~ .c-window .the-fox:after{

width: 0;

height: 0;

border-right: 0px solid transparent;

border-left: 60px solid transparent;

border-bottom: 30px solid #C74628;

top: -30px;

right: 0;

position: absolute;

content: "";

}

input[type=checkbox]:checked ~ .c-window .the-fox .eyes{

height: 2px;

bottom: 90px;

}

input[type=checkbox]:checked ~ .c-window .the-fox:hover .eyes{

height: 15px;

bottom: 85px;

}







আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি ফাংশন দেখাতে চান সেখানে শুধু কোডটি পেস্ট করে দিবেন আর দেখুন মজা।




HTML:

<div class="the-container">

Cyber Prince <input type="checkbox" id="toggle" />

<label for="toggle"></label>

<div class="day-night-cont">

<span class="the-sun"></span>

<div class="the-moon"><span class="moon-inside"></span></div>

</div>

<div class="switch">

<div class="button">

<div class="b-inside"></div>

</div>

</div>

<div class="c-window">

<span class="the-sun"></span>

<span class="the-moon"></span>

<div class="the-fox">

<div class="fox-face">

<section class="eyes left"></section>

<section class="eyes right"></section>

<span class="nose"></span>

<div class="white-part"><span class="mouth"></span></div>

</div>

</div>

</div>

</div>



আজকের মত বিদায় । আবার দেখা হবে নতুন কিছু নিয়ে নতুন কোন দিন। 
সৌজন্যেঃ সাইবার প্রিন্স







15 thoughts on "আসুন এবার সিএসএস দিয়ে ছোট খাট এনিমেশন তৈরী করি “রাত এবং দিন মুডের জন্য সুইচ সাথে আছে খেক শিয়াল” কোড শেয়ার"

    1. Cyber Prince Author Post Creator says:
      Copy Just like a text @ Naim Shardar WNS bro
  1. Biplop Contributor says:
    কোড ভালো মতো সো করছে না
    1. Cyber Prince Author Post Creator says:
      Now try
    1. Cyber Prince Author Post Creator says:
      Thank u ???
    1. Cyber Prince Author Post Creator says:
      Thanks a lot
  2. asmalamgir Contributor says:
    Just awesome bro, i am being your die_hard fan day by day
    1. Cyber Prince Author Post Creator says:
      Thank you my lovely brother @ asmalamgir
    2. asmalamgir Contributor says:
      You’re most welcome bro
  3. Access Granted ? Contributor says:
    কপি হয়য় না ব্র
  4. Junaid Author says:
    ওয়াও
    1. Cyber Prince Author Post Creator says:
      Thank u @ Junaid bro
  5. Junaid Author says:
    আপনাকে সাগতম।

Leave a Reply