css hover变成手_看完这些 CSS 的技巧，我才知道什么叫做交互，UED 都自愧不如~...

最新推荐文章于 2023-06-05 17:14:58 发布
最新推荐文章于 2023-06-05 17:14:58 发布
阅读量225 收藏 1
点赞数
文章标签： css hover变成手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42157188/article/details/112111918
版权

13b6368ad3b19348883d1a78fc8089a4.png

前言

本文是笔者写 CSS 时常用的套路。不论效果再怎么华丽，万变不离其宗。

之前发的CSS 技巧[1]大部分都是依照本文的套路来写的

有人问我为什么我能想出这么多的动画？笔者阅番百部，对常用的动画技巧了如指掌，同样那些酷炫的网站只要细心观察，也会给笔者带来很多设计上的灵感。

一言以蔽之：只有多欣赏动画，才能写出好的动画。

交错动画

bdafeafcbe914cb493ae353af2501589.gif

有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。

那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到 CSS 动画有延迟(delay)这一属性。举个栗子，比如有十个元素播放十个动画，将第二个元素的动画播放时间设定为比第一个元素晚 0.5 秒(也就是将延迟设为 0.5 秒)，其他元素以此类推，这样它们就会错开来，形成一种独特的视觉效果。

7b5d499b05b517c6ac7c862c68b640f8.gif

这就是所谓的交错动画：通过设置不同的延迟时间，达到动画交错播放的效果。

本 DEMO 地址：Staggered Wave Loading[2]

0859d794a335fc45eb633d8f1df1053f.png
长按识别，查看 DEMO

用 JS 分割文本

还有一种经常用到的玩法：用 JS 将句子或单词分割成字母，并给每个字母加上不同延时的动画，同样也很华丽。

0e417d8871b57e0fe1720b5b353089a3.gif

本 DEMO 地址：Staggered LandIn Text[3]

6518e80a3320a7c14f958639ac27d86a.png
长按识别，查看 DEMO

一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话，就要给当前元素的延时各加上一个值，这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积，即：delay + Math.abs(i - middle) * step，其中中间元素的下标middle = letters.filter(e => e !== "").length / 2

7c56e23f081a0ed4d87b415a5c3d1b20.gif

本 DEMO 地址：Reveal Text[4]

1e8af9aae7071f8fd473ac96f54df8a3.png
长按识别，查看 DEMO

所有有交错特性的动画都在这儿[5]

随机粒子动画

说到随机性，我们可以实现一种更疯狂的效果：给几百个粒子添加交错动画，并且交错时间随机，位置大小也都是随机。如此一来我们就能用纯 CSS 模拟出下雪的效果。

又到了白色相簿的季节呢~为什么你写 CSS 这么熟练啊？

4402bdcc4f115a1faa9cf29fdc7d6cae.gif

本 DEMO 地址：[Snow (Pure CSS)](https://codepen.io/alphardex/full/dyPorwJ "Snow (Pure CSS "Snow (Pure CSS)")")

6a183b4cc7eeb2daf9eaf246f3d1ec66.png
长按识别，查看 DEMO

伪类和伪元素

伪类

eacac797bbc75be96fceb1329157441e.gif

HTML 元素的状态是可以动态变化的。举个栗子，当你的鼠标悬浮到一个按钮上时，按钮就会变成"悬浮"状态，这时我们就可以利用伪类:hover来选中这一状态的按钮，并对其样式进行改变。

:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child，用于选中元素的某一个子元素。其他的类似:focus、:focus-within等也有一定的使用。

本 DEMO 地址：Button Hover Border Stroke With Float Text[6]

0b18d03976b479b83645c6b04e1434c4.png
长按识别，查看 DEMO

所有:hover的动画都在这儿[7]

伪元素

47ef5bcbfe9a6f6e06a43a7bfbd54325.gif

简而言之，伪元素就是在原先的元素基础上插入一个额外的元素，而且这个元素不充当 HTML 的标签，这样就能保持 HTML 结构的整洁。

什么情况下用伪元素呢？比如实现一根条子划过文本的动画，在这个动画中每个文本都有属于自己的一根条子，那么我们就可以用伪元素为每个文本生成一个条子，而无需特地在 HTML 标签中加入条子的 div(当然，如果条子数量超过了 2 个，还是用 div 吧)

本 DEMO 地址：Header With Slide Bar[8]

36dec8c71110c62caa2344dfa957dac9.png
长按识别，查看 DEMO

overflow 障眼法

之前有做过闪光按钮的效果：鼠标悬浮按钮上时，一道光从左到右划过去。

笔者就用渐变来模拟那道光，通过transform: translateX()将其平移至右边。

4c540291d86a8bd8cba1d08a0bd99eb7.gif

但这样明显不对啊，这光为啥能被看见呢？不应该把它给"挡"起来吗？

于是乎，给按钮加上overflow: hidden，光在按钮外的位置时就被隐藏起来了。

ad76719635c52aa25f804270c08d238a.gif

这就是障眼法的力量:)

