表面一层黑色文字 中间一层白色文字 最低的一层是斑马条纹文字 要实现多层文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投个纯色出来。...于是思路要改一下，黑色和白色层是投影，斑马条纹是真正的文字本身。 image.png 斑马纹思路 看到这种条纹效果，我想到了背景图渐变。...transparent; /* 使用一个非标准的方法覆盖文字填充颜色，以防color被其他代码覆盖 */ text-shadow: 6px -6px #000, 4px -4px #fff; /* 设置顶层黑色投影和中层白色投影
早晨在前端交流群里，有个朋友问css实现单侧投影的办法，因为这个朋友前几天刚发过照片，晒他买的csssecrets，我问他你书买来还没看吗？ 他说来不及翻书了，项目比较急上来问一下。...box-shadow做单边投影的核心是第四个参数 扩张半径，这个参数会根据你指定的值去扩大或缩小投影尺寸，如果我们用一个负的扩张半径，而他的值刚好等于模糊半径，那么投影的尺寸就会与投影所属的元素尺寸完全一致...，除非使用偏移量来移动他，否则我们将看不到任何投影。...因此，如果此时给予一边一个正的偏移，你就会在该侧看到单边投影的效果。 顶部单边投影： box-shadow: #000 0 -5px 5px -5px; <!...底部单边投影： box-shadow: #000 0 5px 5px -5px; <!
来自团队 邓康 同学的分享 投影 把三维物体变为二维图形表示的过程称为投影变换。 根据投影中心与投影平面之间距离的不同，投影可分为 「平行投影」 和 「透视投影」。...平行投影的投影中心与投影之间的距离为无穷大，如左图；而对透视投影，这距离是有限的，如右图。 在 CSS 中，使用 transform3d 变换后的图形也就有了投影的概念。...一个消失点 两点透视 视平线 两个消失点 三点透视 视平线 三个消失点 在css中，只有一点透视的概念。...平行投影和透视投影 无数条投影线组成投影空间 透视投影的投影空间用四棱锥表示 平行投影的投影空间用四棱柱表示 最终投影得出的画面由棱柱/棱锥的每个截面（缩放到同一大小后）合成，所以透视投影就会出现近大远小...，而平行投影反映了物体之间的绝对大小 css透视 perspective css透视需要关注几个点 如图所示， 投影中心：眼睛 投影面：drawing surface 即屏幕最终显示的效果 投影面的
30行代码实现纯CSS—3种换肤 老规矩，先把代码给大家，拿去粘贴直接用，无需引用，不好用评论底下随便喷，我一条一条看。 <!...CSS中的checked意义不同，意为此时被选中，那么我执行…
HTML： 1 按钮 CSS： 1 .shake{ 2 width: 120px; 3 height: 33px
完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。 设计按钮 body
JS实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍CSS，在此就不贴相关的JS代码了。本文为各位同学推荐一个很少见很少用的CSS属性：position:sticky。...简单的「两行CSS核心代码」就能完成「十多行JS核心代码」的功能，何乐而不为呢。 实现 简单回顾position常用的值，怎样用就不说了，各位同学应该都熟透了。...两行CSS核心代码分别是position:sticky和top/bottom:npx。
这次要用纯CSS做一个波点背景，先上图看看效果。 我把这个效果写在 body 上，如果你不喜欢这个配色也可以自己手动改改。
1写在前面 使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。 一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。...而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。 当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。...3纯CSS实现波浪效果 你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为： 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 4使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图...HTML 结构如下： CSS 代码如下： 效果图： 虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低！
html> per-Css-ol...15:43:52 IE8+ 、FF、chrome...modern Browser my website:http://www.lookcss.com --> <style type="text/<em>css</em>
首发：krissarea.gitee.io (https://krissarea.gitee.io/blog/css/others/css-form-validation.html) 作者：陈大鱼头...$refs[formName].resetFields(); } } } 以上就是我们常规的表达验证了，基本就都是用JS来完成的，那么我们能不能用CSS来实现呢...这里先上DEMO (https://krisachan.github.io/css/css-form-validation.html) CSS实现表单验证 上面的表单验证就完全是由CSS来实现的，核心属性就是... CSS与 JS里的验证规则不一样...) 如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。
在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后再设置一下背景的不透明度就能实现一个简单的毛玻璃效果。...也是 纯CSS 可以做出来的。
一直以来，使用纯 CSS 实现波浪效果都是十分困难的。 因为实现波浪的曲线需要借助贝塞尔曲线。 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。...纯 CSS 实现波浪效果 好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。 你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...Wave Loading 虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低！
需要实现时间轴列表，左边一串小圆点，右边是列表内容，需要小圆点位置与列表项对应，最终效果如下：
前言 掘金是一个技(摸)术(鱼)社区，每天上班开机第一时间就是打开掘金快乐的学(摸)习(鱼)，借着代码块的功能推出，今天来用自己的渣渣CSS试着画一下yoyo摸鱼(click) 代码块 https:/...yoyo yoyo由肥胖的身体+眼睛+嘴巴+小手手组成 1.1 yoyo身体(包括眼睛和嘴巴) yoyo的身体的布局就是一个div,通过伪元素::before和::after画出两个椭圆的四分之一组成，使用css... css...-- 小手手 --> css .hand-left...; top: 0px; left: 9px; z-index: 4; } 3.星星 星星的直接很简单，就直接用✦这个符号代替就行，接着使用动画操作透明度来达到闪烁的效果 css
在很多很多年前，我购买了《CSS揭秘》这本书，在里面发现了作者 Lea Verou 的网站。我必须推荐大家阅读《CSS揭秘》，里面的每个例子都让我拍案叫绝。...在我个人看来，这本书是每个打算从初升高的前端必读的css书籍，它是一本进阶级的书，不会跟你讲过多的css基础。...再和我的分析做对比~ 动手实现 直接给答案： 用 background-image 的渐变来实现； 用2个直角三角形可以组合成1个矩形，而这两个三角形又有点色差的话，就能做出类似砖块的效果~ 其实本例和 《纯CSS
本文源码自Github开源项目CSS inspiration——CSS灵感，大家可以通过文章底部的阅读原来来访问原文地址 ?...抖音logo 抖音我们每天都在刷，抖音的logo大家也再熟悉不过，今天跟大家分享一下如何用纯CSS实现抖音的logo 拆分抖音logo 第一步，抖音logo是两个音符♪叠加、混合而成的 ?...根据上面的图片，我们可以把抖音logo拆分成三个部分： 中间的竖线 左下角的四分之三圆环 右上角的四分之一圆环 关键技术点 第一步中的叠加混合部分可以利用CSS3中的 mix-blend-mode:...代码 html代码 css代码
一直以来，使用纯 CSS 实现波浪效果都是十分困难 因为实现波浪的曲线需要借助贝塞尔曲线。 ? 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。...纯 CSS 实现波浪效果 好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。 你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为 中间高，两边低的效果不符合物理学原理，看上去十分别扭； 可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图 好，既然掌握了这种方法...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...CodePen Demo -- Pure Css Wave Loading 虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低
骨骼动画 关于前端骨骼动画的实现可以参考《骨骼动画原理与前端实现浅谈》，里面简单提及了css和canvas两种实现方式。这里将以这个心愿牌摆动动画为例，和大家一起研究如何使用css来实现。...那么js实现中是通过先计算大腿位置，再由大腿位置计算小腿位置来实现联结的，而css该怎么实现呢？ 2.5 纯css实现 回顾最关键的地方：关键元素带着子元素一起运动，子元素在此基础上自己运动。...，要实现关键元素和子元素一起运动，在css里面，只要关键元素包裹子元素即可！，这就是css实现骨骼动画的基石。 <!...(3deg); } 50% { transform: rotate(-3deg);} 100% { transform: rotate(3deg);} } End 纯CSS...本文主要通过简单的案例来加深大家对骨骼动画的原理性的认识，至于最后大家用CSS还是用JS来实现，就是“杀鸡要不要用牛刀”的问题了。 个人认为，只要屠龙刀在手，用不用已经不重要了。加油?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
