![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5_CSS3
文章平均质量分 61
stones4zd
开博目的是为了积累知识,坚持学习…
展开
-
CSS3技巧38:3D 翻转数字效果
最近工作上烦心的事情太多,只有周末才能让我冷静一下 coding 一会玩~今天做一个 3D 翻转数字效果。示例图如下:这个东西看着比较难,其实很简单。原创 2024-03-16 12:40:45 · 1381 阅读 · 0 评论 -
CSS3技巧37:JS+CSS3 制作旋转图片墙
开学了就好忙啊,Three.js 学习的进度很慢。更一篇 JS + CSS3 的内容,做一个图片墙。看上去这个布局很复杂,其实很简单。原创 2024-02-27 22:47:48 · 897 阅读 · 0 评论 -
CSS3技巧36:让内容垂直居中的三种方式
让内容垂直居中,是一个很重要的应用情景,在很多场合都会需要。这也是面试的时候,一些考官喜欢拿来初面的小题目。这里,小结下让内容垂直居中的。当然,读者如果有更好的方法,也可以提出来。原创 2023-12-09 13:02:43 · 793 阅读 · 0 评论 -
CSS3技巧36:backdrop-filter 背景滤镜
后续,CSS3 又新增了 backdrop-filter 背景滤镜。backdrop-filter 的属性值跟 filter 完全一样,只是应用效果的标签不同。filter:作用于标签本身。backdrop-filter:作用于被标签遮盖的内容。往往需要结合定位 position 属性实现遮盖效果。原创 2023-09-09 11:33:52 · 1715 阅读 · 0 评论 -
CSS3技巧35:滚动的条纹背景
做进度条的时候,有时候会看到滚动的彩条动画。这个用CSS3 的渐变背景可以实现。主要知识点:线性渐变背景和线性重复渐变原创 2023-06-24 23:18:22 · 816 阅读 · 0 评论 -
CSS3技巧33:妙用文本溢出text-overflow
属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(没什么浏览器支持)。属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串。经过测试,Chrome 和 Firefox 均支持这个效果。string:自定义字符串来代表修剪的文本。不是所有浏览器都支持。来代表被修剪的文本。clip:剪切文本。原创 2023-04-08 22:56:28 · 751 阅读 · 1 评论 -
CSS3技巧32:CSS3制作经典进度条
放假了,不想到处走亲戚。窝在家里 coding 玩儿~看到一个很不错的进度条效果,很简单,但是很好看,就写写练练手。原创 2023-01-20 22:22:41 · 1725 阅读 · 0 评论 -
CSS3技巧31:placeholder 动画
这里只是用 label 标签去模拟 placeholder,并且添加动画。placehoder 可以做 CSS 动画?原创 2022-12-10 22:03:45 · 583 阅读 · 2 评论 -
经典动画库 animate.css 的应用
Animate.css 就像嗑水那么简单的CSS动画。其核心技术使用了 CSS3 里的@keyframes和animation。各大浏览器只要不是太旧的版本都能兼容。原创 2022-11-15 20:31:15 · 8321 阅读 · 0 评论 -
CSS3技巧31:简单而实用的CSS导航下划线动画效果2
之前写了一篇文章,探讨了CSS导航链接的下划线动画效果:CSS3技巧30:简单而实用的CSS导航下划线动画效果_九天翔龙的技术博客-CSDN博客除了中间的拓展变化,还可以怎么做呢?今天看到了一个从左到右的效果,也挺有意思的。思路跟之前的差不多,也是利用伪标签实现下划线动画。但是,在伪标签的left,right属性使用了 auto 值,让浏览器自动判断。具体代码如下:HTML:<a href="#" class="a1">测试内容</a>CS.原创 2022-02-07 21:06:19 · 765 阅读 · 1 评论 -
CSS3技巧30:简单而实用的CSS导航下划线动画效果
2021 结束了迎来了 2022回望这一年,收获了不少,也失去了很多。--------------------------------------------------------------特做一个导航小动画,作为今年博客的一个结束。明年继续~!------------------------------------------------------------先看效果:这中导航下划线动画效果,在很多网站上都有用到,包括腾讯、字节跳动的官网。主要用到的知识点原创 2021-12-30 23:54:04 · 2645 阅读 · 0 评论 -
CSS3干货29:强大的媒体查询
好久没更博文了。。。这学期太忙了,我都不知道在忙啥。。。。指导论文,各种检查,评估材料的准备。。。吐血了真的是。。。-----------正文开始---------------------PC 端和移动端,因为屏幕差异较大,用户的一些操作也不一样,因此往往分开进行开发。即,PC 端一套代码,移动端一套代码。基本上算是两套独立的网页。但是,开发成本较高。一般大公司才会这样做,比如淘宝,QQ,京东等。针对中小型项目,如何尽可能的降低开发成本,这是公司考虑的比较多的,于是就出现了“响应式布局”。原创 2021-05-28 22:59:36 · 305 阅读 · 0 评论 -
CSS3干货28:妙用 transition 实现中英文切换导航
好久没写博客了,有。。。20多天了吧?最近好忙,指导 10 个同学论文不说,写了2个市级申报书,还抽空指导了一组同学参加xx比赛(就一个清明节的时间准备,居然冲进了省部级赛场~,不得不佩服这帮同学之厉害)。人都要忙疯了~难得静下心(其实也没静下心,只是觉得亏欠了 CSDN 太多),把我上课讲到的一个小案例拿来充数~先看效果一、HTML结构<!-- 导航 --><nav class="pageNav"> <ul> <原创 2021-04-19 23:42:24 · 815 阅读 · 1 评论 -
CSS3干货27:CSS3 图片边框 border-image
border-image从名字上不难理解,它的作用是给边框添加图片。类似于CSS中的background(背景)属性,border-image属性可以给盒子边框添加背景图片。一般的边框,要么是实线,要么是虚线(点状,短横线)(虽然也有其他样式的边框,但是不推荐使用)。但是遇到一切特殊的边框,传统边框就束手无策了。遇到这种边框,不妨考虑下用 border-image 。注意: 使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。也即.原创 2021-02-15 21:19:55 · 7553 阅读 · 13 评论 -
CSS3干货26:标签切角效果实现
今天有同学问我,网页中切角效果如何实现。如图所示:我第一反应是:切图,或者 SVG。当然可以做出来。不过,同学回了一句:用 CSS 无法做到么?切图,SVG 感觉都太麻烦了。不过,我的回答是:当然是可以的啦~切角的关键,就是让一个角的边框消失。1. 方法一HTML<div class="box"> <p>这个是内容</p></div>CSS*{ margin: 0; padding: 0原创 2021-02-01 22:34:55 · 989 阅读 · 5 评论 -
CSS3干货25:利用伪标签实现面包屑导航
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。--百度百科“面包屑导航”词条一般的面包屑导航1. HTML 结构主要利用 ul 和 li 制作整体结构。前面几项都有超链接,最后一项内容不是超链接,就用 span 标签,因为它不需要点击。..原创 2020-11-09 00:05:15 · 707 阅读 · 0 评论 -
CSS3干货24:hyphens 连字符实现英文断词换行
hyphens 属性指定当文字跨越多行时如何自动换行断字,主要用于西方文字。断开的单词增加连字符,并且换行。hyphens 属性可以完全禁止连字符,在文本中手动指定点来使用连字符,或者让浏览器在适当的地方自动插入连字符。hyphens:manual; / *手工设定。默认值,只有单词中有建议换行符才会换行,即手工在单词中插入 ­ * /hyphens:none; / *无。即使单词中有换行符,也不会换行,只会在空白处换行* /hyphens:auto; / *自动。浏览原创 2020-11-07 00:04:27 · 8031 阅读 · 2 评论 -
CSS3干货23:常用字体样式设置
一、字体颜色color: 颜色;color:#f30;color:rgb(255,100,0);color:rgba(255,100,0,0.4);二、字体设置font-family:Arial,Verdana,"Microsoft yahei",Simsun;三、字体粗细font-weight: normal ; /* 字体粗细:正常 */font-weight: bold ; /* 字体粗细:粗体字 */font-weight: bolder ; /* 字体粗细:比正原创 2020-10-29 00:46:29 · 663 阅读 · 0 评论 -
CSS3干货22:做一个自己的 loading 动画
网页在加载内容过程中,因为网速原因,可能不会马上加载完毕。那么要提示用户正在加载中。为了避免用户等待的时候显得枯燥,往往会把 loading 图标做成小动画。用 CSS3 的 animation 和 帧动画,可以轻松实现 loading 小动画。主要知识点1、利用 @keyframes 帧动画,写出小圆圈由大到小,透明由 1 到 0 的动画。 @keyframes scaleAni { 0%{ transform:scal原创 2020-09-28 16:04:45 · 613 阅读 · 0 评论 -
CSS3干货21:box-sizing
开学了好忙,都没时间整理自己的东西。眼看月底了。发点自己的课堂笔记充个数~总所周知,盒子模型标准属性都要占位。也就是 padding、border、margin 会改变标签的实际所占的宽、高。即,标签的实际宽高应该是:width / height + padding + border + margin 如:.box{ width: 200px; height: 200px; background: #f00; padding:30px;原创 2020-09-25 23:49:52 · 2725 阅读 · 2 评论 -
CSS3干货20:CSS3中的形状(shape)及其应用
一、形状 Shape形状 Shape 的出现,打破了传统 CSS 中,只有矩形形状的尴尬,可以让我们的形状多元化。用以下结构和样式为基础案例说明:<div class="txtBox"> <div class="txtBox_content"> <p> 小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。 </p> <p>原创 2020-08-12 15:31:39 · 1392 阅读 · 4 评论 -
CSS3干货19:CSS3中的遮罩 mask 样式及其拓展
在网页中看到这种图:第一反应是把这个图片切片,做成png。没毛病~!但是,如果要更换图中的妹子,岂不是又要切一次图??麻烦。今天居然看到 CSS3 的一个新增样式 mask (遮罩),可以简单实现上图效果,而且可以保证内容图片完整,直接更换不用切片。开始~一、准备工作准备内容图片,和遮罩png图。不出意外的话,建议内容图片和遮罩png图大小一样(当然也可以不一样,具体根据需要来定。)PNG图:400*400,名:m1.png内容图:400*400二、HTML结原创 2020-08-02 19:06:30 · 3468 阅读 · 2 评论 -
CSS3干货18:四步完成一个经典的倾斜导航
先看效果~~啦啦啦~~第一步:一个正常的导航HTML结构:<nav class="mainNav"> <ul> <li><a href="#"><span>首页</span></a></li> <li><a href="#"><span>公司介绍</span></a></li>原创 2020-08-01 21:43:29 · 701 阅读 · 0 评论 -
CSS3干货17:纯CSS的几种图片投影制作
纯CSS3 制作图片投影,各种投影,不许要图片制作了。HTML代码:<div class="box shadow1"><img src="images/mm.jpg" alt=""></div><div class="box shadow2"><img src="images/mm.jpg" alt=""></div><div class="box shadow3"><img src="images...原创 2020-07-08 00:55:05 · 1471 阅读 · 0 评论 -
CSS3干货16:妙用属性选择器制作文件链接
有时候,我们需要给网页添加文件链接。用户点击后,可以直接下载。为了更好的用户体验,链接的是什么类型,我们需要用一个图标去提示用户。比如,链接到 word,就用 word 图标;链接到 pdf,就用一个 pdf 图标。可以用 class 给 word,pdf 等文件写一个专用的类,把图标作为标签的背景添加。但是这个方法不是今天讨论的内容。今天我们利用 CSS3 的属性选择器,来根...原创 2020-04-21 18:58:53 · 328 阅读 · 0 评论 -
CSS3干货15:旋转摩天轮
今天做项目,无意看到个摩天轮效果,甚是有意思,决定自己来做做。原效果是JS 写的,我懒得用JS,就用 CSS3 写一个。那么多美女围绕着转,开心的要死,所以放了个单纯的小男孩在中间代表我的心情~效果动图如下:旋转的图片想做都少都无所谓,我这里做12个。主要的原理就是利用了 CSS3 的 transform 的位移 和 旋转变形,以及帧动画。HTML结构12张图,就用一个 u...原创 2020-04-07 12:25:54 · 3300 阅读 · 0 评论 -
CSS3干货14:自定义页面滚动条
自定义滚动条最早是 IE 玩出来的,但是后来, 不知道为什么 IE 把这个有意思的功能废弃了。现在各大浏览器又想重新拿起来这个功能,但是显得就有点混乱了,做的最好的还是 webkit 内核的浏览器。这里分三种主流浏览器Firefox,Chromium,IE 来讨论。先声明:此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文...原创 2020-04-04 16:04:27 · 3329 阅读 · 1 评论 -
CSS3干货13:把页面变成黑白灰色彩
2020年的第一季度,一场突如其来的疫情,让整个世界蒙上了阴影。明天(4月4日),国家将进行哀悼活动。作为 IT 人,我也想要用自己的行动为这场疫情中s去的英雄和群众表示深切的哀悼。短短的几行 CSS 代码变灰整个页面,略表示沉痛的心情:html,body{ filter:grayscale(1); filter: gray; /* IE9 - */}具体就是...原创 2020-04-03 21:28:35 · 3033 阅读 · 3 评论 -
CSS3干货12:CSS3 使用非系统字体
今天有同学问我怎么在页面中使用自定义字体。OK,那么就写一篇博文凑数~一般,我们在页面中使用字体都是系统自带的。有时候为了让页面效果更出彩,我们会使用一些好看的非系统字体。如何在页面中使用这些字体?很简单,把字体文件下载下来,放在 CSS 文件夹中,CSS 中使用代码:@font-face { font-family: 'myFont'; /* 给字体起个名字 */ ...原创 2020-03-31 13:13:27 · 738 阅读 · 0 评论 -
CSS3干货11:页面中的公共CSS代码
一、什么是公共 CSS我的理解是:任何一个页面都用会到的 CSS 代码。“任何一个页面”的说法可能有点夸张,因为很多开发者都有自己的一些偏好设置。不管怎么说,一个成熟的前端开发老鸟做页面,都会用到这些 CSS 代码。最典型的代码,就是通配符样式设置:*{ margin:0; padding:0;}二、公共CSS的作用 减少浏览器的原始样式差异。这应该是...原创 2020-03-18 22:08:21 · 2807 阅读 · 3 评论 -
SCSS 里的数组及其遍历
做一个案例,需要这个效果HTML 结构很简单,就是一个 ul ,下面 6 个li,每个 li 的背景色不一样。HTML 结构如下:<h2 class="titles2"> 考生须知</h2><ul class="ksxz_ul"> <li><a href="#">报考条件</a></...原创 2020-02-05 14:06:48 · 12298 阅读 · 8 评论 -
CSS3干货10:如何做一个板块标题水平线左边带颜色效果
很多网站在设计栏目标题的时候,喜欢用下划线分开栏目标题和内容部分。而且线条左边的部分往往还有颜色,且这个颜色跟标题的文字长短保持一致。效果如图所示:这种效果其实很简单。我这里给大家推荐两种方式:假定我们的标题部分 HTML 结构如下:<h1> <span>热点新闻</span></h1>方式一:利用下边框。灰色...原创 2020-01-31 12:33:48 · 1237 阅读 · 2 评论 -
CSS3干货9:做一个弹跳动画
先看效果步骤1:准备一个 div 标签<div class="ball"></div>分析一下:这个效果上有两个内容:球 ,影子。球是这个div的 ::before 伪标签,影子 是这个球的 ::after 伪标签。步骤2:制作小球和影子 *{ margin: 0; padding: 0...原创 2019-12-08 22:17:46 · 1181 阅读 · 1 评论 -
CSS3干货8:防止用户复制网页中的文字以及更改选中的文字颜色
版权保护人人有责,为了防止用户复制粘贴文字,我们可以使用CSS 中的user-select 属性。不过,它不是一个W3C标准属性,需要写浏览器的前缀。body{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-selec...原创 2019-10-31 16:31:54 · 391 阅读 · 4 评论 -
页面顶部的阴影:Top Shadow
给页面顶部边缘添加一个阴影,就像这样:body::before { content: ""; position: fixed; /* 固定定位 */ top: -10px; left: 0; width: 100%; height: 10px; overflow:hidden; box-shadow: 0px 0 10px rgba(0, 0, 0, 0...原创 2019-10-19 23:16:35 · 837 阅读 · 0 评论 -
纯CSS3鼠标滑过溜光按钮
最近支付宝的抢“五福”活动很火。在支付宝首页中,有个“点击进入”的按钮,一直在溜光,挺好看的。(就是它)随用CSS3写了一个。主要用到的知识要点:1、溜光用的是标签的伪类2、溜光部分绝对定位,标签相对定位3、溜光部分的背景用了CSS3的渐变。这里是“白色透明--白色--白色透明”的方式ps:写渐变背景在我看来是非常麻烦的事情,还在有个网站不错,可以随便调整颜色,自动...原创 2019-01-30 20:05:22 · 393 阅读 · 0 评论 -
去掉手机浏览器默认的按钮样式
最近做个小东西,一个手机项目。里面要做一个按钮,设计稿如下,很简单吧?代码就不贴了,反正Chrome模拟手机浏览是很OK的。但是用手机真机测试,一脸蒙蔽,这个什么鬼?( 6s,最新UC浏览器)因为手机上,无法像在电脑上那样利用F12测试。我猜想是手机浏览器自带的样式劫持了自己的样式。果断先去掉手机按钮默认的样式:input[type="button"], inpu...原创 2019-01-20 00:40:23 · 767 阅读 · 0 评论 -
利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了。比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距)。但是不得不佩服百度的设计师,页面动画做的确实漂亮。其实这熊熊就是一个png图,长长的,把熊熊奔跑的动作分解成了几帧。(没法改背景色,大家可以下这个图在自己电脑上看下)整个百度浏览器官网动画基本上都是C...原创 2019-01-08 16:17:07 · 8176 阅读 · 10 评论 -
字体图标的使用方法
字体图标简单的说,就是一种特殊的字体,但是这种字体显示出来的就是一个一个的图标。所以称为“字体图标”。它跟传统的图片制作的图标相比,优势在于:1、大小可以通过 font-size 去设置2、颜色可以通过 color 去设置就像控制字体一样。更重要的是,字体图标是矢量的,不会有马赛克的出现~!所以,目前很多网站都是在用,尤其是移动端上的开发更是如此。但是字体图标的使用炒鸡简单~!...原创 2018-12-16 22:58:00 · 546 阅读 · 0 评论 -
CSS3新增的position属性值sticky介绍
CSS3不久前新增了position的属性值,sticky。设置了sticky的元素,在屏幕范围(viewport)时该元素的位置并不受到定位影响,该在哪里就是哪里(设置是top、left等属性无效)。但是,当该元素的位置将要移出屏幕范围时,定位又会变成fixed,根据设置的left、top等属性成固定位置的效果。 可以知道sticky属性有以下几个特点:1、该元素并不脱离文档流,仍...原创 2018-10-17 19:35:34 · 1498 阅读 · 0 评论