Day 02 CSS加javascript实现衣服搭配效果 | 8月更文挑战

2021年08月02日 10:37 · 阅读 463

这一篇，咱们来实现换动态衣服效果

实现这个小案例，我们需要：

1、绘制衣架区域

2、绘制衣服条纹区域

3、添加动态效果

绘制衣架区域

html code

<div class="shirt">
  <!-- 带着衣架的图片 -->
  <img src="images/t-shirt.png" class="shirt-base" alt="">
  <!-- 覆盖在衣服之上，只需要有衣服的范围，不需要其他内容，比如衣架 -->
  <div class="shirt-overlay">
    <!-- 用来制作添加的图案，只能有衣服的范围 -->
    <div class="shirt-overlay-pattern"></div>
    <!-- 保留衣服纹理的半透明图片 -->
    <img src="images/t-shirt-overlay-70c.png" class="shirt-overlay-shape" alt="">
  </div>
</div>
复制代码

css code

.shirt {
  /* 衣服的盒子整体在浏览器中居中 */
  position: fixed;
  left: 50%;
  top: 50%;
  width: 400px;
  /* 让元素向自己左侧上侧走自身的一半宽度和高度 */
  transform: translate(-50%, -50%);
}
.shirt-base {
  display: block;
  /* 更改图片的尺寸与父盒子一样宽，并且自动撑高父级 */
  width: 400px;
}
.shirt-overlay {
  /* 一定要跟上面的图片在相同位置 */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shirt-overlay-pattern {
  width: 100%;
  height: 100%;
  /* 添加背景图，使用 js 动态添加 */
  /* background: url(images/swatch1-preview.jpg); */
  /* 添加背景的遮罩，只会让图片中的黑色区域显示，透明区域不显示 */
  mask-image: url(images/shirt-mask.png);
  /* 有兼容问题，需要加前缀 */
  -webkit-mask-image: url(images/shirt-mask.png);
  /* 设置遮盖图片跟衣服一样大 */
  mask-size: contain;
  -webkit-mask-size: contain;
}
.shirt-overlay-shape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* 本层图片和下层父级的内容混合的模式 */
  /* 正片叠底的混合效果 */
  mix-blend-mode: multiply;
} 
复制代码

绘制衣服条纹区域

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>
复制代码

css code

/* 设置按钮组 */
.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;
  /* 更改旋转的圆心位置 */
  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);
}
/* 设置鼠标移上按钮，或者选中按钮，边框颜色为红色 */
.textiles-button:hover,
.textiles-button.active {
  border-color: #f00;
}
复制代码

添加动态效果

js code

<script src="js/jquery-1.11.1.min.js"></script>
<script>
  // 选择元素
  var $shirtPattern = $('.shirt-overlay-pattern');
  // 批量选中所有的按钮
  var $buttons = $('.textiles-button');
  var pattern = '';
  // 给按钮批量添加事件
  $buttons.click(function () {
    // 其他人去掉 active 类名
    $buttons.removeClass('active');
    // 点击谁，让它添加一个 active 类名
    $(this).addClass('active');
    // 让点击的这个元素内部的 img 标签的src 属性值，作为背景图片
    pattern = $(this).find('img').attr('src');
    // 实现元素淡入淡出切换，当前的图先淡出，然后换完背景的再淡入
    $shirtPattern.fadeOut('fast',function () {
      $shirtPattern.css('background-image','url('+pattern+')')
      $shirtPattern.fadeIn('fast')
    })
  });
</script>
复制代码

主要涉及css说明

1、径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。

radial-gradient(circle at center, red 0, blue, green 100%)  //圆形，中心点为圆心
radial-gradient(farthest-corner at 40px 40px, #f35 0%, #43e 100%);
// 40px 40px 为中心点，距离最远的角到中心点的距离为半径，（中心点不一致会得到椭圆）
复制代码

2、transform 变换

位移属性值：translate(x,y)

旋转属性值：rotate(180deg),旋转中心默认为盒子的中心

坐标原点可以通过 transform-origin 属性进行更改

transform-origin: 50px 50px;
transform-origin: left top;
复制代码

3、mask-image 遮罩属性

属性值：none，或者图片 url()
遮罩的图片黑色区域显示内容，透明区域遮盖内容。
它属于实验中的属性，有兼容问题，需要加特定浏览器的前缀，例如 -webkit-

mask-image: url(images/shirt-mask.png);
-webkit-mask-image: url(images/shirt-mask.png);
复制代码

它也可以像背景图一样，调整位置和大小。
问题：跨域请求：1.开启本地服务器2.转换成 base64 编码格式

4、mix-blend-mode 背景/颜色混合/混合模式

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

{
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度
   
  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}
复制代码