本 DEMO 地址：Button Hover Shining[9]

30e3f928b4e632acb3f1a9f260aac2ff.png
长按识别，查看 DEMO

更多障眼法可以看看这个作品[10]，一次性看个够。

兄弟选择符定制表单元素

提示：这里最好将input作为label的子元素，这样用户点击label时就能传到input上。

默认的input太丑怎么办？那就把它先抹掉，用appearance: none或opacity: 0都可以。

然后，利用兄弟选择符~来定制和input相邻的所有元素(+号也行，只不过只能选中最近的元素)，例如可以用伪元素生成一个新的方框代替原先的input，利用伪类:checked和动画来表示它被勾选后的状态，本质上还是障眼法哦~

b622138b50622929ed5fe6fa020ea7a3.gif

本 DEMO 地址：Todo List[11]

73c817d2b87d8d16966e05d1008425e6.png
长按识别，查看 DEMO

CSS 特性

善用某些 CSS 特性，也可以为你的作品增色不少哦

transform

PS 里的自由变换，各种 CSS 动画都离不开它，可以 3D

例子就不举了，因为几乎我所有的动画都用到了它

border-radius

为盒子添加圆角，如果设定为50%则是圆形，很常用

不规则的曲边形状

调整多个顶点的border-radius可以做出不规则的曲边形状

54443208d085d5dbc311c28c04f4f2db.gif

本 DEMO 地址：Nav Tab[12]

b7fdc12b1eee99112df1059771d5b160.png
长按识别，查看 DEMO

box-shadow

为盒子添加阴影，增加盒子的立体感，如果多层叠加的话会使阴影更加丝滑

ca4b109d213af67ea42551fb604a77fe.gif

本 DEMO 地址：Pagination[13]

151ac81ebc16a94d588c25ce97764de5.png
长按识别，查看 DEMO
遮罩

如果给box-shadow的扩张半径设定足够大的值，可以用它来遮住背景，而无需额外的 div 元素

a7dc96a41181698aa09027be59ab9c24.gif

本 DEMO 地址：Burger Menu[14]

dde170f1986923df75c44deed04150c0.png
长按识别，查看 DEMO

text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪 3D 文本等效果

a2b37278cc0be7b7fce716570dadcb9f.gif

本 DEMO 地址：Staggered GlowIn Text[15]

d6adae990476dae0f4ee8d9df10a380d.png
长按识别，查看 DEMO

background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

b3574176a4fe2adf987278c65fe636a3.gif

本 DEMO 地址：Menu Hover Fill Text[16]

6297d0a76d3c18b4d352c6c83e05ca24.png
长按识别，查看 DEMO

gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

0e090db7bb4fa242e495f2eec2bfceea.gif

这个作品用到了 HTML 的dialog标签，渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本 DEMO 地址：Confirm Modal[17]

172a423a257c6bcae3ccd0340329b00a.png
长按识别，查看 DEMO

filter

PS 里的滤镜，玩过的都懂，blur最常用

backdrop-filter

对背景应用滤镜，产生毛玻璃的效果

fd5f814585b0c5c609d041243b09d651.gif

本 DEMO 地址：Frosted Glass[18]

a6c1ce7047520178048ffa58dbc3020f.png
长按识别，查看 DEMO

mix-blend-mode

PS 里的混合模式，常用于文本在背景下的特殊效果

0e9c1d7a6fe9ad47f31f6ce431aee23a.gif

本 DEMO 地址：Menu Hover Image[19]

2a9ab2a3a595aa6573bd948188fe746d.png
长按识别，查看 DEMO

clip-path

PS 里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思

0d91154e8626aaa11aa07db3fa168d29.gif

本 DEMO 地址：Name Card Hover Expand[20]

928129a96764bda11b5db57d80b367cc.png
长按识别，查看 DEMO

-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品

8ab35ae484da8df3fbdb279968b450ea.gif

本 DEMO 地址：Card Flip Reflection[21]

56cd69639f8c36a3f6769d6a59670026.png
长按识别，查看 DEMO

彩蛋

