এই কোডটি দিয়ে আপনি Day এবং Night সিলেক্ট করতে পারবেন Switch এর মাধ্যমে যেখানে দেখা যাবে একটি শিয়াল ঘুমাছে Night Switch এ ক্লিক করলে আর অপরদিকে Day Switch এ ক্লিক করলে দেখা যাবে শিয়ালটি ঘুম থেকে উঠছে। আর মাউস আইকন শিয়ালের উপর ক্লিক করলে একটা হাসি দিচ্ছে শিয়ালটি। /* 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; } <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>
প্রথমতঃ-
নিচের কোডটি আপনি আপনার সাইটের </body> ট্যাগ খুজে বের করে </body> ট্যাগটির উপরে পেস্ট করবেন।
CSS:
আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি ফাংশন দেখাতে চান সেখানে শুধু কোডটি পেস্ট করে দিবেন আর দেখুন মজা।
HTML:
আজকের মত বিদায় । আবার দেখা হবে নতুন কিছু নিয়ে নতুন কোন দিন।
সৌজন্যেঃ সাইবার প্রিন্স
Share:
?????