Today we will continue to review some of the common CSS techniques and knowledge that we use in our work so that we can more elegantly implement dynamic websites with CSS.

You will reap

  • Website skin design scheme introduction
  • : Target pseudo-class introduction and usage and how to use CSS to achieve website skin
  • Transition animation and how to animate a focus diagram with pure CSS

Results show

1. Website peels

Implementation approach

1. Website peels

Usually we achieve website skin based on the following ways to achieve:

  • Solution 1: OOCSS mode is used to dynamically switch the public class name through JS to achieve the skin effect
  • Option 2: Click different buttons to switch between different stylesheets, as follows:
    • theme-green.css
    • theme-red.css
    • theme-black.css
  • Solution three: localStorage storage theme,js dynamic obtain localStorage skin
  • Solution 4: Dynamic peels of Element and ANTD require real-time compilation of style stylesheets

The above several schemes can achieve a certain degree of skin effect, but if it is some basic skin, such as the site’s background style, a button style, a content area style and so on this local skin, we can directly use CSS to achieve it? The answer is yes, so let’s take a look at how pure CSS achieves site skin.

One thing we need to know before we implement the peels is the TARGET pseudo-class of the A label.

: target pseudo class

To assist in identifying targets that point to links to specific parts of the document, the CSS3 selector introduces the :target pseudo-class, which specifies the target element style for urIs that contain fragment identifiers.

For example, http://xuxi#home, the URI contains the # HOME fragment identifier. In HTML, an identifier is an element’s ID or name attribute. Since the two are in the same namespace, the example URI points to the “home” at the top level of the document.

Suppose you want to modify any div element to which the URI points, but you don’t want to apply the style to any other element of the same type, you can write:

<style>
    div:target {
        background: #06c;
    }
</style>
<a href="#home" >blue</a>
<div id="bg1"></div>
Copy the code

When we click on the a tag, we will hit the :target element and set the background color of the div to blue, which is #06c.

After understanding this pseudo-class, our website skin is easy to achieve, for example, we want to achieve the site background color skin, we can prepare a few background color containers, Then use the href anchor point of the A tag to correspond to the corresponding background element ID, and then adjust the level of the background container when clicking the background color, so that the skin can be realized. The actual effect can be seen at the beginning of the article. The specific code is as follows:

<style>
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
    }
    .bg1 {
      z-index: 10;
      background-color: # 000;
    }
    .bg2 {
      background-color: #06c;
    }
    .bg3 {
      background-color: #f0c;
    }
    .skin-btn-wrap {
      position: absolute;
      padding: 4px 10px;
      border-radius: 20px;
      line-height: 20px;
      background-color: #fff;
      z-index: 11;
      right: 20px;
      top: 20px;
    }
    .skin-btn-wrap a {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    #one {
      background-color: # 000;
    }
    #two {
      background-color: #06c;
    }
    #three {
      background-color: #f0c;
    }
    .bg:target {
      z-index: 10;
    }
    .bg:not(:target) {
      z-index: 0;
    }
  </style>

  <! -- CSS background skin -->
  <div class="bg1 bg" id="bg1"></div>
  <div class="bg2 bg" id="bg2"></div>
  <div class="bg3 bg" id="bg3"></div>
  <div class="skin-btn-wrap">
    <a href="#bg1" id="one"></a>
    <a href="#bg2" id="two"></a>
    <a href="#bg3" id="three"></a>
  </div>
Copy the code

2. Focus diagram animation

Focus diagram animation mainly comes from our common round diagram. When we click on a point in the round diagram, we can switch to the corresponding picture. The common scheme of focus round diagram is mainly realized by javascript and CSS, and the scheme is roughly as follows:

  • Bootstrap – A plugin for rotograph
  • Jquery market – rich round diagram plug-in
  • Swiper.js (rich and powerful, with swiper components built into small programs)
  • Antd/Element has a built-in rotograph component
  • slick
  • Unslider is the simplest rotograph component
  • FancyBox can add zooming to images, HTML content, and multimedia on a page
  • Sly navigational, unidirectional scrolling
  • Sequence can create responsive slides, presentations, banner ads, and step-based CSS animation frameworks
  • PhotoSwipe, suitable for mobile devices and desktop computers, is based on native JavaScript module components

The above solutions are mature enough to be used directly, but in the interest of simplicity and minimal code, is there a way to implement a simple focus diagram switching animation using pure CSS?

The idea is also very simple, we will also be based on the above mentioned :target pseudo-class to implement, here in order to achieve the animation effect, we use transiton animation, about transtion and pseudo-elements more introduction and use, please refer to:

  • Css3 actual summary (with source code)

  • CSS method of using pseudo elements to achieve super practical icon library (with source code)

The implementation idea is as follows:

  1. Establish the relationship between focus map and control points
  2. When the page is initialized, only the first focus map has width, and all other widths are set to zero. When the control point is activated, the width of the target object corresponding to the control point is set to normal, and all other non-target objects are set to zero
  3. Add transition animation to focus map
  4. Optimize focus map and control point styles

The specific code is as follows:

 <style>
    .swiper {
      position: relative;
      margin: 0 auto;
      display: flex;
      width:80vw;
      height: 250px;
      padding: 18px;
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 0 20px rgba(0, 0, 2); }.swiper .img {
      height: 250px;
      width: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width .6s;
      background-color: #06c;
      color: #fff;
    }
    .swiper .img:first-child {
      width: 100%;
    }
    .swiperControl {
      position: absolute;
      left: 50%;
      transform: translateX(50%);bottom: 30px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0;
      background-color: rgba(0, 0, 3); }.swiperControl .dot {
      display: inline-block;
      margin: 0 6px;
      width: 8px;
      height: 8px;
      border-radius: 6px;
      background-color: rgba(255255255, 6); }.swiperControl .dot:hover {
      background-color: rgba(255255255, 1); }.swiper .img:target {
      width: 100%;
    }
    .swiper .img:not(:target) {
      width: 0;
    }
  </style>
  <div class="swiper">
    <div class="img" id="img1" style='background: #06c'>I</div>
    <div class="img" id="img2" style='background: #f0c'>love</div>
    <div class="img" id="img3" style='background: #000'>you</div>

    <div class="swiperControl">
        <a class="dot" href="#img1"></a>
        <a class="dot" href="#img2"></a>
        <a class="dot" href="#img3"></a>
      </div>
  </div>
Copy the code

conclusion

With the pure CSS website skin and focus diagram switching animations described above, is there more novelty in CSS? Stay tuned for more incredible animations in pure CSS3, such as 3D roll dice,VR graphics and more

The last

If you want to learn more about webpack, node, gulp, CSS3, javascript, nodeJS, Canvas and other front-end knowledge and actual practice, welcome to join us in the public account “Interesting Talk front-end” to learn and discuss, and jointly explore the boundary of the front-end.

More recommended

  • “Front-end combat summary” using CSS3 to achieve cool 3D rotation perspective
  • Add a loading progress bar to your site using pace. Js
  • The Application of design Pattern of “Summary of Front End Actual Combat” — Memorandum Pattern
  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • Write a mock data server using nodeJS in 5 minutes
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • Cartesian product is implemented and applied in javascript