女朋友都喜欢的CSS特效：神奇的倒影

小杜杜
8,038 阅读4分钟

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

大家好，我叫小杜杜，我们知道构成前端的三大语言有：html、css和js，其中 css的作用是页面的布局，美观，那么你知道只通过css就能实现非常炫酷的动画吗？

随着夏天的到来，天气越来越炎热，那势必要陪女朋友看一场电影了。我们走进电影院后会看到屏幕上有这各种各样的电影，那我们能不能用CSS去实现一个电影展示片的特效呢呢？

恰好，我看到了一个css的神奇属性box-reflect,接下来我们一起来看看如何实现

前置属性

我们先来看看实现这个效果需要用到哪些css属性

perspective

perspective：多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

注意：perspective 属性只影响 3D 转换元素。

所以这个属性需要配合 transform-style：preserve-3d结合使用

transform

  • transform-style：preserve-3d ：让转换的子元素保留3D转换
  • transform-origin：设置旋转元素的基点位置
  • translate(x, y) ：定义2d图形的转换，分别为 x 和 y
  • roate(90deg) : 定义2d图形的旋转，参数为度数，如旋转90度

animation

animation : 动画属性，可连贯的书写，也可分开书写(前面加上animation-)，如：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • name: 绑定到选择器的关键帧的名称
  • duration: 动画指定需要多少秒或毫秒完成
  • timing-function: 设置动画将如何完成一个周期
  • delay: 设置动画在启动前的延迟间隔。
  • iteration-count: 定义动画的播放次数。
  • direction: 指定是否应该轮流反向播放动画。
  • fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  • play-state: 指定动画是否正在运行或已暂停。

其中：name 需要调用 @keyframes 来自定义名称，可设置 0% ～ 100% 时的样子

box-reflect

这个属性便是我们今天的主角

box-reflect：这个属性是倒影属性，这个效果非常的奇特，包括三个属性

  • direction：定义倒影的方向， above（上）、 below（下） 、 left（左） 、 right（右）。
  • offset：定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。（这个值代表这倒影与该对象的间隔，同时可以为负值）
  • mask-box-image 定义遮罩图像，该图像将覆盖投影区域。可以是背景图片，也可以是渐变生成的背景图像，默认为none

举个🌰：

    //html
    <div className='Index'>
      <h1>Hello！我是小杜杜</h1>
    </div>
    
    //css
    .Index{
        padding-top: 100px;
        h1 {
            font-size: 50px;
            text-align: center;
            color: rebeccapurple;
            -webkit-box-reflect: below 1px ;
        }
    }

我们来看看效果：

image.png

当我们使用box-reflect这个属性后，发现此时的文字已经翻转了过来，但此时的倒影并不真实，原因是下方的颜色没有模糊起来，所以此时我们需要linear-gradient实现一个简单的渐变 ，像这样：

效果就变成了这样：

这样就有了倒影的效果

电影展示片

经过上面的小例子，我们可以轻松实现图片的倒影，但我们这这里加入3d的效果：

.Index{
    perspective:2000px;
    transform-style: preserve-3d;
    -webkit-box-reflect: below 8px linear-gradient(transparent, rgba(0, 0, 0, .5));
    .content{
        transform-style: preserve-3d;
        transform: translateZ(-2000px) rotateY(0deg) rotateZ(0deg);
    }
}

image.png

旋转

我们要想使图片旋转起来，只需要做一个简单的animation，来控制rotateY的值即可

.content{
    animation:rotate 30s linear infinite;
    div{
        transform-style: preserve-3d;
    }
}
@keyframes rotate{
  0%{
      transform: translateZ(-2000px) rotateY(0deg);
  }
  50%{
      transform: translateZ(-2000px) rotateY(-360deg);
  }
  100%{
      transform: translateZ(-2000px) rotateY(-720deg);
  }
}

jim.gif

同时我们需要通过translateZ来设置Z轴，控制图片的远近，通过transform-origin设置旋转元素的基点

    p{
         transform-style: preserve-3d;
         transform-origin: 50% 50% ;
         transform: rotateY(0) translateZ(650px) ;
    }

jim2.gif

最终效果

接下来我们只需要多个图片，通过改变rotateY的值（差值保留好），就可以形成最终效果

jim4.gif

这样一个简单的电影展示片就完成了

End

不得不说css真的很神奇，最神秘的莫过于css，喜欢的点个赞👍🏻支持下吧(●￣(ｴ)￣●)

其他好文：

avatar
文章
阅读
粉丝