HTML5 CSS3偏振滤光片混合模式图片特效

Polaroid Filter Blend-Mode，有点像医院心电图X光投射拍片成像特效。本例使用了RxJS（reactivex）和RxCSS开发库。

html5, 图片特效，blend-mode

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4250
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const { clientWidth, clientHeight } = document.documentElement;

const outer = document.querySelector(".outer");
const btn = document.querySelector(".more");

const getPercentX = x => Math.round(x / clientWidth * 360);
const getStepY = y => Math.round(y / clientHeight * 100);

const animationFrame$ = Rx.Observable.interval(0, Rx.Scheduler.animationFrame);

const mouse$ = Rx.Observable
  .fromEvent(document, "mousemove")
  .map(({ clientX, clientY }) => {
    const percentX = getPercentX(clientX);
    const percentY = getStepY(clientY);

return {
      degX: percentX,
      degY: percentY,
      x: (clientWidth / 2 - clientX) / clientWidth,
      y: (clientHeight / 2 - clientY) / clientHeight,
    };
  });

const smoothMouse$ = animationFrame$
  .withLatestFrom(mouse$, (_, m) => m)
  .scan(RxCSS.lerp(1.5));

RxCSS({
  rx: smoothMouse$,
  url: button$,
}, outer);

编译

CSS

.wrapper {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #aaa;
    background-image: -webkit-radial-gradient(center ellipse, #f3f4f8 30%, #ccd1e1 100%);
    background-image: radial-gradient(ellipse at center, #f3f4f8 30%, #ccd1e1 100%);
    font-family: 'PT Sans', Futura, "Trebuchet MS", Arial, sans-serif;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
.outer {
    --rx-degY: 0;
    --rx-degX: 0;
    --rx-x: 0;
    --rx-y: 0;
    --black: #222;
    --grad-1: linear-gradient(hsla(187, calc(var(--rx-degY) * 1%), 21%, 0.5), hsla(61, calc(var(--rx-degY) * 1%), 83%, 0.5));
    --url: url("https://unsplash.it/g/500/500?random");
    --blend: overlay;
    --hue: calc(var(--rx-degX) * 1deg);
    position: relative;
    width: 45vmin;
    height: 50vmin;
    background-color: #fff;
    box-shadow: 10px 10px 60px -25px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translateZ(100px) rotateY(calc(var(--rx-x) * -10deg)) rotateX(calc(var(--rx-y) * 10deg));
    transform: translateZ(100px) rotateY(calc(var(--rx-x) * -10deg)) rotateX(calc(var(--rx-y) * 10deg));
}
.filter,
.inner {
    width: 94%;
    position: absolute;
    top: 3%;
    left: 3%;
}
.filter:before,
.inner:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;
}
.inner {
    background: var(--grad-1), var(--url);
    background-blend-mode: var(--blend);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.inner:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
}
.filter {
    z-index: 2;
    -webkit-backdrop-filter: hue-rotate(var(--hue));
    backdrop-filter: hue-rotate(var(--hue));
}
.more {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border: 2px solid #333;
    border-radius: 20px;
    box-sizing: border-box;
    padding: 10px 20px;
    color: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}

HTML

Polaroid Filter Blend-Mode，有点像医院心电图X光投射拍片成像特效。本例使用了RxJS（reactivex）和RxCSS开发库。

html5, 图片特效，blend-mode

编辑器支持Emmet

快捷键

Polaroid Filter Blend-Mode，有点像医院心电图X光投射拍片成像特效。本例使用了RxJS（reactivex）和RxCSS开发库。

html5, 图片特效，blend-mode

HTML5+BootStrap带3D翻转操作和闪光效果的图文卡片

HTML5 CSS3闪烁灯光文字动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：