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

Cyber_Prince

7 years ago

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

এই কোডটি দিয়ে আপনি 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:

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

</div>

</div>

</div>

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