26e241e60c5e761fc54e16d6d0c7d22f.gif

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本 DEMO 地址：Shinchou Menu[22]

caea6e88dfd9e7873754647a30349dc7.png
长按识别，查看 DEMO

参考资料

[1]

CSS技巧: https://juejin.im/post/5e033c946fb9a0164b4ef360

[2]

Staggered Wave Loading: https://codepen.io/alphardex/pen/XWWWBmQ

[3]

Staggered LandIn Text: https://codepen.io/alphardex/full/KKwvKGY

[4]

Reveal Text: https://codepen.io/alphardex/full/eYYMYXJ

[5]

这儿: https://codepen.io/alphardex/pens/tags/?selected_tag=staggered

[6]

Button Hover Border Stroke With Float Text: https://codepen.io/alphardex/pen/pooYKVa

[7]

这儿: https://codepen.io/alphardex/pens/tags/?selected_tag=hover

[8]

Header With Slide Bar: https://codepen.io/alphardex/pen/jOEOEzZ

[9]

Button Hover Shining: https://codepen.io/alphardex/pen/eYYzXBZ

[10]

作品: https://codepen.io/alphardex/pen/VwwVLdM

[11]

Todo List: https://codepen.io/alphardex/full/rNNPQwa

[12]

Nav Tab: https://codepen.io/alphardex/full/abbWOPR

[13]

Pagination: https://codepen.io/alphardex/full/QWwwwpp

[14]

Burger Menu: https://codepen.io/alphardex/full/BaaKvVZ

[15]

Staggered GlowIn Text: https://codepen.io/alphardex/full/Exxodoq

[16]

Menu Hover Fill Text: https://codepen.io/alphardex/full/QWwveZG

[17]

Confirm Modal: https://codepen.io/alphardex/full/eYYxzBm

[18]

Frosted Glass: https://codepen.io/alphardex/full/pooQMVp

[19]

Menu Hover Image: https://codepen.io/alphardex/full/OJPmQGz

[20]

Name Card Hover Expand: https://codepen.io/alphardex/full/ZEEBRrq

[21]

Card Flip Reflection: https://codepen.io/alphardex/full/ExaZgxp

[22]

Shinchou Menu: https://codepen.io/alphardex/full/ExavZdV

