HTML5+CSS|CSS3
关注
分享
扫一扫
文章平均质量分 89
.NET跨平台
比较认真。编程就是算法和数据结构，算法和数据结构是编程的灵魂。
展开
-
Html5实现图片转彩色字符图
利用了HTML5的 和 JavaScript。代码基于 来获取图片的像素数据，然后将其转换为字符，并用CSS样式上色。如图：以上代码实现了将图片转换为彩色字符的功能：可以根据需求调整缩放比例、字符集和样式，来优化输出效果。原创 2024-12-24 19:36:58 · 688 阅读 · 0 评论 -
CSS 的 @font-face 声明
在 CSS 的@font-face声明中，format()用于指定所加载字体文件的格式。这有助于浏览器识别字体的类型，并决定是否支持加载该字体。原创 2024-12-23 20:30:45 · 638 阅读 · 0 评论 -
HTML5实现图片、文字水印功能
以下是一个基于 HTML5 Canvas 和 CSS3 的图片和文字盲水印实现的完整前端代码。代码支持通过输入文字或上传图片生成水印，并将水印叠加到图片上：如图：原创 2024-12-22 20:20:49 · 1198 阅读 · 0 评论 -
HTML5实现一个白板
这是一个使用HTML5和CSS3实现的白板工具。主要功能包括绘制、橡皮擦擦除、颜色选择以及清除画布。以下是关键点的详细说明：HTML结构：CSS样式：JavaScript功能：原创 2024-12-22 01:22:42 · 1071 阅读 · 0 评论 -
HTML5实现一个前端的背景虚化+动态几何图形效果的可拖拽登录框
要实现一个前端的背景虚化（Bokeh效果）的可拖拽登录框，我们可以使用 HTML5、CSS3 和 JavaScript（包括前端 JS 库）来完成。为了达到这个效果，下面是一个简单的示例，包含了以下几个部分：代码说明：背景虚化效果：可拖拽的登录框：样式设计：这段代码实现了一个简单的背景虚化（Bokeh效果）和可拖拽的登录框，适合现代网页设计，并且具有较好的交互性和美观性。原创 2024-11-17 00:31:00 · 1163 阅读 · 0 评论 -
HTML5前端实现毛玻璃效果的可拖拽登录框
这段代码通过 CSS3 的毛玻璃效果和 JavaScript 实现了一个具有背景虚化效果的可拖拽登录框，适合现代网页设计，并且具有较好的交互性和美观性。原创 2024-11-17 00:30:42 · 1276 阅读 · 0 评论 -
Css中路径data用法
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。data:,文本数据data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTML代码data:text/css,CSS代码data:text/css;base64,base64编码的CSS代码data:text/javascript,Javascript代码data:text/j转载 2020-11-22 20:55:55 · 1392 阅读 · 0 评论 -
img属性(width height)和style(width height)区别
属性width height定义：在页面加载时为图像预留空间，以免图片加载时，页面布局会发生变化。属性值：pixels(以像素为单位的高度或宽度值)percent(以包含元素的百分比计的高度或宽度值)使用技巧：隐藏特性：无需指定图像的实际大小，也就是说，这两个值可以比实际的尺寸大一些或小一些。浏览器会自动调整图像，使其适应这个预留空间的大小。使用这种方法就可以很容易地为大图像创建其缩略图，以及放大很小的图像。但需要注意的是：浏览器还是必须要下载整个文件，不管它最终显示的尺寸到底是多大，而且转载 2020-11-04 17:57:07 · 3054 阅读 · 0 评论 -
CSS实现父元素半透明,子元素不透明的问题
关于这个问题，其实是不熟悉opacity和rgba，下面解释一波~颜色我们都知道有RGB，在RG个新的值，成B颜色模型增加了一为了RGBA颜色模型。最后一个是alpha通道的值，取值在0.0到1.0之间。共同点：两者控制透明度的都是一个小数，从0到1，0.0是完全透明，1是完全不透明。不同点：opacity属性的值，可以被其子元素继承！！！让我看看代码如下： <style type="text/css"> .box{ width: 30转载 2020-10-19 14:39:00 · 597 阅读 · 0 评论 -
input type=“file“属性详解，利用capture调用手机摄像头
<input> type 类型为 file 的标签，可以选择一个或多个文件，通过表单上传到服务器，也可以通过 Javascript 的 File API 对文件进行操作。实例：<input name="myFile" type="file">常用参数：Value：DOMString 选择文件的路径。DOMString 是UTF-16字符串。由于JavaScript已经使用了这样的字符串，所以DOMString 直接映射到 String。事件：change 事件 input转载 2020-08-20 15:32:13 · 10069 阅读 · 0 评论 -
css3系列之transform 详解rotate
rotate rotateX rotateY rotateZ rotate3drotate：旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。ro转载 2020-08-16 22:40:44 · 1439 阅读 · 2 评论 -
CSS transform-origin使用
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>CSS transform-origin</title> <meta name="author" content="" /> <meta name="copyright" content="" /> <style>转载 2020-08-16 21:00:47 · 395 阅读 · 0 评论 -
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）二.缩放 scale用法：transform: scale(0.转载 2020-08-16 16:54:39 · 5492 阅读 · 0 评论 -
video标签的属性和事件用法大全
1、video 属性<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height="转载 2020-07-29 15:58:40 · 3609 阅读 · 0 评论 -
你不需要JavaScript(CSS代替)
CSS很强大，你可以在没有JS的情况下做很多事情请注意，这些演示应视为CSS“概念证明”。 从可访问性的角度（键盘导航，语音合成等）或渐进式增强/降级/等方面来看，它们可能存在严重问题。Quick linksAccordion / ToggleCarouselCounter of checked check-boxesFlip on clickFloating label on TextfieldFont-Face (Latin)Info on hover/ PopoverImage转载 2020-06-28 10:21:01 · 449 阅读 · 0 评论 -
CSS 的空格处理
一、空格规则HTML 代码的空格通常会被浏览器忽略。<p>◡◡hello◡◡world◡◡</p>上面是一行 HTML 代码，文字的前部、内部和后部各有两个空格。为了便于识别，这里使用半圆形符号◡表示空格。浏览器的输出结果如下。hello world可以看到，文字的前部和后部的空格都会忽略，内部的连续空格只会算作一个。这就是浏览器处理空格的基本规则。如果希望空格原样输出，可以使用<pre>标签。<pre>◡◡hello◡◡world◡◡&转载 2020-05-31 22:57:22 · 1150 阅读 · 0 评论 -
-webkit-overflow-scrolling:touch
之前做移动端项目的时候，同事推荐使用-webkit-overflow-scrolling:touch;属性，当时只是知道在元素内容有滚动条的时候使用这个属性，可以使滚动比较流畅。然后在MDN上查了一下：-webkit-overflow-scrolling属性是来控制元素在移动设备上是否有回弹的效果。它有两个属性值：auto:使用普通滚动，当手指在屏幕上离开时，滚动立即停止touch：使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动转载 2020-05-25 14:49:18 · 10230 阅读 · 1 评论 -
弹性盒子Flex Box滚动条原理，避免被撑开，永不失效
在HTML中，要实现区域内容的滚动，只需要设定好元素的宽度和高度，然后设置CSS属性overflow 为auto或者scroll：在Flex box布局中，有时我们内容的宽度和高度是可变的，无法确定下来，这时候设置滚动条，可能会失效。只要记住几个关键要素，就可以解决这个问题。1、清楚的知道当前元素的flex flow如果要设置水平滚动条，那么父元素的flex-flow要设置为row，如果要设置纵向滚动条，那么父元素的flex-flow要设置为column。2、flex设置为13、滚动方向的大小（转载 2020-05-20 22:31:22 · 9368 阅读 · 0 评论 -
css3 perspective与translateZ变换
css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。translateX,translateY表现出在屏幕中的上下左右移动，transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200.转载 2020-05-20 17:58:26 · 810 阅读 · 0 评论 -
深入理解CSS变形transform(3d)
前面的话本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility坐标轴在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间转载 2020-05-20 10:23:51 · 1149 阅读 · 0 评论 -
搞懂Z-index的所有细节
用z-index来改变堆叠顺序z-index测试网站一 z-index 在什么情况下才生效？z-index的运用是需要条件的,与其相关的属性就是position属性。我们以三个div来举例子。position: static;当三个div的position都为static时,我们把div(A)的z-index设置为15, 把div(B)的z-index设置为10,把div©的z-index设置为5。发现div(B)依然把div(A)的一部分挡住了,所以当position为static时,.转载 2020-05-19 15:51:05 · 358 阅读 · 0 评论 -
z-index和transform,你真的了解吗？
z-index和transform是CSS中的属性，但很少同学将二者联系到一起，感觉他们八杆子打不上。事实真的是这样吗？如果你也不能确认，这篇文章就值得你花点时间阅读。因为阅读完了，你会有所收获的。堆叠上下文(Stacking Context)在开始今天的主题之前，先得回忆一下CSS中的Stacking Context(堆叠上下文)。因为只有了解清楚了这个概念，才能更好的了解下面的内容。任何HTML文档默认的堆叠上下文都是<html>元素。因此，除非创建新的堆叠上下文。默认情况下，元素的堆转载 2020-05-19 15:28:39 · 2189 阅读 · 0 评论 -
层叠上下文和层叠顺序
前言原文是在前面对transform引起的z-index“失效”探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。一、什么是层叠上下文层叠上下文，英文称作“stacking context”。是HTML中的一个转载 2020-05-19 14:06:44 · 521 阅读 · 0 评论 -
隐藏滚动条css3实现滚动同时隐藏滚动条
项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： ::-webkit-scrollbar{ display:none; }使用方法：设置滚动后在容器上添加该css样式； ul::-webkit-scrollbar{ display:none; }案例：代码： <!DOCTYPE html> <h转载 2020-05-17 23:28:21 · 270 阅读 · 0 评论 -
IOS 的z-index 失效的原因
罪魁祸首就是它=====>iOS的弹性滑动属性-webkit-overflow-scrolling: touch会导致z-index属性失效调了超久，还用了safari的真机调试才找出来，心累。。。IOS下z-index失效问题1.在android上，如果对元素同时设置zindex和transform translateZ的值时，在显示上zindex的优先级要高于translateZ2.在ios上，则相反，translateZ的优先级要高于zindex3.所以最好在设置一系列元素时，zin转载 2020-05-17 22:50:04 · 4511 阅读 · 1 评论 -
margin-left与left、margin-right与right区别
margin-left与left区别可扩展为margin-left、margin-top、margin-bottom、margin-right与left、top的区别使用margin-left时，父容器不考虑是否设置了position使用left前提是必须设置本身的position:absolute或relative，否则不生效，top等亦是如此margin与padding区别ma...转载 2020-05-06 22:41:29 · 1344 阅读 · 0 评论 -
HTML5 video视频播放Picture-in-Picture画中画技术
一、下面播报一则新闻Chrome 70已经原生支持HTML5 <video>播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。我一瞅自己的Chrome浏览器，正好就是Chrome 70，体验了一番，挺有意思的，值得介绍下，以后估计用得着。二、先看画中画实例demo请确保您的浏览器支持画中画...转载 2020-04-28 16:39:50 · 3151 阅读 · 0 评论 -
H5的视频解决方案(3)——第三方视频接入(腾讯、youtube)
3. 腾讯视频接入通过iframe将视频插入。地址为：https://v.qq.com/iframe/player.html?vid={视频id}。如何获取id？例如这样一个腾讯视频的播放页面：https://v.qq.com/x/page/i0314gnvro5.html它的id就是i0314gnvro5，插入代码如下：<iframe src="https://v.qq.com...转载 2020-04-26 10:30:54 · 5433 阅读 · 0 评论 -
页面中插入视频的方法---video/embed/iframe总结
1. video标签当前主流的方法当然是HTML5中的video标签了，但是当前，video 元素只支持三种视频格式：Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件如果你的视频文件是m...转载 2020-04-22 18:26:43 · 31278 阅读 · 1 评论 -
css3属性box-sizing:border-box 用法解析
响应式Web设计经常需要我们通过百分比设置组件宽度。如果我们不考虑边框，那么很容易就可以实现，但如果你给每一列以及总宽度都采用百分比设置，那这个时候固定的边框大小就会出来捣乱。下面我们将看到一组方法去解决这个问题，你会学到如何创建一个流式布局，而不用担心额外的边框以及内边距。假设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所...转载 2020-03-26 23:28:09 · 11461 阅读 · 0 评论 -
CSS 优先级规则
多重样式优先级深入概念优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。优先级顺序下列是一份优先级逐级增加的选择器列表：通用选择器（*）元素(类型)选择器类选择器属性选择器伪类ID 选择器内联样式!important 规...转载 2020-03-20 17:33:47 · 497 阅读 · 0 评论 -
CSS后代选择器“空格”和“>”的使用辨析
要点：“空格”：包含子孙“>”：含子不含孙举个栗子：html代码如下<body> <div class="parent"> <p>1p</p> <div>2div <p>-2.1p</p> <p...转载 2020-03-11 23:26:35 · 1972 阅读 · 1 评论 -
不要乱用position:fixed
经常会有一个需求，在一个固定窗口内容滚动，底下有操作按钮需要固定，不随着滚动，一般第一个念头就是用固定定位position: fixed，但是fixed是以窗口为父元素去定位的，这么做肯定是错的，需要正确使用相对定位和绝对定位<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /&g...转载 2020-02-18 21:38:39 · 17541 阅读 · 2 评论 -
css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性：一、flex-direction: （元素排列方向）※ flex-direction:row （横向从左到右排列左对齐）※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列顶对齐） ※ flex-direction:column-reverse （与colum...转载 2019-12-08 12:55:18 · 494 阅读 · 0 评论 -
vertical-align之text-bottom与text-top解惑
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> body { margin: 0px; } #box ...转载 2019-12-08 12:43:32 · 2890 阅读 · 0 评论 -
css基线与行高
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识：顶线、中线、基线、底线<!DOCTYPE html><html> &...转载 2019-12-08 11:25:10 · 282 阅读 · 0 评论 -
移动端页面重构布局8大方法
1.固定布局方法<head>里把<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。优点思路沿用pc端，上手比较快缺点大屏手机显示网页比较宽，而固定...转载 2019-11-15 09:42:48 · 448 阅读 · 0 评论 -
!important的用法及作用
定义及语法!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。在CSS中，通过对某一样式声明!important，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。浏览器识别ie7及ie7+,firefox,chrome等...转载 2019-11-13 17:29:57 · 11873 阅读 · 0 评论 -
关于css中class属性多值问题
css中几种情况：一、.class之间没有空格/*这样写之间没有空格表示有个class属性是这样写的 class="first first1 first2"并且这样写，优先级高于下面直接写单个例如.first2{} ，虽然位置在.first2{}上面*/ .first.first1.first2 {color: red;font-family: 'Times New Roman', ...转载 2019-11-13 17:17:21 · 2491 阅读 · 0 评论 -
CSS font-family 各字体一览表
windows常见内置中文字体字体中文名 字体英文名宋体 SimSun（浏览器默认）黑体 SimHei微软雅黑 Microsoft Yahei微软正黑体 Microsoft JhengHei楷体 KaiTi新...转载 2019-11-13 17:00:13 · 4358 阅读 · 0 评论