css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果，小前端部知道如何实现，我看了一眼需要的效果，给他写了一个简单的 demo。...效果演示地址：http://runjs.cn/detail/al9vgagm 因为图标非常简单，我们可以用 css 把这俩图标画出来，然后做一个动画的过度效果就可以了。...更多内容请参考 CSS3 transition 属性 因为有三个横线，所以 :before 和 :after 两个伪元素还不够。我不愿意再去额外添加一个元素，使有更多的东西可以控制。...切换 X 的时候，只有两个元素，我只要把上面添加的阴影给去掉即可 box-shadow: none;。 然后就是位置的变化，和添加旋转了。位置变化不表。...其实，会了这个思路，我们可以做很多简单的动画效果的。 如果文章由于我学识浅薄，导致您发现有严重谬误的地方，请一定在评论中指出，我会在第一时间修正我的博文，以避免误人子弟。
二、相关文章以及一些技术点 搜了下，介绍的文章还不少，您可以参考： 武方博原创的html5实现全屏的api方法一文。...如果您正好处于节后综合症发病期，懒得点击上面链接，也可以看下面我精简出来的一些实用的东西： 全屏效果JavaScript实现 全屏效果click, mousedwon, mouseup事件才能触发 全屏方法为...FireFox浏览器对全屏元素进行的一些CSS属性的强设置，打开FireBug，查看系统默认样式，您会看到： 也就是，元素宽高100%显示，黑色背景，固定定位——这也是为什么FireFox浏览器下点击屏幕任意位置会退出全屏...而Chrome浏览器下，虽然默认对全屏元素也有CSS设置，但是寥寥： 好吧，基本上就是两个酱油CSS设置，背景色还是白色的。 现在问题来了？...解释：FireFox浏览器下的黑色背景就是全屏元素，其中图片的居中对齐是通过CSS控制的（:after伪类生成元素+vertical-align:middle实现），例如去掉text-align:center
我们希望，仅仅使用 CSS ，效果能再更进一步吗？能不能是这样子： ? 如何实现 嗯，我们需要使用 filter + mix-blend-mode 的组合来完成。...完整源码在我的 CodePen 上：CodePen Demo -- CSS Fire 另外一些效果 当然，掌握了这种方法后，这种生成火焰的技巧也可以迁移到其他效果去。...下图是我鼓捣到另外一个小 Demo，当 hover 到元素的时候，产生火焰效果： ? CodePen Demo -- Hover Fire 嗯，这些其实都是对滤镜及混合模式的一些搭配运用。...于我而言，虚心接受各种批评质疑及各种不同的观点，当然我是觉得搞技术一方面是实用，另一方面是兴趣使然，自娱自乐。...CodePen Demo -- 单标签实现滴水效果 值得注意的细节点 动画虽然美好，但是具体使用的过程中，仍然有一些需要注意的地方： CSS 滤镜可以给同个元素同时定义多个，例如 filter: blur
假设，我们有这样一张 Gif 图： 利用 CSS，我们尝试来搞一些事情。 图片的 Glitch Art 风 在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。...有的时候，我们只想更突出主题，不想过多的看到背景元素。 怎么办呢？ 这里，我介绍两种还不错的小技巧，当然，这个技巧对图片本身可能会有一点点要求。...总结 总结一下，本文通过一张 Gif 图，介绍了一些利用 CSS 来实现的有趣例子。 当然，CSS 的强大远不止这样，本文仅仅是挖掘了一个方向，从将人物凸显的方向，列出了一些我认为比较有意思的动效。...核心用到了混合模式、滤镜、background-clip、CSS-Doodle 以及配合了一些动画，这些日常中大家可能用的不太多的属性，如果你对这些属性还不是特别了解，希望进阶一下，不妨再看看我的这些文章...深入浅出 CSS 动画 最后 好了，本文到此结束，希望本文对你有所帮助 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。
我其实很长一段时间没有写 CSS 了，对于里面的一些细节也比较模糊了，因此决定重拾 CSS，来重新捋一捋这题目中的一些知识点。...（本文大多采用的讲解方式为 w3 的 CSS 标准 + MDN，如果对标准比较熟悉的大神请跳过这篇文章） ❝通过标准分析有什么好处？最权威的解答，能够少走弯路，不会出错。...❝本文所有 demo 都存放于 https://github.com/hua1995116/node-demo/tree/master/css-margin ❞ ::after 伪元素有什么特殊的魔法吗...::after 伪元素有什么特殊的魔法吗？ -> 伪元素(Pseudo elements) margin-top:100% 为什么能够自适应宽度？...相信如果你把以上搞懂了，面试官对你深层次的灵魂追问，你也能对答如流了。注意本文的一些专有名词，我都用英文多次标注，这也许未来会对你有所帮助。 稳住，我们能赢！
最近我在 CodePen 上看到了这样一个有意思的动画 整个动画效果是在一个标签内，借助了 SVG PATH 实现。其核心在于对渐变（Gradient）的究极利用。...这里，可以得到技巧 5。 技巧 5：利用 2 组动画可以将一些有效在单组内的动画无法实现的连续效果实现 这样，叠加上上面的效果，我们就得到了这样一种效果： 可以看到，很接近了。...利用 feTurbulence 可以有效实现一些波形纹理效果。并且可以通过 CSS filter 快速引入。...技巧 7：SVG 滤镜可以通过 CSS 滤镜快速引入，SVG 滤镜可以实现一些 CSS 完成不了的事情，譬如一些特殊的纹理，波纹，烟雾颗粒感等等效果。...文中所有技巧在我过往的文章中都有非常高频的出现次数，对其中细节不了解的可以在 iCSS 中通过关键字查找，好好补一补。
很久以前，CSS就像一阵清新的气息，只需简单轻松地为页面添加样式。 它涉及设定规则，让浏览器自动处理。你可以改变边距、字体和大小，但这只是浅尝辄止，你懂的吗？...你可以在一段时间内使CSS属性发生变化，控制过渡的速度，并创建基于关键帧的动画效果。...浮动布局的时代以及clearfix的黑科技 啊，浮动布局的时代。亲爱的读者们，我几乎可以看到你们脸上的怀旧微笑和沮丧的表情。...如果你研究一下grid-template-areas属性，你就可以成为真正的CSS grid专家。 还记得居中元素时的困扰吗？...以下是我对其中一些功能感到兴奋的原因： 容器查询 目前尚未在Firefox和Safari中支持 容器查询使得能够对子元素进行样式设置，并在布局中进行布局控制。
更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。 本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。 哪些标签不支持伪元素？...（补充于2016.06.28） 我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...变形恢复 有的时候，设计师们希望通过一些比较特殊的几何图形，表达不同的意思。 ? ? ? 用 CSS3 transfrom 属性，我们可以轻松的得到一个梯形，菱形或者平行四边形。...但是运用伪元素，我们可以去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换作用于伪元素上，这样变形不会作用于位于 div 上的的文字，而且没有使用多余的标签。...一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果： 单标签实现浏览器图标： ?
今天，收到一个很有意思的提问，如何实现类似如下的背景效果图： 嗯？核心主体是由多个六边形网格叠加形成。 那么我们该如何实现它呢？使用纯 CSS 能够实现吗？...如果你对 shape-outside 不太了解，也可以先看看我的这篇文章 -- 奇妙的 CSS shapes shape-outside 是 CSS 中的一个属性，用于控制元素的浮动方式。...是的，我们要实现这样一个效果： 如何让它们动态的实现颜色变换呢？是给每一个六边形一个单独的颜色，然后进行动画吗？不，借助混合模式，我们可以非常快速的实现不同的颜色值。...下面我是尝试的一些效果示意，譬如，我们可以将颜色放置在六边形背景的下方，制作这样一种效果： CodePen Demo -- Hexagon Gradient Layout 配合 mask 的蒙版效果及鼠标定位...Hexagon Gradient Layout 最后 好了，本文到此结束，希望本文对你有所帮助 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏
【动画消消乐】 平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！ 效果展示 ? Demo代码 HTML <!...步骤3 使用span::after的阴影（box-shadow） 需要三个 位置分别是（注意是span::after的阴影）： /*阴影1*/ 32px 0px , /*阴影2*/ 32px 32px...步骤6 去掉span背景色 最后效果图如下 ?...结语 文章仅作为学习笔记，记录从0到1的一个过程 希望对您有所帮助，如有错误欢迎小伙伴指正～ 我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧 谢谢支持❤️
虽然今天不同厂商在对待标准仍然存在差异，一些细节上仍旧有出入，但是我们已经不需要再像过去般大肆地对浏览器默认样式进行重置。 到今天，我们更多听到现代 CSS 解决方案一词。...希望他看到的页面，可以删除或替换掉一些会让部分视觉运动障碍者不适的动画类型。...而上述 Reset 中的那段代码，正是用于当用户开启对应选项后，减弱页面上的所有动画效果。属于对可访问性的考虑。 结合实际环境 当然，结合实际环境，目前国内整体不太注重可访问性相关的内容。...Chrome 或者是 Chromium 内核，Normalize.css 内的许多内容其实可能是一些实际中根本不会遇到或者用上的兼容适配，可以进行必要的精简 如果你的业务是全球化，面向的用户不仅仅在国内...最后 好了，本文到此结束，希望对你有帮助 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS 如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，
ps:要是在几个月以前，我会觉得这实在有待改进，不过现在我的心态宽了，布局思想不同而已，没有孰对孰错之分。...我们只要静下心来好好想想浮动的本质，实现的原理，就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗？即“包裹与破坏”。...这不难理解，您可以讲这里的float:left;改成display:inline-block;最后实现的效果基本上就是一样的。...我一般不用这个方法，只是有时候顺便去除浮动时用用。 3. after + zoom方法 先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。...于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。
用css实现一个rate评分 ❗ 核心代码也就三行，效果如下： 目录 原理 代码 基本布局 先把默认的星星显示出来 实现选中单个星星 实现连同兄弟元素一起高亮 然后把input反向排列 鼠标移入预览选中效果...加入放大动画 总结 获取代码 原理 梳理如下： 去找个好看的iconfont，[Iconfont-阿里巴巴矢量图标库]、； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked...伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 基本布局 这是我事先生成好的iconfont 一个很简洁的布局： <div class="rate-content...*/ /* 高亮<em>的</em>星星 */ input[name="rate"]:checked::after { content: "\e73c"; color: var(--main); } 效果如下：
一、伪元素概念 其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。...就像如果仅仅为了画一个装饰用的三角就在 HTML 里多加一个元素，这上对于实际内容来说其实是多余的，对自动分析网页的语义也可能会产生不好的影响。...简而言之：伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。 应用场景 简单说几个最常见的例子吧。...如下拉选择框中的那个小角标、遮罩层、清除浮动 就如element组件中的下拉框： 另外一些小图标、一些小三角同样也是伪元素做的。...; } 3.2、::after ::after在元素内部的后面插入内容。 CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。
像rate评分组件一般都用javascript写，大概一年前，我在简书写过一篇文章原生Javascript实现星星评分组件，感兴趣的可以去看一下，很久之前写的，我不知道之前的代码有多啰嗦，所以这次将是一个全新的尝试...，用css实现一个rate评分 ❗ 核心代码也就三行 效果图 [16c9d924566238de?...w=470&h=87&f=gif&s=158074] 原理 梳理如下： 去找个好看的iconfont，Iconfont-阿里巴巴矢量图标库； 借用5个radio单选框，把默认样式都去掉，显示默认的星星；...用checked伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 这是我事先生成好的iconfont...w=470&h=87&f=gif&s=53066] 内边距的作用是保持元素连贯性以及扩大点击范围，最后附上本文代码的codepen地址：css实现rate评分 最后 本文到此结束，希望以上内容对你有些许帮助
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。...更加具体的信息，可以看看 MDN 对伪类和伪元素的理解。 本文的主角就是伪元素 before 和 after ，下面将具体讲讲这两个伪元素的魅力。 哪些标签不支持伪元素？...（补充于2016.06.28） 我也是才知道这个姿势。为了不误导读者，就赶紧补充一下。 伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。...但是运用伪元素，我们可以去掉这些不合语义化多余的标签，运用 before 伪元素，将 CSS3 变换作用于伪元素上，这样变形不会作用于位于 div 上的的文字，而且没有使用多余的标签。...一个标签其实可以相当于 3 个标签来使用，而配合 CSS3 强大的 3D 变换、多重背景，多重阴影等手段，让单标签作画成为了可能，下面是我仅用单个标签，实现的一些动画效果： 单标签实现浏览器图标：
这可能会导致一些非常有趣的效果。例如，我们可以使用蓝色和绿色阴影来放大每个阴影。...box-shadow: 1px 1px 3px green, -1px -1px 3px blue; Clever Shadows 通过对 ::before 和 ::after 伪类应用阴影，我们可以创建一些非常有趣的视角...你知道吗？ Internet Explorer 从 IE6 开始就提供了对这个属性的支持？他们创造了它！...因为我们只是增强了效果，所以我们绝对没有对旧浏览器造成任何伤害。 最终项目 让我们结合我们在本文中学到的大部分技术，为显示翻转卡片创建一个简洁的效果。...水平和垂直居中 接下来，我希望我们的卡片在屏幕上完全居中。为此，我们将利用灵活盒模型。 由于我们的页面将只包含这张卡片，我们可以有效地使用该 body 元素作为我们的包装器。
来源：https://www.toutiao.com/a6754717611738530308 作者：子瑜说IT 用css实现一个rate评分 ❗ 核心代码也就三行，效果如下： ---- 目录 原理...iconfont，[Iconfont-阿里巴巴矢量图标库]、； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~...兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 基本布局 这是我事先生成好的iconfont 一个很简洁的布局： <input type="radio" name="rate...*/ /* 高亮<em>的</em>星星 */ input[name="rate"]:checked::after { content: "\e73c"; color: var(--main); } 效果如下
来源：https://www.toutiao.com/a6754717611738530308 作者：子瑜说IT 用css实现一个rate评分 ❗ 核心代码也就三行，效果如下： ---- 目录...iconfont，[Iconfont-阿里巴巴矢量图标库]、； 借用5个radio单选框，把默认样式都去掉，显示默认的星星； 用checked伪类监听用户选中✅，由默认的星星变成高亮的星星； 然后配合~...兄弟操作符把当前选中的所有兄弟元素都一起高亮； 把5个radio单选框反向排列 ❗； 代码 基本布局 这是我事先生成好的iconfont 一个很简洁的布局： <input type="radio" name="rate...*/ /* 高亮<em>的</em>星星 */ input[name="rate"]:checked::after { content: "\e73c"; color: var(--main); } 效果如下：
前言：终于我的大一生活结束了，迎来了愉快的暑假，大家都开始了各自的忙碌。一直忙着一些项目的事情，终于决定今天要更新一篇博客了，对上一阶段的学习做简单的总结。 ...这次我主要总结一下用Css绘制各种形状的技巧，同时要结合before、after伪元素和定位做出一些效果。 Triangle Up(向上的三角形) ?...但是要学会在自己的项目中结合before和after伪元素以及定位做出一些组合效果，比如我正在做的Oppo社区的一个项目（我的这个做Gif的软件有些问题） ? ? ? ...接下来，我在总结几个常用的Css绘制的形状（结合before和after伪元素）： Talk Bubble（聊天框） ?...可以绘制很多你想不到形状，熟练掌握一些常用的css绘制图形的技巧可以让你在项目中游刃有余。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
