In this article, let’s realize the effect of changing dynamic clothes

To implement this small case, we need:

1. Draw the hanger area

2. Draw the stripe area

3. Add dynamic effects

Draw hanger area

  • html code
<div class="shirt">
  <! -- Picture with coat hanger -->
  <img src="images/t-shirt.png" class="shirt-base" alt="">
  <! -- To cover the clothes, only need to have the scope of the clothes, no other content, such as hanger -->
  <div class="shirt-overlay">
    <! -- Used to make added patterns, can only have clothing range -->
    <div class="shirt-overlay-pattern"></div>
    <! -- Translucent image with texture preserved -->
    <img src="images/t-shirt-overlay-70c.png" class="shirt-overlay-shape" alt="">
  </div>
</div>
Copy the code
  • css code
.shirt {
  /* The clothing box is completely centered in the browser */
  position: fixed;
  left: 50%;
  top: 50%;
  width: 400px;
  /* Move the element up to its left half its width and height */
  transform: translate(-50%, -50%);
}
.shirt-base {
  display: block;
  /* Change the size of the image to the same width as the parent box, and automatically boost the parent */
  width: 400px;
}
.shirt-overlay {
  /* Be sure to be in the same position as the picture above */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shirt-overlay-pattern {
  width: 100%;
  height: 100%;
  /* Add background image, use js to add */ dynamically
  /* background: url(images/swatch1-preview.jpg); * /
  /* Add a background mask, only the black areas of the image will be displayed, transparent areas will not be displayed */
  mask-image: url(images/shirt-mask.png);
  /* Compatibility problem, need to prefix */
  -webkit-mask-image: url(images/shirt-mask.png);
  /* Set the cover image to be as big as the clothes */
  mask-size: contain;
  -webkit-mask-size: contain;
}
.shirt-overlay-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* This layer of images and the content of the lower layer of the blending mode */
  /* Multiply the effect */
  mix-blend-mode: multiply;
} 
Copy the code

Draw the striped area of clothing

  • html code
<div class="textiles textiles-1">
  <button class="textiles-button active"></button>
  <button class="textiles-button">
    <img src="images/swatch1-preview.jpg" alt="">
  </button>
  <button class="textiles-button">
    <img src="images/swatch2-preview.jpg" alt="">
  </button>
  <button class="textiles-button">
    <img src="images/swatch3-preview.jpg" alt="">
  </button>
</div>
<div class="textiles textiles-2">
  <button class="textiles-button">
    <img src="images/swatch4-preview.jpg" alt="">
  </button>
  <button class="textiles-button">
    <img src="images/swatch5-preview.jpg" alt="">
  </button>
  <button class="textiles-button">
    <img src="images/swatch6-preview.jpg" alt="">
  </button>
  <button class="textiles-button">
    <img src="images/swatch7-preview.jpg" alt="">
  </button>
</div>
Copy the code
  • css code
/* Set the button group */
.textiles {
  position: fixed;      
}
.textiles-1 {
  left: 100px;
  top: 100px;
}
.textiles-2 {
  right: 100px;
  bottom: 100px;
}
.textiles-button {
  position: absolute;      
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.textiles-1 .textiles-button {
  left: 0;
  top: 0;
  /* Change the rotation center position */
  transform-origin: 100px 100px;
}
.textiles-1 .textiles-button:nth-child(1) {
  transform: rotate(-80deg);
}
.textiles-1 .textiles-button:nth-child(2) {
  transform: rotate(-40deg);
}
.textiles-1 .textiles-button:nth-child(3) {
  transform: rotate(0deg);
}
.textiles-1 .textiles-button:nth-child(4) {
  transform: rotate(40deg);
}
.textiles-2 .textiles-button {
  right: 0;
  bottom: 0;
  transform-origin: -50px -50px;
}
.textiles-2 .textiles-button:nth-child(1) {
  transform: rotate(-80deg);
}
.textiles-2 .textiles-button:nth-child(2) {
  transform: rotate(-40deg);
}
.textiles-2 .textiles-button:nth-child(3) {
  transform: rotate(0deg);
}
.textiles-2 .textiles-button:nth-child(4) {
  transform: rotate(40deg);
}
/* Set the mouse over the button, or select the button with the border color red */
.textiles-button:hover..textiles-button.active {
  border-color: #f00;
}
Copy the code

Adding dynamic effects

  • js code
<script src="Js/jquery - 1.11.1. Min. Js." "></script>
<script>
  // Select the element
  var $shirtPattern = $('.shirt-overlay-pattern');
  // Select all the buttons in batches
  var $buttons = $('.textiles-button');
  var pattern = ' ';
  // Add events to buttons in batches
  $buttons.click(function () {
    // Remove the active class name for others
    $buttons.removeClass('active');
    // Click someone to add an active class name
    $(this).addClass('active');
    // Use the SRC attribute value of the img tag inside the clicked element as the background image
    pattern = $(this).find('img').attr('src');
    // Implement the element fade in and out toggle, the current image first fade out, then change the background again fade in
    $shirtPattern.fadeOut('fast'.function () {
      $shirtPattern.css('background-image'.'url('+pattern+') ')
      $shirtPattern.fadeIn('fast')})});</script>
Copy the code

This section describes the CSS

1. Radial gradient

The radial-gradient() CSS function creates an image that consists of a gradual transition between two or more colors emitted from the origin. Its shape can be circle or ellipse.

radial-gradient(circle at center, red 0, blue, green 100%) // The center of the apsarapsis is at a radial point-gradient40px 40px.#f35 0%.#43e 100%);
// 40px 40pxIs the center point, the distance from the farthest Angle to the center point is the radius, (the ellipse will be obtained if the center points are inconsistent)Copy the code
2. Transform

Translate (x,y)

Rotate value: Rotate (180deg) The rotate center is the center of the box by default

The coordinate origin can be changed using the transform-origin property

transform-origin: 50px 50px;
transform-origin: left top;
Copy the code
3. Mask-image mask properties

  • Property value: None, or image URL ()

  • The black area of the image of the mask shows the content, and the transparent area hides the content.

  • It is an experimental property that has compatibility issues and requires a browser-specific prefix, such as -webkit-

mask-image: url(images/shirt-mask.png);
-webkit-mask-image: url(images/shirt-mask.png);
Copy the code

  • It can also be repositioned and resized like the background image.

  • Problem: Cross-domain request: 1. start local server 2. convert to Base64 encoding format

4, mix-blending-mode Background/color blending/blending mode

The mix-blending-mode CSS attribute describes how the content of an element should be mixed with the content of the element’s immediate parent and the background of the element.

{ mix-blend-mode: normal; // Normal mix-blending-mode: multiply; // Mix-blending-mode: screen; // mix- blending-mode: overlay; // Overlay mix-blending-mode: darken; // lighten up mix-blending-mode: lighten up; // Lighten mix-blending-mode: color-dodge; // Mix blend mode: color-burn; // Color deepen mix-blending-mode: hard-light; // mix-blending-mode: soft-light; // Mix-blending-mode: difference; // Differential mix-blending-mode: exclusion; // Exclude mix-blending-mode: hue; // Mix-blends-mode: saturation; // Saturation mix-blending-mode: color; // Color mix-blending-mode: luminosity; // mix- blending-mode: initial; mix-blend-mode: inherit; mix-blend-mode: unset; }Copy the code