Css技巧

前言何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些应该都是我们从小到大写文章而接触到的写作技巧。 作为程序猿的我们，写代码同样也需要大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满(哈哈，这个才是重点)。因此，我整理下三年来自己使用到的一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 目录既然写文章有这么多的写作技巧，那么我也需要对CSS开发技巧整理一下，起个易记的名字。 Layout Skill：布局技巧Behavior Skill：行为技巧Color Skill：色彩技巧Figure Skill：图形技巧Component Skill：组件技巧备注 代码只作演示用途，不会详细说明语法部分技巧示例代码过长，使用CodePen进行保存，点击在线演示即可查看兼容项点击链接即可查看当前属性的浏览器兼容数据，自行根据项目兼容需求考虑是否使用以下代码全部基于CSS进行书写，没有任何JS代码，没有特殊说明的情况下所有属性和方法都是CSS类型一部分技巧是自己探讨出来的，另一部分技巧是参考各位前端大神们的，都是一个互相学习的工程，大家一起进步Layout Skill使用vw定制rem自适应布局要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制场景：rem页面布局(不兼容低版本移动端系统)兼容：vw、calc())/* 基于UI width=750px DPR=2的页面 */html { font-size: calc(100vw / 7.5);}使用:nth-child()选择指定元素要点：通过:nth-child()筛选指定的元素设置样式场景：表格着色、边界元素排版(首元素、尾元素、左右两边元素)兼容：:nth-child())代码：在线演示 使用writing-mode排版竖文要点：通过writing-mode调整文本排版方向场景：竖行文字、文言文、诗词兼容：writing-mode代码：在线演示 使用text-align-last对齐两端文本要点：通过text-align-last:justify设置文本两端对齐场景：未知字数中文对齐兼容：text-align-last代码：在线演示 使用:not()去除无用属性要点：通过:not()排除指定元素不使用设置样式场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)兼容：:not())代码：在线演示 使用object-fit规定图像尺寸要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸场景：图片尺寸自适应兼容：object-fit代码：在线演示 使用overflow-x排版横向列表要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看场景：横向滚动列表、元素过多但位置有限的导航栏兼容：overflow-x代码：在线演示 使用text-overflow控制文本溢出要点：通过text-overflow:ellipsis对溢出的文本在末端添加...场景：单行文字溢出、多行文字溢出兼容：text-overflow、line-clamp、box-orient代码：在线演示 使用transform描绘1px边框要点：分辨率比较低的屏幕下显示1px的边框会显得模糊，通过::before或::after和transform模拟细腻的1px边框场景：容器1px边框兼容：transform代码：在线演示 使用transform翻转内容要点：通过transform:scale3d()对内容进行翻转(水平翻转、垂直翻转、倒序翻转)场景：内容翻转兼容：transform代码：在线演示 使用letter-spacing排版倒序文本要点：通过letter-spacing设置负值字体间距将文本倒序场景：文言文、诗词兼容：letter-spacing代码：在线演示 使用margin-left排版左重右轻列表要点：使用flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐场景：右侧带图标的导航栏兼容：margin代码：在线演示 Behavior Skill使用overflow-scrolling支持弹性滚动要点：iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度场景：iOS页面滚动兼容：iOS自带-webkit-overflow-scrollingbody { -webkit-overflow-scrolling: touch;}.elem { overflow: auto;}使用transform启动GPU硬件加速要点：有时执行动画可能会导致页面卡顿，可在特定元素中使用硬件加速来避免这个问题场景：动画元素(绝对定位、同级中超过6个以上使用动画)兼容：transform.elem { transform: translate3d(0, 0, 0); /* translateZ(0)亦可 */}使用attr()抓取data-*要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上场景：提示框兼容：data-*、attr())代码：在线演示 使用:valid和:invalid校验表单要点：<input>使用伪类:valid和:invalid配合pattern校验表单输入的内容场景：表单校验兼容：pattern、:valid、:invalid代码：在线演示 使用pointer-events禁用事件触发要点：通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)，相当于<button>的disabled场景：限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转)兼容：pointer-events代码：在线演示 使用+或~美化选项框要点：<label>使用+或~配合for绑定radio或checkbox的选择行为场景：选项框美化、选中项增加选中样式兼容：+、~代码：在线演示 使用:focus-within分发冒泡响应要点：表单控件触发focus和blur事件后往父元素进行冒泡，在父元素上通过:focus-within捕获该冒泡事件来设置样式场景：登录注册弹框、表单校验、离屏导航、导航切换兼容：:focus-within、:placeholder-shown代码：在线演示 使用:hover描绘鼠标跟随要点：将整个页面等比划分成小的单元格，每个单元格监听:hover，通过:hover触发单元格的样式变化来描绘鼠标运动轨迹场景：鼠标跟随轨迹、水波纹、怪圈兼容：:hover代码：在线演示 使用max-height切换自动高度要点：通过max-height定义收起的最小高度和展开的最大高度，设置两者间的过渡切换场景：隐藏式子导航栏、悬浮式折叠面板兼容：max-height代码：在线演示 使用transform模拟视差滚动要点：通过background-attachment:fixed或transform让多层背景以不同的速度移动，形成立体的运动效果场景：页面滚动、视差滚动文字阴影、视差滚动文字虚影兼容：background-attachment、transform代码：在线演示 使用animation-delay保留动画起始帧要点：通过transform-delay或animation-delay设置负值时延保留动画起始帧，让动画进入页面不用等待即可运行场景：开场动画兼容：transform、animation代码：在线演示 使用resize拉伸分栏要点：通过resize设置横向自由拉伸来调整目标元素的宽度场景：富文本编辑器、分栏阅读兼容：resize代码：在线演示 Color Skill使用color改变边框颜色要点：border没有定义border-color时，设置color后，border-color会被定义成color场景：边框颜色与文字颜色相同兼容：color.elem { border: 1px solid; color: #f66;} 使用filter开启悼念模式要点：通过filter:grayscale()设置灰度模式来悼念某位去世的仁兄或悼念因灾难而去世的人们场景：网站悼念兼容：filter代码：在线演示 使用::selection改变文本选择颜色要点：通过::selection根据主题颜色自定义文本选择颜色场景：主题化兼容：::selection代码：在线演示 ...

不多废话，先上预览https://codepen.io/Ritr/pen/W...这一次还是使用<input type="checkbox">的选中与否来实现展开、收起二级菜单的。 第一步：初始化默认二级菜单的li高度为0 选择一级菜单时，将二级菜单高度设置为20px 这样设置是为了方便我们以后添加动画效果 html <ul class="menu"> <li class="main-menu"> <label for="ck1"> <span>水果</span> </label> <input id="ck1" type="checkbox"> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> <li class="main-menu"> <label for="ck2"> <span>水果</span> </label> <input id="ck2" type="checkbox" checked> <ul class="sub-menu-container"> <li class="sub-menu checked">橘子</li> <li class="sub-menu checked">香蕉</li> <li class="sub-menu checked">苹果</li> </ul> </li> </ul>css /* 初始化 */*{ margin:0; padding:0}.container{ width:500px; margin:0 auto; text-align:center;}.menu{ width:200px; display:inline-block;}li{ list-style:none; cursor:pointer; text-align:left; text-indent:5px;}.main-menu{ background:#0099CC; margin:1px 0;}.sub-menu{ background:#00CCFF; margin:1px 0; overflow:hidden; height:0;}.sub-menu.checked{ height:20px;}效果图 第二步：选中checkbox时展开二级菜单，取消选择时收起二级菜单划重点--注意label和input之间的位置html <ul class="menu"> <li class="main-menu"> <label for="ck3"> <span>水果</span> </label> <input id="ck3" class="ck" type="checkbox"> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> <li class="main-menu"> <label for="ck4"> <span>水果</span> </label> <input id="ck4" class="ck" type="checkbox" checked> <ul class="sub-menu-container"> <li class="sub-menu">橘子</li> <li class="sub-menu">香蕉</li> <li class="sub-menu">苹果</li> </ul> </li> </ul>css ...

直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果。原理以上面的 Demo 为例子，要使用 CSS 实现鼠标跟随，最重要的一点就是：如何实时监测到当前鼠标处于何处？OK，其实很多 CSS 效果，都离不开 障眼法 二字。要监测到当前鼠标处于何处，我们只需要在页面上铺满元素即可：我们使用 100 个元素，将整个页面铺满，hover 的时，展示颜色，核心 SCSS 代码如下：<div class=“g-container”> <div class=“position”></div> <div class=“position”></div> <div class=“position”></div> <div class=“position”></div> … // 100个</div>.g-container { position: relative; width: 100vw; height: 100vh;}.position { position: absolute; width: 10vw; height: 10vh;}@for $i from 0 through 100 { $x: $i % 10; $y: ($i - $x) / 10; .position:nth-child(#{$i + 1}) { top: #{$y * 10}vh; left: #{$x * 10}vw; } .position:nth-child(#{$i + 1}):hover { background: rgba(255, 155, 10, .5) }}可以得到这样的效果：好的，如果把每个元素的 hover 效果去掉，那么这个时候操作页面，其实是没有任何效果的。但同时，通过 :hover 伪类，我们又是可以大概得知当前鼠标是处于页面上哪个区间的。好继续，我们再给页面添加一个元素（圆形小球），将它绝对定位到页面中间：<div class=“g-ball”></div>.ball { position: absolute; top: 50%; left: 50%; width: 10vmax; height: 10vmax; border-radius: 50%; transform: translate(-50%, -50%);}最后，我们借助 ~ 兄弟元素选择器，在 hover 页面的时候（其实是 hover 一百个隐藏的 div），通过当前 hover 到的 div，去控制小球元素的位置。@for $i from 0 through 100{ $x: $i % 10; $y: ($i - $x) / 10; .position:nth-child(#{$i + 1}):hover ~ .ball { top: #{$y * 10}vh; left: #{$x * 10}vw; }}至此，一个简单的纯 CSS 实现鼠标跟随的效果就实现了，方便大家理解，看看下面这张图就明白了：完整的DEMO，你可以戳这里看看：CodePen Demo – CSS实现鼠标跟随存在的问题就上面的 Demo 来看，还是有很多瑕疵的，譬如精度太差只能控制元素运动到 div 所在空间，而不是精确的鼠标所在位置，针对这一点，我们可以通过增加隐藏的 div 的数量来优化。譬如将 100 个平铺 div 增加到 1000 个平铺 div。运动不够丝滑效果看起来不够丝滑，这个可能需要通过合理的缓动函数，适当的动画延时来优化。燥起来吧嗯。原理掌握了，下面我们来看看，使用这个技巧还能鼓捣出什么有意思的效果。CSS鼠标跟随按钮效果一开始，我在 CodePen 上看到了下面这个效果，使用了 SVG + CSS + JS 实现，我就想着，仅用 CSS，能不能 copy 一下：CodePen Demo – Gooey mouse follow好吧，理想很丰满，现实很骨感。仅仅使用 CSS，还是有诸多限制。但是我们还是可以使用上述介绍的方法实现鼠标跟随利用 CSS 滤镜 filter: blur() contrast() 模拟元素融合，具体可以看看这篇文章：你所不知道的 CSS 滤镜技巧与细节好，看看仅仅使用 CSS 的破产版模拟效果：有点太太太奇怪了，可以稍微收敛点效果，通过调整颜色，滤镜强度（就是各种尝试…），得到一个稍微好一丢丢丢的类似效果：Demo 戳我，CodePen Demo – CSS鼠标跟随按钮效果全屏鼠标跟随动画OK，继续，下面来点更炫的。嗯，就是那种华而不实的。如果我们控制的不止一个元素，而是多个元素。多个元素之间的动画效果再设定不同的 transition-delay ，顺序延迟运动。哇哦，想想就很激动。譬如这样：CodePen Demo – 鼠标跟随动画 PURE CSS MAGIC MIX如果我们能更有想象力一点，那么可以再碰撞出多一点的火花：这个效果是我非常喜欢的一位日本 CodePen 作者 Yusuke Nakaya 的作品，源代码: Demo – Only CSS: Water Surface 鼠标跟随指示当然，不一定要指示元素运动。使用 div 铺满页面捕捉元素当前位置的技巧，还可以运用在其他一些效果上，譬如指示出鼠标运动轨迹：默认的铺满背景的 div 的 transition-duration: 0.5s当 hover 到元素背景 div 的时候，改变当前 hover 到的 div 的 transition-duration: 0s，并且 hover 的时候赋予背景色，这样当前 hover 到的 div 会立即展示当鼠标离开 div，div 的 transition-duration 变回默认状态，也就是 transition-duration: 0.5s，同时背景色消失，这样被离开的 div 的背景色将慢慢过渡到透明，造成虚影的效果CodePen Demo – cancle transition 最后其实还有很多有意思的用法，感兴趣的同学可以自己动手，更多的去尝试，组合。经常有人会问我，这些奇奇怪怪的用法实际业务中用得上吗？到底有用没用。额，我的看法是也许业务中真的用不上或者应用场景极为有限，但是多了解一些，能在遇到问题的时候多点选择，多一些思考的空间，更好的发散思维，至少是无害吧。更多你可能想都想不到的有趣的 CSS 你可以来这里瞧瞧：CSS-Inspiration – CSS灵感更多精彩 CSS 技术文章汇总在我的 Github – iCSS ，持续更新，欢迎点个 star 订阅收藏。好了，本文到此结束，希望对你有帮助 :)如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。 ...

1、元素的BFC特性BFC全称为”Block Formartting Context”，中文为”块级格式化上下文”。它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。BFC布局规则：1）bfc内部的元素会在垂直方向，一个接一个地放置2）盒子垂直方向的距离有margin决定，属于同一个bfc的两个相邻元素的margin会发生重叠3）每个盒子的左外边缘(margin-left)会与其父元素的左边缘(border-left)相接触4）bfc的区域会通过变窄来自适应而不会与float元素重叠在一起5）bfc的高度计算时，浮动元素也参与计算。即创建了新的bfc的元素的高度会把内部浮动元素的高度也算进去6）bfc是页面上一个隔离的独立容器，容器内的子元素不会影响到外面的元素；同理容器内的子元素也不会影响到父元素外面的其他元素。创建BFC的条件：a）html元素b）float的值不为nonec）overflow的值为auto、hidden或scrolld）display的值为table-cell、inline-block、table-caption、flex、inline-flexe）position的值不为relative和static2、BFC作用—-理解BFC(个人理解)1、因为bfc内部的元素与外部的元素绝对不会互相影响，因此当bfc元素的兄弟元素有浮动时，它不应该影响bfc内部元素的布局，所以bfc会通过变窄来自适应，而不会与浮动元素发生重叠；2、同样的，当bfc内部有浮动时，为了不影响外部元素的布局，bfc计算高度时会把浮动元素的高度也计算进去。利用bfc避免margin重叠也是同样的道理。3、BFC应用之：利用bfc特性实现左侧不固定，右侧也不固定的布局图片来自：张鑫旭–粉丝群第1期CSS小测点评与答疑如图：这种布局在移动端一般比较常见，左侧文字宽度不固定，右测文字宽度不固定，文字断行后也要保持同样的行距。在移动端中可以使用flex布局，grid布局，如果不使用css3布局，我们能否实现呢？答案是可以的，可以使用 浮动+bfc 特性！<style> body,dl,dd,dt,p{ padding: 0;margin: 0; } dl{ width: 30%; padding: 10px; border: 1px solid #ccc; margin: 10px auto; } dt{ float: left; margin-right: 25px; } dd{ margin-bottom: 10px; word-break: break-all; text-align: left;/* 为dd元素创建一个bfc，根据bfc布局规则第4条，bfc的区域会通过变窄来自适应而不会与float元素重叠在一起，所有这就达到了我们想要的效果。 / overflow: hidden; }</style><dl class=“dl2”> <dt>手机系统</dt> <dd>Android</dd> <dt>登录方式</dt> <dd>QQ互联登录</dd> <dt>绑定事件</dt> <dd>2019-01-02 00:01</dd> <dt>其他</dt> <dd>FAsfsdafsadfasdfSDsadfsadfsd4545454555454545sdafsdf</dd> <dt>备注</dt> <dd>如果需要修改绑定，请联系HR进行修改！</dd></dl>下图是dd创建了bfc与未创建bfc的对比：由图片可以看出，创建了bfc的dd的宽度自适应的变窄了，而未创建bfc的dd却与浮动的dt重合了。4、BFC应用之：利用bfc特性解决margin塌陷问题margin塌陷是一般指在标准文档流中，两个垂直排列的元素，一设置个margin-bottom，另一个设置margin-top，此时两个元素的margin就会发生重叠。margin重叠规则：1）margin的值都为正数时，取它们之间较大的值2）margin的值都为负数时，取两个margin绝对值中较大的值3）两个margin一正一负时，取两个margin相加的和margin塌陷与不塌陷效果：<style> body,dl,dd,dt,p{ padding: 0;margin: 0; } .float-container{ width: 30%; margin: 50px auto; padding: 10px; border: 1px solid #ccc; overflow: hidden; } .float-box{ / 元素浮动后就创建了bfc，两个元素就创建了两个bfc，根据BFC布局规则第5条，.float-container的高度会把浮动元素的高度也计 算进去；根据BFC布局规则第2条，两个.float-box分别创建了2个bfc，因此它们之间的margin并不会重叠 / float: left; width: 100%; height: 60px; margin: 20px 0; color: #fff; } .float-box:nth-child(1){background-color: #ccc;} .float-box:nth-child(2){background-color: #f10;} .no-bfc-container{ width: 30%; margin: 50px auto; padding: 10px; border: 1px solid #ccc; } .no-bfc-box{ height: 60px; margin: 20px 0; color: #fff; } .no-bfc-box:nth-child(1){background-color: #ccc;} .no-bfc-box:nth-child(2){background-color: #f10;} .bfc-box{ / 根据BFC布局规则第2条，.bfc-box创建了一个bfc，与第一个.no-bfc-boxbu元素不属于同一个bfc，因此两个.no-bfc-box元素的 margin也不会发生重叠 */ overflow: hidden; }</style><body> <div class=“float-container”> margin未塌陷 <div class=“float-box”>margin: 20px 0;</div> <div class=“float-box”>margin: 20px 0;</div> </div> <div class=“no-bfc-container”> margin塌陷 <div class=“no-bfc-box”>margin: 20px 0;</div> <div class=“bfc-box”> <div class=“no-bfc-box”>margin: 20px 0;</div> </div> </div></body>6、参考文章1、https://www.zhangxinxu.com/wo… (引导文章)2、https://www.zhangxinxu.com/wo…3、https://www.w3cplus.com/css/u…4、https://blog.csdn.net/w362427…5、https://blog.csdn.net/shadow_… ...

1、什么是css权重？css6大基础选择器css权重指的是css6大基础选择符的优先级，优先级高的css样式会覆盖优先级底的css样式，优先级越高说明权重越高，反之亦然。css6大基础选择器：a）、id选择器(#box{})b）、类选择器(.box{})c）、属性选择器(a[href=“http://www.xxx.com”])d）、伪类和伪对象选择器(:hoevr{}和::after{})e）、标签类型选择器(div{})f）、通配符选择器(*{})2、css权重计算规则计算css权重是有一定规则的，根据w3c制定的css规范，css权重计算规则如下：a）、计算选择符中的id选择器的数量 一个id选择器为一个a，一个a为100 b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量 一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10 c）、计算标签类型选择器和伪对象选择器的数量 一个标签类型选择器、伪对象选择器为一个c，一个c为1 d）、忽略通配符选择器 通配符选择器忽略不计如下面这张图就是一个css选择器权重的例子：如果两个选择符的权重相同，则可依照”就进原则”来判断，最后定义的选择符会被采用。但尽量避免出现这种依靠定义的顺序决定选择符优先级的情况，因为在后续的维护中很难保证定义的顺序不会被打乱。

CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。效果图如下：具体的步骤如下：1、写出页面主体，<div> <img src=“Images/b.jpg” alt=""> <img src=“Images/c.jpg” alt=""> </div>2、通过定位使两张图片叠加在一起div img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; }3、设置第一张图片背面不可见div img:first-child { z-index: 1; backface-visibility: hidden; }4、添加旋转180度div:hover img { transform: rotateY(180deg); }完整代码：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> /* backface-visibility */ div { width: 250px; height: 170px; margin: 100px auto; position: relative; } div img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; } div img:first-child { z-index: 1; backface-visibility: hidden; } div:hover img { transform: rotateY(180deg); } </style></head><body> <div> <img src=“Images/b.jpg” alt=""> <img src=“Images/c.jpg” alt=""> </div></body></html>更多项目实战视频，免费分享，加入我的前端学习qun：784783012 点击：加入CSS 滚动的图片栏网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。主要原理是通过动画向左移动。首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。具体步骤如下：1、设置主体代码各处两组一样的图片<nav> <ul> <li><img src=“Images/1 (2).jpg” alt=""></li> <li><img src=“Images/2 (2).jpg” alt=""></li> <li><img src=“Images/3 (2).jpg” alt=""></li> <li><img src=“Images/1 (2).jpg” alt=""></li> <li><img src=“Images/2 (2).jpg” alt=""></li> <li><img src=“Images/3 (2).jpg” alt=""></li> </ul> </nav>2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。 nav { width: 750px; height: 170px; border: 1px solid red; margin: 100px auto;}3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性ul { width: 200%; height: 100%; animation: picmove 5s linear infinite forwards; }4、定义动画，主要是向左移动一组图片的长度 @keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } }5、增加鼠标悬停，动画暂停的效果ul:hover { animation-play-state: paused; }6、最后给nav 增加 overflow：hidden 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了完整代码如下：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } nav { width: 750px; height: 170px; border: 1px solid red; margin: 100px auto; overflow: hidden; } ul { width: 200%; height: 100%; animation: picmove 5s linear infinite forwards; } @keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } } img { width: 250px; height: 170px; float: left; } ul:hover { animation-play-state: paused; } </style></head><body> <nav> <ul> <li><img src=“Images/1 (2).jpg” alt=""></li> <li><img src=“Images/2 (2).jpg” alt=""></li> <li><img src=“Images/3 (2).jpg” alt=""></li> <li><img src=“Images/1 (2).jpg” alt=""></li> <li><img src=“Images/2 (2).jpg” alt=""></li> <li><img src=“Images/3 (2).jpg” alt=""></li> </ul> </nav></body></html>CSS 打开大门主要运用到了3D旋转和定位技术。效果如下：具体步骤如下：1、首先在页面主体加三个很简单的div标签： <div class=“door”> <div class=“door-l”></div> <div class=“door-r”></div> </div>2、给外层盒子（.door） 加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好 加上相对定位）。.door { width: 450px; height: 450px; border: 1px solid #000000; margin: 100px auto; background: url(Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px; }3、给左右的门设置相关属性，这里给出左盒子的 相关属性。右盒子只需将定位改为右边距离为0，以及将旋转轴改为右侧即可。.door-l { width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s; left: 0; border-right: 1px solid #000000; transform-origin: left; }4、添加门上的 小圆环，在这里是使用伪元素 before 进行添加的。　（1）、设置大小与边框 （2）、设置border-radius 为50% 让其变成圆形。　（3）、设置定位 垂直居中并靠里面有一定距离。.door-l::before { content: “”; border: 1px solid #000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); right: 5px; }5、最后设置旋转度数，我这里是设置了120度（注意度数的正负代表旋转方向）.door:hover .door-l { transform: rotateY(-120deg); }完整代码如下：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> <style> .door { width: 450px; height: 450px; border: 1px solid #000000; margin: 100px auto; background: url(Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px; } .door-l, .door-r { width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s; } .door-l { left: 0; border-right: 1px solid #000000; transform-origin: left; } .door-r { right: 0; border-left: 1px solid #000000; transform-origin: right; } .door-l::before, .door-r::before { content: “”; border: 1px solid #000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); } .door-l::before { right: 5px; } .door-r::before { left: 5px; } .door:hover .door-l { transform: rotateY(-120deg); } .door:hover .door-r { transform: rotateY(120deg); } </style></head><body> <div class=“door”> <div class=“door-l”></div> <div class=“door-r”></div> </div></body></html>更多项目实战视频，免费分享，加入我的前端学习qun：784783012 点击：加入 ...

只用 CSS 就能做到的像素画/像素动画原文链接：box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる作者推特：bc_rikko作者的推特里面有不少例子，有能力的同学可以看一下这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法。虽说纯 CSS 就能做到，但是为了更高的可维护性，也会顺便介绍使用 Sass 的制作方法。上面的马里奥和 Minecraft 方块都没有使用 JavaScript，单纯使用 CSS 动画制作。关于 box-shadow 属性绘制像素点可以借助 box-shadow 属性。原本 box-shadow 属性用于制作阴影效果，先介绍一下基本用法。该属性的写法有几种：box-shadow: offset-x offset-y colorbox-shadow: offset-x offset-y blur-radius colorbox-shadow: offset-x offset-y blur-radius spread-radius colorbox-shadow: inset offset-x offset-y coloroffset-x 和 offset-y 用于指定阴影偏移位置。以元素的左上角为原点，指定 XY 轴移动的位置。color 字面意思，指定阴影颜色。blur-radius 指定模糊效果的半径。跟 border-radius 差不多。spread-raduis 模糊范围的扩大与缩小。inset 关键字可以使阴影效果显示在元素内则。文字说明或许不够形象，我们可以直接看效果：https://jsfiddle.net/bc_rikko…实际效果如下，每个值会造成什么影响应该能很直观地看懂。基础：描绘一个像素点box-shadow 基础都明白了，就可以进入下一步：描绘一个像素点。对一个边长 100px 的正方形使用 box-shadow：<div class=“container”> <div class=“box”></div></div><style>* { /* 为了方便看到元素而添加的边框（不加也行） / box-sizing: border-box;}.container { / 长和宽包括 box-shadow / width: 200px; height: 200px;}.box { / 元素属性 / width: 100px; height: 100px; border: 2px solid #777; / 在元素右下角相同大小的方块 / box-shadow: 100px 100px rgba(7,7,7,.3);}</style>如图所示，使用 box-shadow 描绘了一个与元素相同大小的阴影。代码的意思是把一个 100px 的方形的影子放到 (100px, 100px) 的位置。进阶：用 box-shadow 属性绘制像素画完成预想图这两个都是 5✖️5 的像素画，我们先从左边开始：<div class=“container”> <div class=“pixel one”></div></div><style>.container { / 像素画的大小 / width: 100px; height: 100px;}.pixel { / 使伪元素的位置可调整 / position: relative;}.pixel::before { content: “”; / 一个点的大小(例:20px x 20px) / width: 20px; height: 20px; / box-shadow 着色，伪元素设为透明 / background-color: transparent; / 调整伪元素位置，让左上角成为(0,0) / position: absolute; top: -20px; left: -20px;}.pixel.one::before { box-shadow: / 列　行 色 / / 第1列 / 20px 20px #FB0600, 20px 40px #FC322F, 20px 60px #FC6663, 20px 80px #FD9999, 20px 100px #FECCCB, / 第2列 / 40px 20px #60169F, 40px 40px #7A23B0, 40px 60px #964DC2, 40px 80px #B681D9, 40px 100px #D8BEED, / 第3列 / 60px 20px #1388BC, 60px 40px #269DC9, 60px 60px #55B3D7, 60px 80px #88CAE2, 60px 100px #BFE3EF, / 第4列 / 80px 20px #ACD902, 80px 40px #BDE02D, 80px 60px #CDEA5E, 80px 80px #DBEF8E, 80px 100px #F4FBC8, / 第5列 / 100px 20px #FB8F02, 100px 40px #FDA533, 100px 60px #FDBB64, 100px 80px #FED39A, 100px 100px #FDE8C9;}</style>首先，box-shadow 生产的影子大小不包括本体元素的大小，container 类的大小设为像素画完成后的大小就行。接着，box-shadow 的影子大小由，pixel 类的大小决定，所以把 width 和 height设定为 20px。实际的点是 before 伪元素绘制的，pixel 的 20px 正方形会在左上角留下空位，为此可以使用 position: absolute 调整。最后使用 box-shadow 逐格绘制像素画。接着实现右边的像素画。.pixel.two::before { box-shadow: 20px 20px #704b16, 40px 20px #704b16, 60px 20px #704b16, 80px 20px #704b16, 100px 20px #704b16, 20px 40px #704b16, 40px 40px #fdb778, 60px 40px #fdb778, 80px 40px #fdb778, 100px 40px #704b16, 20px 60px #fdb778, 40px 60px #333333, 60px 60px #fdb778, 80px 60px #333333, 100px 60px #fdb778, 20px 80px #fdb778, 40px 80px #fdb778, 60px 80px #fdb778, 80px 80px #fdb778, 100px 80px #fdb778, 20px 100px #fdb778, 40px 100px #c70300, 60px 100px #c70300, 80px 100px #c70300, 100px 100px #fdb778;}应用：使用 Sass 编写可维护像素画上面写的几个例子，至少我是没什么信心去维护好他们。5x5 的像素画要写 25 次属性值，一般的 16x16 则是多达 256 个值。所以，我们可以使用 Sass 编写可维护像素画。Sass 环境搭建可以参考以下文章（日语）https://kuroeveryday.blogspot…Sass 使用 mixin（function 亦可）生成样式的方法：@mixin pixelize($matrix, $size, $colors) { $ret: “”; @for $i from 1 through length($matrix) { $row: nth($matrix, $i); @for $j from 1 through length($row) { $dot: nth($row, $j); @if $dot != 0 { @if $ret != "" { $ret: $ret + “,”; } $color: nth($colors, $dot); $ret: $ret + ($j * $size) + " " + ($i * $size) + " " + $color; } } } box-shadow: unquote($ret + “;”);}$heart-colors: (#333, #f11416, #831200);$heart: ( (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0), (0,0,1,1,1,0,0,0,0,0,1,1,1,0,0,0), (0,1,2,2,2,1,0,0,0,1,2,2,3,1,0,0), (1,2,0,0,2,2,1,0,1,2,2,2,2,3,1,0), (1,2,0,2,2,2,2,1,2,2,2,2,2,3,1,0), (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0), (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0), (1,2,2,2,2,2,2,2,2,2,2,2,2,3,1,0), (0,1,2,2,2,2,2,2,2,2,2,2,3,1,0,0), (0,0,1,2,2,2,2,2,2,2,2,3,1,0,0,0), (0,0,0,1,2,2,2,2,2,2,3,1,0,0,0,0), (0,0,0,0,1,2,2,2,2,3,1,0,0,0,0,0), (0,0,0,0,0,1,2,2,3,1,0,0,0,0,0,0), (0,0,0,0,0,0,1,3,1,0,0,0,0,0,0,0), (0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0), (0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0));.icon { width: 20px; height: 20px; @include pixelize($heart, 20px, $heart-colors);}定义名为 pixelize 的 mixin，把像素画的矩阵（$heart）像素点的大小（20px）颜色列表（$hearts-colors）传入其中，即可生成 box-shadow 属性。像素画的矩阵用数字 0～N 表示，0 为透明，1～n 为颜色列表对应颜色。如果有代码高亮的话，像素画的图案就一目了然啦。与原生 CSS 相比，这样简单多了吧？如果这样都觉得麻烦，可以使用 CSS 像素画生成器～CSSドット絵ジェネレータ番外篇：制作像素动画之前 icon 类直接使用 box-shadow 属性绘制像素画，在制作像素动画时，需要使用 CSS animation。.mario { width: 8px; height: 8px; animation: jump 1s infinite, sprite 1s infinite;}/ 跳跃动作（上下移動） /@keyframes jump { from, 25%, 75%, to { transform: translateY(0); } 50% { transform: translateY(calc(8px * -8)); }}/ 普通状态和跳跃状态的像素画 /@keyframes sprite { / 对比 animation-timing-function: steps(n) * 使用百分比可以更细致的调整动画时间 / from, 24%, 76%, to { box-shadow: / 普通状态的像素画 / } 25%, 75% { box-shadow: / 跳跃状态的像素画 */ }}使用 CSS 动画修改 box-shadow 和元素的位置，看起来就像是跳起来一样。详细代码可以在 github 仓库中了解https://github.com/BcRikko/cs… ...

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 box-shadow 与 filter:drop-shadow，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来单侧投影先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：OK，那如果要生成一个单侧的投影呢？我们来看看 box-shadow 的用法定义：{ box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#}以 box-shadow: 1px 2px 3px 4px #333 为例，4 个数值的含义分别是，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径。这里有一个小技巧，扩张半径可以为负值。继续，如果阴影的模糊半径，与负的扩张半径一致，那么我们将看不到任何阴影，因为生成的阴影将被包含在原来的元素之下，除非给它设定一个方向的偏移量。所以这个时候，我们给定一个方向的偏移值，即可实现单侧投影：CodePen Demo – css单侧投影投影背景 / 背景动画接着上面的说。很明显，0 = -0，所以当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们也可以得到一个和元素大小一样的阴影，只不过被元素本身遮挡住了，我们尝试将其偏移出来。CSS代码如下：div { width: 80px; height: 80px; border: 1px solid #333; box-sizing: border-box; box-shadow: 80px 80px 0 0 #000;}得到如下结果：有什么用呢？好像没什么意义啊。额，确实好像没什么用。不过我们注意到，box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）。但是 background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的。这又扯到哪里去了。好我们回来，利用上面的特性，我们可以利用 box-shadow 实现原本只能利用渐变才能实现的背景图：用 box-shadow，实现它的 CSS 代码如下（可以更简化）：.shadow { position: relative; width: 250px; height: 250px;}.shadow::before { content: “”; position: absolute; width: 50px; height: 50px; top: -50px; left: -50px; box-shadow: 50px 50px #000, 150px 50px #000, 250px 50px #000, 50px 100px #000, 150px 100px #000, 250px 100px #000, 50px 150px #000, 150px 150px #000, 250px 150px #000, 50px 200px #000, 150px 200px #000, 250px 200px #000, 50px 250px #000, 150px 250px #000, 250px 250px #000;}用渐变来实现的话，只需要这样：.gradient { width: 250px; height: 250px; background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%); background-size: 100px 100px;}为什么选择更为复杂的 box-shadow 呢？因为它可以进行补间动画，像这样，这是使用渐变做不到的：CodePen Demo – box-shadow实现背景动画 当然，这只是个示例 Demo，运用点想象力还有很多有意思的效果，再贴一个：CodePen Demo – CSS Checker Illusion( By David Khourshid )嗯，很有意思，就是实际用途可能不大。立体投影好，我们继续。下一个主题是立体投影。这个说法很奇怪，阴影的出现，本就是为了让原本的元素看起来更加的立体，那这里所谓的立体投影，是个怎么立体法？这里所谓的立体投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我们使用其他元素或者属性模拟元素的阴影。而这样做的目的，是为了能够突破 box-shadow 这类元素的一些定位局限。让阴影的位置、大小、模糊度可以更加的灵活。OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体：上图 div 只是带了一个非常浅的 box-shadow ，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样：OK，最后对这个用伪元素生成的元素进行一些虚化效果（filter或者box-shadow都可以），就可以实现一个边角看起来像被撕开的立体效果：代码非常简单，伪 CSS 代码示意如下：div { position: relative; width: 600px; height: 100px; background: hsl(48, 100%, 50%); border-radius: 20px;}div::before { content: “”; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; border-radius: 10px; background: hsl(48, 100%, 20%); transform: translate(0, -15%) rotate(-4deg); transform-origin: center center; box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);}所以总结一下：立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，然后对其进行 rotate 以及定位到合适位置，再赋于阴影操作颜色的运用也很重要，阴影的颜色通常比本身颜色要更深，这里使用 hsl 表示颜色更容易操作，l 控制颜色的明暗度还有其他很多场景：CodePen Demo – 立体投影文字立体投影 / 文字长阴影上面的立体效果在文字上就完全不适用了，所以对待文字的立体阴影效果，还需要另辟蹊径。正常而言，我们使用 text-shadow 来生成文字阴影，像这样：<div> Txt Shadow</div>—–div { text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);}嗯，挺好的，就是不够立体。那么要做到立体文字阴影，最常见的方法就是使用多层文字阴影叠加。Tips：和 box-shadow 一样，text-shadow 是可以叠加多层的！但是对于单个元素而言， drop-shadow 的话就只能是一层。好，上面的文字，我们试着叠加个 50 层文字阴影试一下。额，50 层手写，其实很快的好吧，手写真的太慢了，还容易出错，所以这里我们需要借助一下 SASS/LESS 帮忙，写一个生成 50 层阴影的 function 就好，我们每向右和向下偏移 1px，生成一层 text-shadow：@function makeLongShadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}div { text-shadow: makeLongShadow(hsl(14, 100%, 30%));}上面的 SCSS 代码。经过编译后，就会生成如下 CSS：div { text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400;}看看效果：额，很不错，很立体。但是，就是丑，而且说不上来的奇怪。问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。这个需求，SASS 可以很好的实现，下面是两个 SASS 颜色函数：fade-out 改变颜色的透明度，让颜色更加透明desaturate 改变颜色的饱和度值，让颜色更少的饱和关于 SASS 颜色函数，可以看看这里：Sass基础—颜色函数我们使用上面两个 SASS 颜色函数修改一下我们的 CSS 代码，主要是修改上面的 makeLongShadow function 函数：@function makelongrightshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}好，看看最终效果：嗯，大功告成，这次顺眼了很多~CodePen Demo – 立体文字阴影当然，使用 CSS 生成立体文字阴影的方法还有很多，下面再贴出一例，使用了透明色叠加底色的多重线性渐变实现的文字立体阴影，感兴趣的同学可以去看看具体实现：线性渐变配合阴影实现条纹立体阴影条纹字长投影上面提到了通过多层阴影叠加实现文字的立体阴影。运用在 div 这些容器上也是可以的。当然这里还有一种挺有意思的方法。假设我们，有一个矩形元素，希望给他添加一个长投影，像下面这样：要生成这种长投影，刚刚说的叠加多层阴影可以，再就是借助元素的两个伪元素，其实上面的图是这样的：关键点在于，我们通过对两个伪元素的 transform: skew() 变换以及从实色到透明色的背景色变化，实现了长投影的效果：CodePen Demo – 线性渐变模拟长阴影彩色投影通常而言，我们生成阴影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它们生成的阴影通常只能是单色或者同色系的。你这么说，难道还可以生成渐变色的阴影不成？额，当然不行。这个真不行，但是通过巧妙的利用 filter: blur 模糊滤镜，我们可以假装生成渐变色或者说是颜色丰富的阴影效果。假设我们有下述这样一张头像图片：下面就利用滤镜，给它添加一层与原图颜色相仿的阴影效果，核心 CSS 代码如下：.avator { position: relative; background: url($img) no-repeat center center; background-size: 100% 100%; &::after { content: “”; position: absolute; top: 10%; width: 100%; height: 100%; background: inherit; background-size: 100% 100%; filter: blur(10px) brightness(80%) opacity(.8); z-index: -1; }}看看效果：其简单的原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。嗯，最重要的就是这一句 filter: blur(10px) brightness(80%) opacity(.8); 。CodePen Demo – filter create shadow使用 box-shadow 实现的灯光效果好，上文主要是一些实现各种阴影的方法，接下来是效果篇。先来看看使用 box-shadow实现的一些灯光效果。box-shadow 实现霓虹氖灯文字效果这个效果也叫 Neon，Codepen 上有很多类似的效果，本质上都是大范围的 box-shadow 过渡效果与白色文字的叠加：CodePen Demo – box-shadow实现霓虹氖灯文字效果使用box-shadow实现阴影灯光show和上面的效果类似，本质上都是多重阴影的过渡效果，或许再来点 3D 效果？合理搭配，效果更佳：CodePen Demo – 使用box-shadow实现阴影灯光show使用 drop-shadow | box-shadow 实现单标签抖音 LOGO嗯哼，既然标题叫你所不知道的 CSS 阴影技巧与细节，那么本文也应该有一点奇技淫巧。先来看这个，单个标签实现仿抖音 LOGO，当然由于限定在一个元素，所以细节方面还是有很多瑕疵。想着仿的缘由是某天刷抖音的时候看见这个 LOGO 的一时兴起，CSS 写多了，看见什么东西都会条件反射的想这个能不能用 CSS 实现。我们先来看看抖音的 LOGO：其实很简单，主体其实是由3个颜色不同类似 J 的形状组成。而单独拎出一个，又可以把它分成四分之三圆、|以及㇏组成。正好，一个元素加上它的两个伪元素，刚好可以凑成这三个形状，我们试着实现以下，简单 CSS 代码如下：<div></div>—div { position: relative; width: 37px; height: 218px; background: #fff; &::before { content: “”; position: absolute; width: 100px; height: 100px; border: 37px solid #fff; border-top: 37px solid transparent; border-radius: 50%; top: 123px; left: -137px; transform: rotate(45deg); } &::after { content: “”; position: absolute; width: 140px; height: 140px; border: 30px solid #fff; border-right: 30px solid transparent; border-top: 30px solid transparent; border-left: 30px solid transparent; top: -100px; right: -172px; border-radius: 100%; transform: rotate(45deg); }}上面的代码就可以生成整个形状的主体：接下来就是轮到 filter: drop-shadow() 登场，它可以在元素呈现之前，为元素的渲染提供一些效果，最常见的也就用它渲染整体阴影。我们通常会用它来实现对话框的小三角与整个对话框的阴影效果，像下面这样，左边是使用 drop-shadow 的效果，右边是使用普通 box-shadow的效果。本文假定读者已经了解了 drop-shadow 的基本用法，上图效果来自这里：CodePen Demo – Drop-shadow vs box-shadow (2) By KsesoOK，回到我们正文，下面我们使用 filter: drop-shadow() 生成它的第一层左边的蓝色阴影，添加在主体 div：div { position: relative; width: 37px; height: 218px; background: #fff; filter:drop-shadow(-10px -10px 0 #24f6f0); &::before, &::after { … }}得到如下效果：好，接下来我们只需要再添加一层红色 filter: drop-shadow() 在右侧就大功告成！等等！哪里不对，上面我也有提到过， 和 box-shadow 一样，text-shadow 是可以叠加多层的！但是对于单个元素而言， drop-shadow 的话就只能是一层。也就是说，无法在 div 上再使用 filter: drop-shadow() 生成另一侧的红色投影，不过还好，我们还有两个伪元素的filter: drop-shadow() 以及 box-shadow 还没有用上，经过一番尝试：div { position: relative; width: 37px; height: 218px; background: #fff; filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%); box-shadow: 11.6px 10px 0 0 #fe2d52; &::before { …. filter: drop-shadow(16px 0px 0 #fe2d52); } &::after { …. filter:drop-shadow(14px 0 0 #fe2d52); }}我们分别再利用 div 的 box-shadow 以及两个伪元素的 filter: drop-shadow() ，在单个标签的限制下，最终结果如下：CodePen Demo – 单标签实现抖音LOGO总结一下：主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果当然，关于 CSS 阴影还有很多有意思的技巧和细节，本文限于篇幅不再一一罗列。我在 Git 上开了个仓库，CSS-Inspiration，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。更多有意思的 CSS 技巧可以在这里找到，而且是每日更新。最后感谢耐心读完。更多精彩 CSS 技术文章汇总在我的 Github – iCSS ，持续更新，欢迎点个 star 订阅收藏。好了，本文到此结束，希望对你有帮助 :)如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。 ...