文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端基础知识整理

就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。...file 定义文件选择字段和 "浏览..." 按钮，供文件上传。 hidden 定义隐藏输入字段。 image 定义图像作为提交按钮。 month 定义 month 和 year 控件（不带时区）。...p:last-of-type 伪元素 选择每个p元素是其父级的最后一个p元素 3 :only-of-type p:only-of-type 伪元素 选择每个p元素是其父级的唯一p元素 3 :only-child...p:only-child 伪元素 选择每个p元素是其父级的唯一子元素 3 :nth-child(n) p:nth-child(2) 伪元素 选择每个p元素是其父级的第二个子元素 3 :nth-last-child...:not(p) 伪类 选择每个并非p元素的元素 3 盒子模型 媒体元素 自适应和响应式 属性 背景属性 属性 描述 CSS background 复合属性。

3.2K20

如何用纯css打造类materialUI的按钮点击动画并封装成react组件

前言 作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue...原理 这个动效的原理其实也很简单,就是利用css3的transition过渡动画,配合::after伪对象就可以实现,点击的时候由于元素会激活:active伪类, 然后我们基于这个伪类, 在::after...伪对象上做背景的动画即可....以及透明度, 并且设置一个渐变的径向背景图像来实现水波纹动画的为了实现更优雅的动画,上面的css动画的实现可以借助cubic-bezier这个在线工具,他可以生成各种不同形式的贝塞尔曲线.工具长这样:...其实不仅仅是react, 我们使用同样的原理也可以实现一个vue版的按钮组件或者一个angular版的组件,变得只是语法而已.这样的组件设计思路和元素被官方用在很多ui库中, 比如单一职责原理, 组件的开闭原则

1.8K30
您找到你想要的搜索结果了吗？
是的
没有找到

玻璃拟态（Glassmorphism）会成为 UI 的新趋势吗？

不是整个产品都用，而是一小部分元素，这证明了我的观点，即如果审慎地少量采用，并且在这些背景上的对象在没有装饰的情况下仍能保持结构和可读性的话，这种风格是行得通的。 ?...如何实现玻璃拟态（Glassmorphism）:离屏幕越远透明度越低,越近透明度越高 这种效果的基础是把阴影、透明度和模糊背景结合到一起。...如何正确设置透明度 重要的是要记住一点，不管怎样，你不能让整个形状都透明，只能让它的填充透明。大多数设计工具在100%填充，对象透明度较低时，背景模糊会不起作用。。 ?...选择背景时，要确保色调差足够大，这样玻璃效果才真正可见。 最后细节 最后，你可以试着给形状添加1个像素厚的内边框，并且让它有一定的透明度。这可以模拟玻璃的边缘，让形状在背景当中脱颖而出。...Neumorphism的主要规则也可以用到这里——如果功能层次结构良好的话，则屏幕上的元素在没有背景的情况应该也能工作。这样可以确保有视力障碍的人仍然能够理解UI。 ?

1.4K20

做不好阴影和模糊？UI设计师看这一篇就够了

典型的阴影依赖于与中心（x，y或两者）的偏移，即模糊和不透明度。在上图的示例中，阴影在Y轴上向下移动了20个点，然后进行了Blur（模糊）操作。 ?...这种样式的唯一用例是表单输入（表单字段和复选框或单选按钮）和Neumorphism风格中的拉伸形状。在某些情况下，它们可用于使对象看起来更逼真，但应适度使用。 ?...可以通过在对象上使用内部阴影并反转X和Y的方向来实现此效果 Neumorphism的主要问题是，使用内部阴影和拉伸形状作为“选定”状态，标准状态与选定状态之间的可感知差异非常小，以至于即使是非视觉障碍的用户...背景模糊（Background Blur） 当苹果开始在其操作系统中使用背景模糊以实现某些屏幕上的毛玻璃效果后，背景模糊变得很流行。应用了此效果的对象会模糊其下的所有内容。 ?...在此示例中，具有90％不透明度和背景模糊的正方形叠加层位于图像的右侧。如您所见，当将三个白点放置在“投射”背景模糊的对象下时，它们会发生不一样的变化。

2.8K21

玻璃拟态（Glassmorphism）设计风格

