- 综合排序
- 最热优先
- 最新优先
- 来自专栏白菜博客
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笔记(7)
CSS盒子模型 终于学到新内容啦! CSS的盒子模型,其实学到这里有些东西已经懵懵的了,听都听得懂,因为老师讲的实在是很好,但还是害怕实际运用的时候不知所措...不管了先学吧.居然还要学习一点PS...又要重新下载,心累. 网页布局过程: 1.先准备好相关的网页元素,网页元素基本都是盒子BOX. 2.利用CSS设置好盒子样式,然后摆放到相应位置. 3.往盒子里装内容. 网页布局的本质:就是利用CSS摆盒子 1.盒子模型 盒子模型(Box Model)的组成: 所谓盒子模型:就是把html页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS盒子模型的本质是一个盒子 我们可以这样实现: 注意在单独写上边框覆盖原来的边框时,需要将三个属性都写出来,不然不会显示.
73710编辑于 2022-09-20 - 来自专栏终身学习者
7个实用的CSS技巧
图像文本环绕 CSS 中的 shape-outside 属性是一个非常有用且强大的工具，它允许设计师和开发者控制内容如何围绕一个浮动元素（通常是图像或图形）进行排列。 借助CSS动画功能，您可以让您的网页充满生机。在这个例子中，我们使用动画和 @keyframes 属性来实现打字机效果。 具体来说，对于这个演示，我们实现了 steps() 属性来分割我们的文本动画。 例如，如果你在“文字打字效果”后面写了另一个词，除非你改变CSS片段中的 steps() 数量，否则动画将无法工作。 也就是说，这种效果并不是特别新颖。 事例地址：https://codepen.io/OMGZui/pen/abqjMXd 7. 纯CSS的清单 正如我在文章开头提到的，CSS正在稳步发展。而这个动态清单的演示就是一个很好的例证。 使用这种方法可以实现各种各样的目标。例如，当用户点击特定的复选框时，切换隐藏的内容。它适用于单选和复选框等输入类型，但也可以应用于<option>和<select>元素。
64930编辑于 2023-08-24 - 来自专栏初见Linux
7.表格样式-CSS基础
-- <link rel="stylesheet" type="text/<em>css</em>" href=".. /<em>css</em>/边框样式.<em>css</em>"/> --> <style type="text/<em>css</em>"> table,th,td{ border: -- <link rel="stylesheet" type="text/<em>css</em>" href=".. /<em>css</em>/边框样式.<em>css</em>"/> --> <style type="text/<em>css</em>"> table,th,td{ border: /css/边框样式.css"/> --> <style type="text/<em>css</em>"> table,th,td{ border:
1.8K20发布于 2020-10-29 - 来自专栏达达前端
Day7:html和css
Day7:html和css 如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相. 盒子模型（CSS重点） 三个大模块： 盒子模型 、 浮动 、 定位 盒子边框（border） border : border-width || border-style || border-color margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 外边距实现盒子居中 效果 overflow:hidde content宽度和高度 宽度属性width和高度属性height 圆角边框(CSS3) border-radius: 50%; 盒子阴影(CSS3) box-shadow clear:both
// 父级添加overflow属性方法 给父级添加： overflow为 hidden|auto|scroll 都可以实现2.7K30发布于 2019-07-03 - 来自专栏python成长之路
CSS实现表单
-- 7.文本域 <textarea name="" id=""></textarea> cols rows --> <
91020发布于 2019-03-01 - 来自专栏博文视点Broadview
PHP 7 CSS与JavaScript优化
本文我们将讨论两种针对CSS、JavaScript文件的优化手段——合并和缩小。本文选自《高性能PHP 7》。 性能在Web应用程序中起着至关重要的作用，甚至谷歌也很在意其查询性能。 然后，在Minify CSS代码段中指定了两个文件路径，一个是原CSS文件地址，用变量cssSourcePath标识，另一个是最小化后的CSS文件地址，用变量cssOutputPath标识。 之后，实例化了一个CSS.php类的对象，并传递了需要缩小的CSS文件。最后，调用CSS类的minify方法，并与文件名一起传递输出路径，这将生成所需的最小化后的文件。 /* 最小化CSS */ $cssSourcePath = 'css/styles.css'; $cssOutputPath = 'css/styles.min.merged.css'; $cssMinifier = new Minify\CSS($cssSourcePath); $cssMinifier->add('css/style.css'); $cssMinifier->add('css/forms.js
3.5K20发布于 2020-06-11 - 来自专栏grain先森
css实现漂亮弧形
在实现页面五花八门的有特色的ui时，我们有时会遇到要用实现一个弧形，而这样的弧形要怎么实现呢？用图片？ 好像不大现实，因为这样就要无故多加载一张图片了，这里我们来说说怎么用css的after伪类来实现弧形。 ? 实现效果如下图： ? 上面的图看起来好像弧度太大，几乎要看不出。依上面的实现原理，弧度要多少可以是自己微调。 看下图的实现： ? 学会了就快去实现你丰富多彩的界面吧~
2.2K30发布于 2019-03-29 - 来自专栏Cellinlab's Blog
CSS 实现各种形状
# 原理 # 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 形示意图如下： ? ：
$img: "https://mzz-files.oss-cn-shenzhen.aliyuncs.com///uploads/U1002433/0cb5e044a1f0f7fc15f61264ee97ac1f.png /clippath/clippath-img-glitch 总结 本文重点介绍了纯 CSS 下使用混合模式和 clip-path 实现的一些故障艺术（Glitch Art），当然，上述的几个效果都不仅仅是靠这两个属性单打独斗就能完成的 我自己对 Glitch Art 的理解其实也比较浅显，只是觉得使用 CSS 去实现这样一些类似的效果比较有意思，就动手尝试实践了一番，相关术语或者名词理解错误烦请各位谅解指出。2.8K10发布于 2020-02-19 - 来自专栏零域Blog
CSS实现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 - 来自专栏clz
CSS实现渐变字
CSS 实现渐变字 先来下前置知识。如果想速通，也可指直接到渐变字实现 什么是渐变 CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。 然而，我的 chrome 浏览器都需要-webkit-background-clip: text;才能实现。另外，文字的颜色应该设置为透明，否则会覆盖掉背景色。 渐变字实现 看到这里，基本就能实现渐变字啦。 代码如下。 <! 渐变 - CSS（层叠样式表） | MDN (mozilla.org) CSS3 渐变 | 菜鸟教程 CSS3 新特性概述_阿锐丫的博客-CSDN 博客_css3 新增特性
1.9K20编辑于 2023-01-05 - <style type="text/<em>css</em>"> #rectangle{ width: 200px; DOCTYPE html> <html> <head> <title>CSS实现图形效果</title> <style type="text/<em>css</em>"> section{ /the-shapes-of-css/ https://www.w3cplus.com/css/create-shapes-with-css来自专栏Czy‘s Blog
CSS实现图形效果
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; 能够实现这种效果
凡是可以用CSS实现的，最终都会用CSS实现
— Atwood定律 凡是可以用CSS实现的，最终都会用CSS实现。— 笔者定律 具体看同学们自己的使用习惯。 上一篇文章能用CSS实现的就不用麻烦JavaScript提到好几种常用场景，这次笔者再分享多几个用CSS代替JavaScript的场景。希望大家能在日常开发中使用到。 CSS3新增position:sticky 让我们很容易实现此功能，相信不少同学也开始使用此属性。 具有粘性定位的元素将充当相对定位的元素，直到到达视口上的给定点然后变为固定定位的元素为止。 上一篇文章能用CSS实现的就不用麻烦JavaScript提到，利用 CSS 的 content 属性 attr 抓取资料，其实我们还可以在content属性中做埋点统计这个功能。 ，但它实打实用CSS实现的。
使用CSS3 box-shadow实现的7个按钮悬停动画特效
--hover: #cb72aa; } .pulse { --color: #ef6eae; --hover: #ef8f6e; } .close { --color: #ff7f82 ; --hover: #ffdc7f; } .raise { --color: #ffa260; --hover: #e5ff60; } .up { --color: #
python也能写emoji表情？两个函数解决两者之间的联系！
还记得曾经被“滑稽”刷屏的场景吗？ [在这里插入图片描述] 在这个各种表情包横行的时代，emoji表情依然占据一定的地位！ code code与表情的对照表：传送门 1、emojize() [在这里插入图片描述] 在应用时，需要将code，稍微修改一下，在code的两端加上 ： ，中间的空格改为 _ ,如第一个笑脸 接着以这个笑脸为例。
使用 CSS variables 和Tailwind css实现主题换肤
背景 在 2B 的项目中，常常有客户（甲方爸爸）需求，定制与他们企业相同的主题的网站；随着苹果暗黑模式的推出，换肤的需求在网站开发中越来越多，也越来越重要，最近在网上看到 Tailwind Labs 的实现的换肤视频 实现博客列表 我们先使用 Tailwind css 实现一个博客列表 效果 html 代码
前端面试 【CSS】— CSS 如何实现“圣杯”布局？
“圣杯” 布局是一种典型的网页布局结构，如下所示： 实现方式有多种，下面一一给出代码实现。 1. Flex布局来实现 <! Float布局来实现（全部float:left） <! Float布局来实现（左边 float: left, 右边 float: right） <! 绝对定位来实现 <! Grid布局来实现 <!
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号