css implementation switching

CSS implements switching

CSS (Cascading Style Sheets) is a language for writing web pages and applications, which can control the appearance, layout and dynamic effects of text and images. In web page production, we often need to use CSS to achieve switching effects to make web pages more vivid and interesting. Here are some common CSS methods to achieve switching effects.

1. Use pseudo-classes

Pseudo-class is a tag in CSS that is used to add some special styles in addition to the style of elements. When implementing switching effects, we can use pseudo-classes in CSS selectors. For example, we can use the :hover pseudo-class to switch styles when the mouse stays on an element. The code is as follows:

<style>
.tab {
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
}
.tab:hover {
    background-color: #ccc;
}
</style>

<div class="tab">标签1</div>
<div class="tab">标签2</div>
<div class="tab">标签3</div>

This code implements a basic label switching effect. When the mouse stays on the label, it will turn into a gray background.

2. Use CSS3 attributes

Some new attributes have been added to CSS3, which can achieve richer style effects. Among them, we can use the transition attribute to achieve switching animation effects. For example, we can bind a transition animation to the background color of an element so that the color gradually changes when the mouse stays on it, and when the mouse moves away, the color will also gradually change back. The code is as follows:

<style>
.tab {
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: background-color 0.5s ease;
}
.tab:hover {
    background-color: #ccc;
}
</style>

<div class="tab">标签1</div>
<div class="tab">标签2</div>
<div class="tab">标签3</div>

This code implements a relatively smooth label switching effect. When the mouse stays on the label, the background color will slowly fade to gray, and when the mouse moves away, the color will also change. Fade back.

3. Use CSS animation

In addition to using the transition attribute, we can also use CSS animation to achieve more complex switching effects. For example, we can use the @keyframes rule to define an animation sequence, and then apply this animation sequence to the element to achieve the animation effect. The code is as follows:

<style>
.tab {
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    animation: tabAnimation 0.5s ease;
}
.tab:hover {
    background-color: #ccc;
}
@keyframes tabAnimation {
    0% {
        background-color: #fff;
    }
    50% {
        background-color: #eee;
    }
    100% {
        background-color: #ccc;
    }
}
</style>

<div class="tab">标签1</div>
<div class="tab">标签2</div>
<div class="tab">标签3</div>

This code implements a jittering label switching effect. When the mouse stays on the label, the background color will jitter and gradually turn gray.

4. Use JS to control the style

In addition to using CSS to achieve the switching effect, we can also use JavaScript to control the style to achieve the switching effect. For example, we can use the jQuery library to quickly implement label switching effects. The code is as follows:

<style>
.tab {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
}
.active {
    display: inline-block;
}
</style>

<div class="tab active">标签1</div>
<div class="tab">标签2</div>
<div class="tab">标签3</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
    $(".tab").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
    });
});
</script>

This code implements a switching effect after clicking on a label. When a label is clicked, the style of the clicked label will be displayed and the styles of other labels will be hidden.

Summary

CSS is an indispensable technology in making web pages and applications, and it can achieve a variety of style effects. When implementing switching effects, we can use pseudo-classes, CSS3 properties, CSS animations or JavaScript to control styles. Each of these methods has its own advantages and disadvantages, and the appropriate method should be selected based on actual needs.

The above is the detailed content of css implementation switching. For more information, please follow other related articles on the PHP Chinese website!