- 综合排序
- 最热优先
- 最新优先
- 来自专栏白菜博客
html结合css滑稽笑脸表情包实现思路
实现效果：首先先把 脸，眼睛，鼻子，嘴用div先搭建起来
开始书写css ，这里使用动画+关键帧实现区间内改变眼球的形状。 border-radius: 50%; transform: translateX(0); } }以上代码实现了 name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/<em>css</em>66410编辑于 2024-05-30 - 来自专栏睡不着所以学编程
CSS笔记(11)
CSS笔记(11) 常见的页面布局 现在做一下第三个的布局: <!
34720编辑于 2022-09-20 - 来自专栏coding for love
CSS进阶11-表格table
对于自动表格布局算法，一些广泛部署的实现已经实现了相对紧密的互操作性。 表格布局可以用来表示数据之间的表格关系。开发者以文档语言指定这些关系，并可以使用CSS 2.2指定他们的表示。 在可视化媒体中，CSS表格也可以用来实现特定的布局。在这种情况下，开发者不应该在文档语言中使用与表格相关的元素，而应该将CSS应用于相关的结构元素以实现所需的布局。 如果这个位置会导致跨列单元格column-spanning cell与先前行中的跨行单元格row-spanning cell重叠，那么CSS不会定义结果：实现可能会重叠单元格（如许多HTML实现中所做的那样 因此，一个表可以使用左右两个'auto' margins实现居中。 CSS的未来更新可能会引入使表格自动适应其包含块的方法。 ? > 6
7 8 9 10 11 9.6K30发布于 2018-08-27来自专栏全栈者11 个 CSS 知识搭配 11 个 JS 特性 （实用合集）
前言 这篇文章我会介绍 11 在开发过程中经常遇到的 CSS 相关知识点，以及 11 个有趣亦实用的 JavaScript 特性。 这些都是我在日常开发中总结而来，想必于你也是有或多或少的帮助。 11 个常见的 CSS 知识点 声明，这里也包含了部分 CSS 预处理器知识，愿各位不要纠结于此。 从这个属性我们可以知道全部大写（小写）的需求这个属性也能轻易实现。 10. 单选高亮 可能你看到“单选高亮”没反应过来，直接来张图片你就马上清楚了： ? 这个需求用 CSS 更方便处理。 看不到了 设置的下方的两个圆角也不见了 所以可以使用 display:table; 或者 flex布局 的方式来实现等高。 11 个有趣实用的 JS 特性 在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性，使用得当可以提高你应用的友好性。 1.
1.1K30发布于 2019-10-16来自专栏coding for loveCSS入门11-定位与覆盖
简介 我们提到过css的定位机制。正常不作处理的html元素遵循普通文档流，但是有些定位方式会让这些元素脱离文档流。那么这些脱离的文档流如果与其他元素形成重叠，谁能够占据优势呢？ 2. 参考 07 CSS-相对定位、绝对定位、固定定位、z-index CSS相对定位|绝对定位(五)之z-index篇 深刻解析position属性以及与层（z-index）的关系 深入理解css中position
89320发布于 2018-08-27来自专栏python成长之路CSS实现表单
效果图如下： HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
91020发布于 2019-03-01零基础学习CSS(11)——颜色表达
官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https ://man.ilovefishc.com/css3/ 学习正文 标准颜色速查：https://man.ilovefishc.com/color/index.html 调色器：https://man.ilovefishc.com DOCTYPE html> <html> <head> <title>颜色表达</title> <meta charset="utf-8"> <style type="text/<em>css</em>
16310编辑于 2026-01-23来自专栏grain先森css实现漂亮弧形
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？ 好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 ? 实现效果如下图： ? 上面的图看起来好像弧度太大，几乎要看不出。依上面的实现原理，弧度要多少可以是自己微调。 看下图的实现： ? 学会了就快去实现你丰富多彩的界面吧~
2.2K30发布于 2019-03-29来自专栏Cellinlab's BlogCSS 实现各种形状
# 原理 # border-width 三角形 图片 <html> <body>
</body> </html> <style> #border-triangle { height: 0; width: 0; border-left: 50px solid red; border-top: 50px solid blue; border-right: 50px solid green; border77030编辑于 2023-05-17来自专栏全栈前端精选CSS 实现“故障”特效
当然，广义的故障艺术不仅仅指这种效果，我觉得是很宽泛的，本文将介绍一些 CSS 能够模拟完成的故障艺术效果。 使用混合模式实现抖音 LOGO 首先从静态的开始，抖音的 LOGO 就是很好的一个例子。 而实际上，是两个 J 形重叠在一起，重叠部分表现为白色，这个特性，使用 CSS 的混合模式 mix-blend-mode 非常好实现，而单个 J 形示意图如下： ? 关键点 主要借助伪元素实现了整体 J 结构，借助了 mix-blend-mode 实现融合效果 利用 mix-blend-mode: lighten 混合模式实现两个 J 形结构重叠部分为白色 所以整个效果只需要两个标签 /clippath/clippath-img-glitch 总结 本文重点介绍了纯 CSS 下使用混合模式和 clip-path 实现的一些故障艺术（Glitch Art），当然，上述的几个效果都不仅仅是靠这两个属性单打独斗就能完成的 我自己对 Glitch Art 的理解其实也比较浅显，只是觉得使用 CSS 去实现这样一些类似的效果比较有意思，就动手尝试实践了一番，相关术语或者名词理解错误烦请各位谅解指出。
2.8K10发布于 2020-02-19来自专栏零域BlogCSS实现eq(n)
在某些特殊情况下，我们需要用纯CSS实现jQuery的eq(n)选择器，而CSS没有直接提供类似方法。 我们可以通过CSS的:nth-child。
2K30编辑于 2022-03-16来自专栏前端开发随笔Css实现聊天框
DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>css聊天框</title> <style>
1.7K40发布于 2020-09-03来自专栏clzCSS实现渐变字
CSS 实现渐变字 先来下前置知识。如果想速通，也可指直接到渐变字实现 什么是渐变 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。 然而，我的 chrome 浏览器都需要-webkit-background-clip: text;才能实现。另外，文字的颜色应该设置为透明，否则会覆盖掉背景色。 渐变字实现 看到这里，基本就能实现渐变字啦。 代码如下。 <! 渐变 - CSS（层叠样式表） | MDN (mozilla.org) CSS3 渐变 | 菜鸟教程 CSS3 新特性概述_阿锐丫的博客-CSDN 博客_css3 新增特性
1.9K20编辑于 2023-01-05来自专栏Czy‘s BlogCSS实现图形效果
CSS实现图形效果 CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。 正方形
css渐变实现杂色
团结就是力量——毛泽东 思路出处：https://css-tricks.com/making-static-noise-from-a-weird-css-gradient-bug/ 这是一个通过css 渐变产生的锯齿BUG实现的噪点效果 例如我们使用径向渐变画两个圆，这里用的径向渐变函数radial-gradient，其中第一个参数是距离中心点近的渐变样式，第二个是远一些的，每个参数中第一项是颜色，第二项是区域 0.0001%,#0000 0 0.0002%) } </style> 效果： 图片 但这并不是一个完全版，仔细看中间还有一个圆心，完全版可以在径向渐变的基础上，再加上一个锥形渐变、调整圆心位置实现 background-blend-mode: difference; } </style> 图片 我们可以将其覆盖到另一张图片上，因为有background-blend-mode: difference; 能够实现这种效果
1.4K30编辑于 2023-01-05来自专栏李维亮的博客IE11的CSS兼容性问题
如果改变原有的padding值，那么在IE11生效了。别的浏览器又有问题了。于是在网上搜了一下有没有专门针对IE11的CSShack，就是只对IE11生效的CSS样式，一查还真有。 就是在CSS样式文件中加一个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){里面是你的样式}。 比如，我在chrome浏览器中给一个div设置样式 div{ padding:0 12px; } 那么，在IE11中想要实现上面效果，需要在这个下面再添加一行样式 div{ padding 的样式要写在最后面防止被覆盖，当浏览器为IE11时，@media中的样式会被执行一遍。 今天大拿直接一行代码把我之前的IE11兼容性问题全解决了。不服不行。
2.7K40发布于 2021-07-08来自专栏用户2163433的专栏凡是可以用CSS实现的，最终都会用CSS实现
— Atwood定律 凡是可以用CSS实现的，最终都会用CSS实现。— 笔者定律 具体看同学们自己的使用习惯。 上一篇文章能用CSS实现的就不用麻烦JavaScript提到好几种常用场景，这次笔者再分享多几个用CSS代替JavaScript的场景。希望大家能在日常开发中使用到。 上一篇文章能用CSS实现的就不用麻烦JavaScript提到，利用 CSS 的 content 属性 attr 抓取资料，其实我们还可以在content属性中做埋点统计这个功能。 [118149756-70500400-b444-11eb-9dd8-4a0c113ea2f9.gif] li { color: #000; transition: .2s all; } li: ，但它实打实用CSS实现的。
77151发布于 2021-07-22来自专栏学习笔记（宝藏）python也能写emoji表情？两个函数解决两者之间的联系！
还记得曾经被“滑稽”刷屏的场景吗？ [在这里插入图片描述] 在这个各种表情包横行的时代，emoji表情依然占据一定的地位！ code code与表情的对照表：传送门 1、emojize() [在这里插入图片描述] 在应用时，需要将code，稍微修改一下，在code的两端加上 ： ，中间的空格改为 _ ,如第一个笑脸 接着以这个笑脸为例。
1.4K30发布于 2021-07-31来自专栏前端专享使用 CSS variables 和Tailwind css实现主题换肤
实现博客列表 我们先使用 Tailwind css 实现一个博客列表 效果 html 代码
<ul class="space-y 是<em>实现</em>换肤最方便的方案，按传统的方案就得加入一些 <em>css</em> class 就可以<em>实现</em>，如： :root { --page-bg: #fff; --card-bg: #f9fafb; /* gray 兼容性 <em>CSS</em> variables 只支持现代浏览器，但是许多客户还在使用 IE<em>11</em>，为了兼容 IE<em>11</em> 可以使用 postcss 插件postcss-custom-properties 例如下面 <em>css</em> document.documentMode && document.write( '<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties @4.1.0/ie11CustomProperties.min.js"><\/script>' ) </script> 但是这样写完全体现不出 Tailwind css 的优势，Tailwind2.1K21编辑于 2022-03-29来自专栏大前端（横向跨端 & 纵向全栈）前端面试 【CSS】— CSS 如何实现“圣杯”布局？
“圣杯” 布局是一种典型的网页布局结构，如下所示： 实现方式有多种，下面一一给出代码实现。 1. Flex布局来实现 <! Float布局来实现（全部float:left） <! Float布局来实现（左边 float: left, 右边 float: right） <! 绝对定位来实现 <! Grid布局来实现 <!
62220发布于 2021-11-16腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059
粤公网安备44030502008569号腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号