纯 CSS 实现斜纹效果

栏目: CSS · 发布时间: 5年前

内容简介:打开WeGame玩LOL时,发现要更新,无意间瞥见了这个效果(PS: 我老了,这俩战队我一个都不认识)不知道你们第一眼想到了什么,反正我是想到了下面这货扩展阅读:

打开WeGame玩LOL时,发现要更新,无意间瞥见了这个效果(PS: 我老了,这俩战队我一个都不认识)

纯 CSS 实现斜纹效果

不知道你们第一眼想到了什么,反正我是想到了下面这货

纯 CSS 实现斜纹效果

扩展阅读: 为什么很多理发店的门口设有旋转的圆筒灯箱?

然后..........然后 我就想实现一下这个效果, 然后...... 然后就是 到现在我也莫得游戏玩

纯 CSS 实现斜纹效果

最后实现的效果如下,纯天然 CSS 实现,开袋即食,绝不添加任何防腐剂,隔壁小孩都馋哭了

纯 CSS 实现斜纹效果

经过

二话不说, 打开 vscode 就开始撸,首先是 HTML 结构

<div class="cont">
        <div class="twill"></div>
        <div class="btn">查看详情</div>
    </div>
复制代码

这个很简单不多说,重点看一下斜纹的实现 :point_down::point_down::point_down:

.twill {
    width: 20px;
    height: 2000px;
    background: skyblue;
    position: absolute;
    left: 0px;
    top: -500px;
    transform: rotateZ(30deg);
    transform-origin: top left;
    box-shadow: 40px 0px 1px 1px rgba(255, 255, 255,0.6),
      80px 0px 1px 1px rgba(255, 255, 255,0.6),
      120px 0px 1px 1px rgba(255, 255, 255,0.6),
      160px 0px 1px 1px rgba(255, 255, 255,0.6),
      200px 0px 1px 1px rgba(255, 255, 255,0.6),
      240px 0px 1px 1px rgba(255, 255, 255,0.6),
      280px 0px 1px 1px rgba(255, 255, 255,0.6),
      320px 0px 1px 1px rgba(255, 255, 255,0.6),
      360px 0px 1px 1px rgba(255, 255, 255,0.6),
      400px 0px 1px 1px rgba(255, 255, 255,0.6),
      440px 0px 1px 1px rgba(255, 255, 255,0.6),
      480px 0px 1px 1px rgba(255, 255, 255,0.6),
      520px 0px 1px 1px rgba(255, 255, 255,0.6),
      560px 0px 1px 1px rgba(255, 255, 255,0.6),
      600px 0px 1px 1px rgba(255, 255, 255,0.6),
      640px 0px 1px 1px rgba(255, 255, 255,0.6);

  }
  
复制代码

通过 box-shadow 添加多条阴影,通过 transform 实现斜纹

最后当然是要让它自己动起来啦, 就决定是你了! 出来吧! animation !!!

纯 CSS 实现斜纹效果

代码在下面 :point_down::point_down::point_down:

@keyframes move {
    0% {
      left: 0px;
    }
  
    100% {
      left: 45px;
    }
  }
  .twill{
      animation: move 1s linear infinite ;
  }
  
复制代码

codePen 完整代码查看

结果

你问我结果? 结果就是

  • 到现在我都没玩上LOL

  • 这篇含水量99.99%的文章

  • 你们会给我点赞的,对吧?

  • 取色的时候没找到合适的工具, 然后就想用 electron 写一个拾色器

    纯 CSS 实现斜纹效果
  • 录制效果的时候, 想写一个 gif录制工具 ,最后找到一个感觉良好的工具 点我下载 ScreenToGif

请教大佬们一个问题,如何用 less 或者 scss 函数 生成这个长长的 box-shadow ? , 我用scss的循环试了一下, 失败了,我果然是个小菜鸟

纯 CSS 实现斜纹效果

没啥可写的了,那就给大家拜个晚年,祝大家晚年幸福!,逃~~~

我是子夜,一个除了水还是水的菜鸟前端,公众号: 暂无 ,QQ群: 暂无 ,( 前排出租广告位


以上所述就是小编给大家介绍的《纯 CSS 实现斜纹效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据结构与算法分析

数据结构与算法分析

Mark Allen Weiss / 冯舜玺 / 电子工业出版社 / 2016-8 / 89.00元

本书是数据结构和算法分析的经典教材,书中使用主流的程序设计语言C++作为具体的实现语言。书中内容包括表、栈、队列、树、散列表、优先队列、排序、不相交集算法、图论算法、算法分析、算法设计、摊还分析、查找树算法、k-d树和配对堆等。本书把算法分析与C++程序的开发有机地结合起来,深入分析每种算法,内容全面、缜密严格,并细致讲解精心构造程序的方法。一起来看看 《数据结构与算法分析》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换