文字轮播与图片轮播？CSS 不在话下
今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分析分析，从表面上看，确实好像只有元素的 transform: translate() 在位移，但是注意，这里 ...
如何完美地去除表格的“双线”
想必大家在做网页表格的时候一定遇到过这种情况吧 表格出现了“双线”，但是我们需要一个“单线”的表格 比较常用的解决方案 解决方案1： 在表格的样式中添加border-collapse: collapse;以设置边框合并（如果border-collapse的属性值为collapse，则会忽略 bord ...
阴影进阶，实现更加的立体的阴影效果！
CSS 阴影的存在，让物体看上去更加有型立体。 然而，在最简单的阴影使用之上，我们可以实现更多有意思且更加立体的阴影效果。 本文将带大家看看如何使用 CSS 实现几类比普通阴影更加立体的阴影效果。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow - 盒阴影 te ...
说一说CSS中的变量
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
Web前端基础精品入门（HTML+CSS+JavaScript+JS）[爱前端]听课笔记2：导航条的制作——css学习仿作马蜂窝
马蜂窝的首页是非常正能量，青春的网页，首页非常大气 logo在上一篇我们已经制作好，现在我们开始制作导航条 这个导航条字数不等，宽窄不一致，就是所有的li不一样宽，字多就宽，字少就窄，需要用padding去撑 pandding:0 10px; 实现如下 1、index.html里body->head ...
CSS入门
css-美化文档 html内部添加样式 在标签中添加声明 声明的关键字是style后接=再接"" <input type="text" placeholder="手机号码" style=""> 声明位置不分先后 在引号之间添加样式 <p style="font-size:14px;color:whi ...
CSS之Flex详解
flex是什么 根据规范中的描述可知道，Flexbox 模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。 flex分为两个部分，即容器(Container)和项目(i ...
Web前端基础精品入门（HTML+CSS+JavaScript+JS）[爱前端]听课笔记3：三角形的制作
菜单中有的项目有夏季菜单，需要添加一个三角形，这个三角形是利用两个边框不同颜色产生的楔形制作的 设置盒子的高度和宽度均为0，边框合适的大小，透明颜色，对应边设置高度、颜色 几个变形如下 最终的效果如下： ...
React 18 特性
原文链接 2022 年 3 月 29 日，React 18 正式版发布了。 新增了以下这些新功能 Concurrent Mode 并发模式 在 CM 模式下，React 在执行过程中，每执行一个 Fiber，都会看看有没有更高优先级的更新，如果有，则当前低优先级的的更新会被暂停，待高优先级任务执行完 ...
mask-image实现聚光灯效果
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...
vue - git
今天差不多从中午开始下午一点才开始学的，把git学了一大半了，还好任务不是很多，但是我上午用的时间挺值的，因为我去搞了个cnblogs的背景主题，就是你们现在所看到的这套，这个没搞明白有一通研究的，只不过现在已经搞熟悉了，添加那些参数，不得不说挺强大的，这个自己编辑页面的功能，我最满意的这套主题，是 ...
面试必问的8个CSS响应式单位,你知道几个？
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archi ...