东台网站建设公司前端开发之使用css创建逼真的倒影

发布时间: 2023-07-19 来源:互联网

  东台网站建设公司在制作中,倒影是物体的程式化镜像.尽管它们不像阴影那样流行,但它们也有使用它们的场景.

东台网站建设公司前端开发之使用css创建逼真的倒影

  倒影还是10分好看的!与过往不同的是,大家实际上可以用 css 开展倒影!这是大家将在本文中制作的效果:

  倒影制作有两个步骤:

  创建两个相同的标签

  定义反应的样式

  东台网站建设公司现在在 css 中获取镜像的最真实和标准化的方法是使用该元素属性.以下是基本的html代码:

  然后大家给它定义一个样式:

  background-clip最初的制作是一个由背景图像、透明文本颜色和属性及其text值组合而成的挖空文本图形.

  然后将这对的底部元素倒过来,并使用transformchinamobile到更接近原始制作的位置:

  东台网站建设公司现在朝上的底部元素将呈现一些样式,以在反射上创建淡进淡出和其他图形效果.可以使用线性渐变图像作为朝上元素上的遮罩层来完成反射的逐渐淡化.

  呈现效果:

  大家还可以尝试其他渐变样式,将它们组合或不组合.以这件条纹为例.我添加了图案以及之前的淡进淡出效果.

  呈现效果:

  或者这一个radial-gradient:

  呈现效果:

  skew()另一个想法是根据添加到transform属性来变形镜像.这给反射带来了一些运动.

  呈现效果:

  或者模糊的效果:

  呈现效果:

  有时反射本身也可能是阴影的,因此,我没有使用背景图像(来自原始制作)或文本块颜色,而是尝试为反射提供一系列红色、蓝色和绿色的半透明阴影和原来的制作很好.

  呈现效果:

  最终所很好地果展示:

  • 上一篇:东台网站建设之php+jq分页动态获取数据
  • 下一篇:没有了
  • 首页
    模板
    报价
    联系