This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕ like 👍 plus my wechat: FrontendPicker, invite you to join the group, learn to communicate frontend, become a better engineer ~ follow the public number: Banxia words frontend, learn more frontend knowledge! Click me to explore a new world!

preface

Personal websites, if you don’t have the ability to switch to night mode, feel less. Whether it is CSS scheme, or JS+CSS scheme, you have to have a button 😝 recently I also perfect the website function, want to complete a fancy button, as a lack of creativity to cut the figure, I still use ready-made bar! Facing CV is always extremely comfortable!

Statement: this article effect, not the author to achieve, only learn from the Internet, and affixed corresponding links. The purpose of this article is to analyze the code

The original address

Codepen. IO/bheberer/PE…

When clicked, the icon bit will be switched, and the button will change color.

Copy the code

Implementation approach

Replace checkbox with lable

Most basic: Hide input and use label to modify style.

<label>
	<input type='checkbox'></input>
</label>
input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
Copy the code

Define input inside label, click label, checkbox check, effect is the same as for.

Define three ICONS

The ICONS used here are third-party. Iconify. Design /. The Iconify icon collection includes over 100,000 Icons from popular Font and emoji sets: Font Awesome 4 and 5, Material Design Icons, IonIcons, Vaadin Icons, Entypo+, and more.

<div class='toggle-slot'>
	
    <div class='sun-icon-wrapper'>
   	 <div class="iconify sun-icon" data-icon="feather-sun" data-inline="false"></div>
    </div>
    <div class='toggle-button'></div>
    <div class='moon-icon-wrapper'>
   		 <div class="iconify moon-icon" data-icon="feather-moon" data-inline="false"></div>
    </div>
</div>
Copy the code

Sun-icon-wrapper is the sun, toggle-button is the ring button and moon-icon-wrapper is the moon.

Initial state – Daytime

toggle-slot

Background-color: white;

The sun

.sun-icon {
    position: absolute;
    color: #ffbb52;
}

Copy the code
.sun-icon-wrapper {
    position: absolute;
    opacity: 1;
    transform: translate(2em, 2em) rotate(15deg);
}
Copy the code

The sun’s color is yellow and its position defaults to the left. And set the transparency of the parent element to 1, which is visible.

Circle the button

Transform: Translate (11.75em, 1.75em); , will move to the left. Set the color to yellow

. Toggle -button {transform: translate(11.75em, 1.75em); position: absolute; border-radius: 50%; background-color: #ffeccf; }Copy the code

The moon

The moon is now hidden. Opacity: 0 for.moon-icon-wrapper.

Principle of switching

Opacity property is mainly used. At the beginning, opacity of the sun is 1, which is visible. Switch to night, and the moon’s opacity is 1, indicating that it is visible. No need to move the sun and moon. Just change the position of the circular button. Use the checkbox checked plus Transform: Translate to the left when unchecked and to the right when checked.

input:checked~.toggle-slot .toggle-button { background-color: #485367; Box-shadow: inset 0px 0px 0px 0.75em white; Transform: translate (1.75 em, em 1.75); }Copy the code
input:checked~.toggle-slot .sun-icon-wrapper {
    opacity: 0;
}
Copy the code
input:checked~.toggle-slot .moon-icon-wrapper {
    opacity: 1;
}
Copy the code