整个效果的基础是阴影、透明度和背景模糊的组合，这种风格只能使用一个透明层，或者多个透明层，但当至少两个半透明层出现在一个相当繁忙的彩色背景上时，它是最突出和可见的。...设置透明度 无论如何，你不能让整个形状透明，只有让它的填充透明才行。大多数设计工具在填充为100%，对象透明度较低时，背景模糊会不起作用。...细节 你可以尝试的最后一件事是为形状添加1px内边框，并具有一定的透明度。它模拟玻璃边缘，可以使形状从背景中脱颖而出。...Neumorphism的主要规则也可以转化为此处-如果你具有良好的功能层次结构，则屏幕上的元素应该可以在没有背景的情况下工作，这样可以确保有视力障碍的人仍然能够理解UI。...这是一个与新拟态相同的不良示例，它在每个可能的屏幕元素上滥用效果。这样，某些用户几乎无法访问整个UI，同时也使其变得无聊和原始。

1.7K30

如何使用CSS创建按钮悬停动画效果？

opacity − 这个属性设置元素的透明度级别，其中1表示完全可见，0表示完全透明。 background-color − 这个属性设置元素的背景颜色。...color − 这个属性设置元素的文本颜色。 transition − 此属性控制两个状态之间的动画效果，例如默认状态和悬停状态。 bottom 和 top - 属性将元素相对于其容器定位。...使用CSS创建按钮悬停动画效果 按钮悬停动画是为网站增加视觉吸引力的好方法。要使用CSS创建按钮悬停动画效果，我们通常使用 :hover 伪类选择器与CSS过渡或关键帧动画相结合。...示例1 - 悬停放大 在这个示例中，按钮将具有蓝色背景和白色文本。当鼠标指针悬停在按钮上时，按钮将使用 transform 属性以平滑的过渡在0.5秒内缩放20%，背景颜色将变为绿色。...当鼠标指针悬停在按钮上时，不透明度将在0.5秒内平滑过渡到1。

16310

干货 | 携程火车票7个优化动画性能的方法

计算元素的样式（可能通过脚本重新计算）； b. 生成每个元素的几何形状和位置（布局）； c. 绘制图层的每个像素（初始化绘图并且进行绘图）； d. 将图层绘制到屏幕上（合并渲染层）。...我们想要为这些项目添加一个简单的动画效果，当鼠标悬停在项目上时，项目的背景色会渐变为蓝色。...当鼠标悬停在项目上时，我们使用: hover 伪类选择器来选择当前悬停的项目，并将其背景色渐变为蓝色。 这个例子中的选择器非常简单，浏览器可以很快地计算样式，从而提高动画的性能和流畅度。...假设我们有一个按钮，当用户点击按钮时，我们想要将一个文本框从屏幕上移除，并在移除时添加一个简单的动画效果。...}, 300); // 延迟300毫秒后移除文本框元素 }); 在这个例子中，我们使用 JavaScript 操作 DOM 元素，通过获取文本框和按钮元素，并在按钮被点击时逐渐将文本框的透明度降低到

16830