往期 十几家大厂前端实习面经总结 如何在 vue 中添加权限控制管理？ 09a6f9a73b04bc38d38352552fd68f65.png 转发在看就是最大的支持❤️
神力锂电
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css hover变成手_html实现鼠标悬停变成手型实现方式
weixin_39943678的博客
12-19 7777
1、采用a标签实现的方式内容2、采用CSS实现的方式// 变手形oElement.style.cursor = "pointer";// 恢复原样oElement.style.cursor = "default";或者 css写法：a.hand:hover {cursor:hand}cursor其他取值auto ：标准光标default ...
平面UI设计工作室html5响应式模板_平面设计_H5模板_自适应响应式源码.rar
08-05
这个模板是基于现代网页技术如JavaScript (js)、层叠样式表(CSS)构建的，旨在为用户提供优质的网页浏览体验，无论是在桌面端还是移动端。 首先，让我们深入了解一下HTML5。HTML5是超文本标记语言的最新版本，它在...
html底部代码_【开发小技巧】025—如何使用HTML和CSS创建反射效果？
weixin_39667452的博客
11-25 83
英文 |https://www.geeksforgeeks.org/how-to-create-reflection-effect-using-html-and-css/?ref=rp翻译 | web前端开发反射效果是可以在网站上使用的最酷的效果之一。这是一种非正式的效果，因此强烈建议不要在任何专业项目中使用它。你可以在个人项目中使用它，也可以在你的作品集中使用它来展示你的创造力。在这...
css中如何去掉button（按钮）的边框
热门推荐
baidu_40817555的博客
01-13 3万+
1、input,button,a {outline:0 none !important; blr:expression(this.onFocus=this.blur());} 2、在做页面的时候，有时候会发现点击一些按钮会自带一些边框，这是浏览器添加的，但是自己并不想要，那么很简单， 就是在给这些有按钮的地方去掉边框 css添加：outline：none 3、有时候发现点击img的时候也会有，但是...
Java——JButton按钮
桂的博客
05-23 4466
设置按钮大小以及位置，将按钮加入到JFrame窗口 JButton JB=new JButton("按钮"); JB.setBounds(90,150,50,20);//设置按钮大小以及位置 JF.add(JB);//将按钮加入到JFrame窗口
如何去掉按钮的立体效果
xjhtmxx的博客
05-19 2597
border:none;
File_os.rar_AFD算法程序_File_os.rar_file_os_二级文件系统
09-20
2、程序采用二级文件目录（即设置主目录[MFD]）和用户文件目录（UED）。另外，为打开文件设置了运行文件目录（AFD）。 3、为了便于实现，对文件的读写作了简化，在执行读写命令时，只需改读写指针，并不进行实际的...
UI交互设计：UED产品交互设计工作流程.pdf
最新发布
08-10
UI交互设计：UED产品交互设计工作流程.pdf
CSS教程：网页图片垂直居中的使用技巧
12-01
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到...
UED资深总监分享一个用户体验经典技巧.docx
11-28
本文由一位UED资深总监分享了一个与物理学中的“摩擦”相关的用户体验技巧，探讨了如何在适当的时候利用“摩擦力”来增强用户理解和安全性。 1. **理解信息的摩擦力** 在某些情况下，为了帮助用户充分理解复杂或...
CSS设置鼠标变成手样式
hexianfan的博客
06-05 4094
你可以使用 CSS 的 cursor 属性来设置鼠标悬停在数据上时的样式。默认情况下，当鼠标悬停在一个链接上时，会显示为手型。你可以利用这个特性，将 cursor 设置为 pointer，即可让鼠标在其他需要交互的元素上放置时也显示为手型。
css鼠标hover的时候变成小手型
weixin_51396911的博客
03-31 3625
a：hover{ cursor:pointer } //选择你需变化的盒子类名
迈进前端(02) 前端三巨头之CSS(CSS简介与使用)
一碗周
10-25 288
迈进前端(02) 前端三巨头之CSS(CSS简介与使用) 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。——苏轼 写在前面 此篇博客介绍 CSS 的基本信息(包括概念和发展历史)，还有如何使用 CSS 样式以及 CSS 的语法结构。 通过本篇博客我们将可以对 CSS 的含义有个初步的理解，掌握 CSS 语法中最为基础核心的内容。这些内容也将成为后续我们编写 CSS 样式代码必备的内容。 博客大纲如下 CSS概述 什么是 CSS CSS 是个缩写形式，其全称为 Cascading Style She
css 缩放_CSS 知识小结
weixin_39603995的博客
11-25 267
CSS 定位布局是在屏幕平面上的定位是在垂直于屏幕的 定位通过 position 属性进行创建，一共分为五个值static 默认值，待在文档流里，可以不写relative 相对定位，但不脱离文档流，多和absolute结合用absolute 绝对定位，定位基准是祖先元素里的非 static，最近的定位元素fixed 固定定位，定位基准是 viewport 视口sticky 粘滞定位，在移动端存在太...
css小手标示
zhaoletf的博客
09-08 9141
鼠标放上去显示小手形状， css样式如下： style=“cursor: hand” 部分浏览器支持 style=“cursor: pointer” 大部分浏览器都支持 把上述两个代码中的一个放进去即可,而小手的标示只是sursor其中一个属性,接下来让我一起看下sursor具体有那些用法。 cursor 定义和用法 cursor 属性规定要显示的光标的类型（形状）,下面是具体的属性。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为
css文字竖直显示_CSS入门学习笔记（三）布局小技巧
weixin_39884078的博客
11-21 119
调节渐变的工具网站：Ultimate CSS Gradient Generator from ColorZilla​www.colorzilla.com调节边框阴影的工具网站：Box Shadow CSS Generator​www.cssmatic.com伪类前面只有一个冒号，比如：hover 、：nth-child这是伪类，前面有两个冒号，比如::after,这是伪元素。简单来讲不是真的元素，...
css hover变成手_CSS3实现伪类hover离开时平滑过渡效果
weixin_33533460的博客
01-11 546
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。离开时效果生硬div{width: 100px;height: 100px;border:1px solid;margin:0px auto;mar...
鼠标悬浮显示小手可抓取（CSS伪类）
随便写写
09-28 1432
鼠标悬浮显示小手可抓取（CSS伪类）（工作随笔）
CSS3 - 鼠标移入移出时改变样式
weixin_30580943的博客
09-12 983
1，使用伪类实现样式切换伪类是CSS2.1时出现的新特性，让许多原本需要JavaScript才能做出来的效果使用CSS就能实现。比如实现下面的鼠标悬停效果，只要为:hover伪类应用一组新样式即可。当访客鼠标移动到按钮上面时，浏览器会自动为按钮应用这新样式。12<style>.slickButton{color:white;font-weight:bold;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值