当前位置：首页 > 网页特效 > 背景

炫酷Apple TV多层背景视觉差特效

分类：背景日期：2024-05-14 点击(0) 评论(0)

炫酷Apple TV多层背景视觉差特效

简介

##### HTML结构
该Apple TV背景视觉差的基本HTML结构如下：其中.light和.light-2是流光层。余下的3个层是背景图片层。

```html
<div class="wrapper">
  <div class="container">
    <div class="layer light"></div>
    <div class="layer light light-2"></div>
    <div class="layer layer-1"></div>
    <div class="layer layer-2"></div>
    <div class="layer layer-3"></div>
  </div>
</div>       
```   
#####  CSS样式
包裹容器.wrapper设置了固定的高度，定位方式为相对定位，并且设置透视度perspective为800，使其转换为3D空间。

```html
.wrapper {
  position: relative;
  height: 800px;
  -webkit-perspective: 800;
  perspective: 800;
}         
```     
所有的图层.layer元素都采用绝对定位，并使用will-change属性告诉浏览器对即将执行的transform进行优化。

```html
.layer {
  position: absolute;
  will-change: transform;
}        
```        
视觉差容器.container使用绝对定位，相对于包裹容器居中。overflow属性设置为hidden，同时设置圆角和阴影效果。并使用transform-style: preserve-3d;来使所有子元素在3D空间中展现。由于IE不支持该属性，所以在IE中没有3D效果。

```html
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 840px;
  height: 500px;
  margin-left: -420px;
  margin-top: -250px;
  background: black;
  overflow: hidden;
  border-radius: 3px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 60px 100px rgba(0, 0, 0, 0.5);
}             
```
3个背景图层同样居中定位，使用transform属性将其缩小0.7倍。

```html
.layer-1,
.layer-2,
.layer-3 {
  top: 50%;
  left: 50%;
  margin-left: -630px;
  margin-top: -375px;
  width: 1260px;
  height: 750px;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.layer-1 {
  background-image: url(../img/1.jpg);
}
 
.layer-2 {
  background-image: url(../img/2.png);
}
 
.layer-3 {
  background-image: url(../img/3.png);
}         
```         
流光层也居中定位，使用椭圆渐变作为背景，并设置背景混合模式mix-blend-mode为color-dodge模式。并分别为各个层设置背景图像。

```html
.light {
  top: 50%;
  left: 50%;
  margin-left: -840px;
  margin-top: -800px;
  width: 1680px;
  height: 1000px;
  background: -webkit-radial-gradient(ellipse closest-side at center, #6c6c6c, #000000);
  background: radial-gradient(ellipse closest-side at center, #6c6c6c, #000000);
  mix-blend-mode: color-dodge;
  opacity: .6;
  z-index: 3;
}
 
.light-2 {
  z-index: 4;
  background: -webkit-radial-gradient(ellipse closest-side at center, #ffffff, #000000);
  background: radial-gradient(ellipse closest-side at center, #ffffff, #000000);
  mix-blend-mode: screen;
  opacity: .3;
}           
```       
#####  JavaScript
该视觉差特效使用jQuery代码来处理鼠标移动时为各个图层应用不同的CSS transform属性，来达到视觉差效果。

```html
var $body = $('body');
    var WIDTH = $body.width();
    var HEIGHT = $body.height();
    var $ad = $('.container');
    var $light = $ad.find('.light');
    var $layer1 = $ad.find('.layer-1');
    var $layer2 = $ad.find('.layer-2');
    var $layer3 = $ad.find('.layer-3');
 
    function moveAd(e) {
      var xPer = e.clientX / WIDTH;
      var yPer = e.clientY / HEIGHT;
 
      var rotateX = 5 - (yPer * 10);
      var rotateY = -5 + (xPer * 10);
 
      $ad.css({
        transform: 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) '
      });
 
      var translateX = -5 + (xPer * 10);
      var translateY = -5 + (yPer * 10);
 
      $layer2.css({
        transform: 'scale(.7) translateX(' + translateX + 'px) translateY(' + translateY + 'px)'
      });
 
      $layer3.css({
        transform: 'scale(.7) translateX(' + (translateX * 2) + 'px) translateY(' + (translateY * 2) + 'px)'
      });
 
      var lightX = 800 - (xPer * 1600);
      var lightY = 300 - (yPer * 600);
 
      $light.css({
        transform: 'translateX(' + lightX + 'px) translateY(' + lightY + 'px)'
      });
    }
 
    $body.on('mousemove', moveAd);           
```

web299.com

炫酷Apple TV多层背景视觉差特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果