我写CSS的常用套路(附demo的效果实现与源码）

举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。 :hover是笔者最最常用的一个伪类。...简而言之，伪元素就是在原先的元素基础上插入额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。...我们知道每个元素都有::before和::after这两个伪元素，也就是说每个元素都提供了3个矩形（元素本身1个，伪元素2个）来供我们进行形状的绘制。...现在又有了clip-path这个属性，几乎任意的形状都可以被绘制出来，全凭你的想象力 上面的动图是条子划过文本的动画，条子就是每个文本所对应的伪元素，对每个文本和其伪元素应用动画，就能达到上图的效果了...input，利用伪类:checked和动画来表示它被勾选后的状态，本质上还是障眼法哦~ ?

1.6K20

我写CSS的常用套路(附demo的效果实现与源码）

举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成“悬浮”状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。 :hover是笔者最最常用的一个伪类。...简而言之，伪元素就是在原先的元素基础上插入额外的元素，而且这个元素不充当HTML的标签，这样就能保持HTML结构的整洁。...我们知道每个元素都有::before和::after这两个伪元素，也就是说每个元素都提供了3个矩形（元素本身1个，伪元素2个）来供我们进行形状的绘制。...现在又有了clip-path这个属性，几乎任意的形状都可以被绘制出来，全凭你的想象力 上面的动图是条子划过文本的动画，条子就是每个文本所对应的伪元素，对每个文本和其伪元素应用动画，就能达到上图的效果了...input，利用伪类:checked和动画来表示它被勾选后的状态，本质上还是障眼法哦~ ?

1.4K40

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？...先让我们来看看这些经常会出现的按钮形状： 矩形与圆角按钮 正常而言，我们遇到的按钮就这两种 -- 矩形和圆角： 它们非常的简单，宽高和圆角和背景色。...实现它们主要使用 transform 即可，但是要注意一点，使用了 transform 之后，标签内的文字也会同样的变形，所以，我们通常使用元素的伪元素去实现造型，这样可以做到不影响按钮内的文字。...，接着核心就是，在渐变矩形图形的基础上，利用 clip-path: polygon() 切出我们想要的形状（一个 8 边形）： 当然，上述代码非常容易联想到下述这种 6 边形，使用渐变和 clip-path...，所以对其中一个使用渐变，一个则是纯色，其颜色是可以完美衔接在一起的，这样就实现了渐变色的该图形： 外圆角按钮 接下来这个按钮形状，常见于 Tab 页上，类似于 Chrome 的分页： 我们对这个按钮形状拆解一下

1K10

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

背景 在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？...先让我们来看看这些经常会出现的按钮形状： 矩形与圆角按钮 正常而言，我们遇到的按钮就这两种 -- 矩形和圆角： 它们非常的简单，宽高和圆角和背景色。...实现它们主要使用 transform 即可，但是要注意一点，使用了 transform 之后，标签内的文字也会同样的变形，所以，我们通常使用元素的伪元素去实现造型，这样可以做到不影响按钮内的文字。...，接着核心就是，在渐变矩形图形的基础上，利用 clip-path: polygon() 切出我们想要的形状（一个 8 边形）： 当然，上述代码非常容易联想到下述这种 6 边形，使用渐变和 clip-path...，所以对其中一个使用渐变，一个则是纯色，其颜色是可以完美衔接在一起的，这样就实现了渐变色的该图形： 外圆角按钮 接下来这个按钮形状，常见于 Tab 页上，类似于 Chrome 的分页： 我们对这个按钮形状拆解一下

73221

从青铜到王者10个css3伪类使用技巧和运用

实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。伪类与伪元素的本质区别就是是否抽象创造了新元素。...具体的伪类和伪元素相关知识本文就不深入，下面介绍一下从青铜到王者10个css3伪类使用技巧和运用。...) 这里设置一个空的伪元素设置阴影透明度为0隐藏，再通过鼠标悬停恢复它的透明度，下面是传统和伪类实现的代码对比 Before...青铜-3、伪元素实现悬停时按钮填充和边界浮动动画 效果：（完整代码见后文链接） ?...特性兼容性问题的JS库 最后 CSS的世界很美好，每个知识点都可以值得深入研究和实践，对于伪类、伪元素也有很多土味特效可以写出来，比如说图片遮罩、图片背景模糊，更多高级的鼠标经过事件特效等等，上边的10

82330

阴影进阶，实现更加的立体的阴影效果！

假设我们，有一个矩形元素，希望给他添加一个长投影，像下面这样： 要生成这种长投影，刚刚说的叠加多层阴影可以，再就是借助元素的两个伪元素，其实上面的图是这样的： 关键点在于，我们通过对两个伪元素的 transform...OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体： 上图 div 只是带了一个非常浅的 box-shadow ，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，...给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样： OK，最后对这个用伪元素生成的元素进行一些虚化效果（filter或者box-shadow都可以），就可以实现一个边角看起来像被撕开的立体效果...transform-origin: center center; box-shadow: 0 0 20px 15px hsl(48, 100%, 20%); } 所以总结一下： 立体投影的关键点在于利于伪元素生成一个大小与父元素相近的元素...但是，就是丑，而且说不上来的奇怪。 问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。

1.5K20

Grafana+Flowcharting实现漂亮可定制的动态链路监控图

Tooltips的Display metrics Identify by：依据Id或label标签来匹配对应图上的元素，可以通过点击链接按钮直接选中某个元素 What ：图形元素Id When ：当处于哪种状态.../Text Mappings（标签/文本映射） Identify by：依据Id或label标签来匹配对应图上的元素，可以通过点击链接按钮直接选中某个元素 What ：图形元素Id When ：当处于哪种状态...Append(New line)：标签名和映射值都显示，但映射的值新起一行 Link Mappings （链接映射） Identify by：依据Id或label标签来匹配对应图上的元素，可以通过点击链接按钮直接选中某个元素...label标签来匹配对应图上的元素，可以通过点击链接按钮直接选中某个元素 What ：图形元素Id When ：当处于哪种状态 Action ：满足条件时的动作，有以下可选项 Shape: Change...Shape: Change position in Bar(0-100) ：更改形状在可滑动条上的位置，值的范围在0-100，针对可滑动的特定图形。

