스크립트 & 소스코드 공유

使用WEBFONT时，低版本的IE浏览器以及其他浏览器显示字体有锯齿现象解决方。

.font_sel {transform:skew(-0.001deg);}

给些肉眼看不出来的斜度

css

/* 체크박스 스타일시트 */
.ck_style{margin:0 10px 0 0;display:inline-block;}
.ck_style input[type="radio"] , .ck_style input[type="checkbox"]{display:none}
.ck_style i{background-color:#fff;border:1px solid rgba(0,0,0,0.15);border-radius:100%;display:inline-block;height:18px;margin-right:6px;margin-top:-1px;vertical-align:middle;width:18px;line-height:1}
.ck_style input[type="radio"]:checked + i:after{background-color:#2fa2dd;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.ck_style input[type="checkbox"] + i{border-radius:0}
.ck_style input[type="checkbox"]:checked + i:after{background-color:#2fa2dd;border-radius:0;content:"";display:inline-block;height:12px;margin:2px;width:12px}

HTML

<label class="ck_style"><input type="radio" name="demo-radio"><i></i> 여</label>
<label class="ck_style"><input type="radio" name="demo-radio"><i></i>부</label>

<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 기술이전</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 공동연구</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 위탁연구</label>
<label class="ck_style"><input type="checkbox" name="demo-radio"><i></i> 가족기업</label>

* {
  box-sizing: border-box;
}

.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#vidtop-content {
  top: 0;
  color: #fff;
}

.vid-info {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 1rem;
  font-family: Avenir, Helvetica, sans-serif;
}

.vid-info h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.2;
}

.vid-info a {
  display: block;
  color: #fff;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  transition: .6s background;
  border-bottom: none;
  margin: 1rem auto;
  text-align: center;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-foreground {
    width: 300%;
    left: -100%;
  }
}

@media all and (max-width: 600px) {
  .vid-info {
    width: 50%;
    padding: .5rem;
  }

  .vid-info h1 {
    margin-bottom: .2rem;
  }
}

@media all and (max-width: 500px) {
  .vid-info .acronym {
    display: none;
  }
}

<div class="video-background">
  <div class="video-foreground">
    <iframe class="ww" src="https://www.youtube-nocookie.com/embed/n0AY4ebPy4w?autoplay=1&loop=1&controls=0&vq=hd720"
      frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen></iframe>
  </div>
</div>
<div id="vidtop-content">
  <div class="vid-info">
    <h1>YouTube</h1>
    <p>Good!</p>
  </div>
</div>

今天接到一个需求，通过一张图片得到其镜像对称的图片。本来说是后台处理的，但这样除了技术上难实现之外，还带来了资源消耗的问题，相当于每张图都要存储一个副本了。

只记得以前用过css的滤镜可以实现这个，但只在IE下有效。后来找到一个兼容多浏览器的样式，大爱。

css样式定义：

.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: fliph; /*IE*/ }
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; /*IE*/ }

HTML引用示例：

<img src="/data/editor/2004/logo-zhidao_Znb6RGemhY4.gif" class="flip-horizontal" />
<img src="/data/editor/2004/logo-zhidao_Znb6RGemhY4.gif" class="flip-vertical" />