4.8K40

CSS伪类：CSS3鼠标滑过按钮动画

下面我们通过简单示例在学习一下css3动画和css伪类。...解析： 1、利用伪类作为鼠标:hover事件后，按钮的背景，这里用到了相对定位（relative）和绝对定位（absolute） 切记：使用绝对定位的元素，父元素一定要用相对定位，否则元素会一直向上找相对定位的元素...解析： 1、这里和示例一其实类似，不过这里是改变伪类的宽度。 2、以此类推，我们可以改变伪类的高度，就可以看到向下扩展的动画了。...解析： 1、伪类元素:after水平垂直居中 top: 50%; left: 50%; transform: translate(-50%, -50%); 2、动画改变宽度高度（和之前示例不一样的是，宽高必须大于按钮的宽度...1、伪类元素灵活运用 2、transition的作用 3、:hover鼠标移入动画 4、元素如何水平垂直居中 小伙伴们，有问题可以评论区留言哦，欢迎大家点评。

2.2K20

CSS 奇思妙想边框动画

两个伪元素分别只设置上、左边框，下、右边框，通过 hover 时改变两个伪元素的高宽即可。非常好理解。...: none; } } 最后看看运用到实际按钮上的效果： ?...关于背景和边框的填充关系，可以看这篇文章：条纹边框的多种实现方式 渐变的其他妙用 利用渐变，不仅仅只是能完成上述的效果。...CodePen - clip-path border animation 这里，因为会裁剪元素，借用伪元素作为背景进行裁剪并动画即可，使用 clip-path 的优点了，切割出来的边框不会产生小三角。...同时，这种方法，也是支持圆角 border-radius 的。 如果我们把另外一个伪元素也用上，实际实现一个按钮样式，可以得到这样的效果： ?

1.1K20

面试题必备-web页面基础

标签的内容可以是其他标签 标签元素全局标准属性 class属性：用于定义元素的类名 id属性：用于指定元素的唯一id style属性：用于指定元素的行内样式 title属性：用于指定元素的额外信息...和 right to left leng属性： 用于指定元素内容的语言。...:当元素上按下鼠标按钮时触发 onmousemove:当鼠标指针移动到元素上触发 onmouseout:当元素指针移出元素时触发 onmouseover:当鼠标指针移动到元素上时触发 onmouseup...标签选择器 通配符选择器 属性选择器 后代选择器 一级子元素选择器 id选择器 class选择器 伪类选择器 选择某个父元素的直接子元素 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素...move:移动形状 透明度opacity opacity:0.3 可见性：visibillity visibility: hidden visible 元素可见 hidden 元素不可见 collapse

2.4K10

什么? CSS 阴影竟然还有这种操作 !

OK，让我们来看看，这样一个元素，我们希望通过自定义阴影的位置，让它更加立体： 上图 div 只是带了一个非常浅的 box-shadow，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形...但是，就是丑，而且说不上来的奇怪。 问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。...，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter:blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。...正好，一个元素加上它的两个伪元素，刚好可以凑成这三个形状，我们试着实现以下，简单 CSS 代码如下： ---div {    position: relative;    width...也就是说，无法在 div 上再使用 filter:drop-shadow() 生成另一侧的红色投影，不过还好，我们还有两个伪元素的 filter:drop-shadow() 以及 box-shadow

44721

什么? CSS 阴影竟然还有这种骚操作 ？

上图 div 只是带了一个非常浅的 box-shadow，看上去和立体没什么关系，接下来，我们通过 div 的伪元素，给它生成一个和原图边角形状类似的图形，再通过 transform 位移一下，可能是这样...但是，就是丑，而且说不上来的奇怪。 问题出在哪里呢，阴影其实是存在明暗度和透明度的变化的，所以，对于渐进的每一层文字阴影，明暗度和透明度应该都是不断变化的。...其简单的原理就是，利用伪元素，生成一个与原图一样大小的新图叠加在原图之下，然后利用滤镜模糊 filter:blur() 配合其他的亮度/对比度，透明度等滤镜，制作出一个虚幻的影子，伪装成原图的阴影效果。...正好，一个元素加上它的两个伪元素，刚好可以凑成这三个形状，我们试着实现以下，简单 CSS 代码如下： --- div { position: relative;...也就是说，无法在 div 上再使用 filter:drop-shadow() 生成另一侧的红色投影，不过还好，我们还有两个伪元素的 filter:drop-shadow() 以及 box-shadow

47630
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券