满心博客_记录生活里的小美好 - 网页前端
小天遇到好用的软件，一定要分享出来，一方面自己以后寻找，另一方面给需要的朋友们，这次分享的是一个投票的网站，我公司去年年会就使用的这个，效果挺不错的，当然我用的不多，就是弄了一个节目投票，整体效果还不错，我推荐它的原因，是因为使用上免费，只有极少部分功能收费，像模版这些都是免费的。网站上模版确实不少，粗略看了下，大概有两百多套，涵盖了：单位、金融、建筑、医疗 等等系列，当然风格上也有：政企风、教务风、清新风、商务风、简约风 等等，个人觉得也基本上涵盖了大部分应用场景了，最香的是，模版完全免费使用。使用上那就更简单了，只有四步选择模版(多行业，海量模版)创建活动(预览模版，一键创建)编辑活动(灵活页面配置及活动内容)发布活动(设置选手内容，一键发布)活动编辑界面如下，配置项通俗易懂，配置简单，同时支持：防刷票、地区、IP黑名单等等策略，让投票更公平，也支持报名投票，功能上来说，还是比较齐全的。这款软件还支持大屏系统，活动配置发布之后，可以将大屏链接通过浏览器直接打开，用户可以通过大屏扫码投票，同时也能看到排名情况，这个功能还是挺赞的。当然，他们还有问卷系统，有需要也可以看看。有兴趣去看看吧：协作投票
业务项目中的一套架构里，考虑整合一套工作流作为审批使用，主要考虑两款Activity和flowable，权衡使用场景、操作性等方面，最终选择了flowable前言这篇文章不分享后台相关内容，因为此类文章度娘已经烂大街了，这里主要分享一款工作流前端设计器一个优秀的审批流程设计器可以减少无效沟通，简化配置和操作流程，使得审批流程的设计更加高效。设计器选择其实开源项目中有不少设计器，同时成型项目也不少，为何最终没选择，有以下几点原因：业务框架耦合度过高自身框架中过渡封装技术框架选型不同二次开发不便利直到看见FlowLong这款开源设计器，无论从设计器简洁程度，还是代码都无可挑剔，符合我的使用场景关于 FlowLong飞龙工作流引擎 FlowLong 真正的国产工作流引擎 json 格式实例模型、简易审批流程设计器、为中国特色审批匠心打造！功能说明满足部分标准 BPMN 功能的同时支持中国特色流程操作概念支持功能功能描述完成程度顺序会签同一个审批节点设置多个人，如 A、B、C 三人，三人按顺序依次收到待办， 即 A 先审批，A 提交后 B 才能审批，需全部同意之后，审批才可到下一审批节点。✅并行会签指同一个审批节点设置多个人，如 A、B、C 三人，三人会同时收到待办任务， 需全部同意之后，审批才可到下一审批节点。✅或签一个流程审批节点里有多个处理人，任意一个人处理后就能进入下一个节点✅票签指同一个审批节点设置多个人，如 A、B、C 三人， 分别定义不同的权重，当投票权重比例大于 50% 就能进入下一个节点✅抄送将审批结果通知给抄送列表对应的人✅驳回将审批重置发送给某节点，重新审批。驳回也叫退回， 也可以分退回申请人、退回上一步、任意退回等✅分配允许用户自行决定任务转办、委派、主办 及其它✅转办A 转给其 B 审批，B 审批后，进入下一节点✅委派A 转给其 B 审批，B 审批后，转给 A，A 审批后进入下一节点✅跳转可以将当前流程实例跳转到任意办理节点✅拿回在当前办理人尚未处理文件前，允许上一节点提交人员执行拿回✅撤销流程发起者可以对流程进行撤销处理✅加签允许当前办理人根据需要自行增加当前办理节点的办理人员✅减签在当前办理人操作之前减少办理人✅认领公共任务认领✅已阅任务是否查看状态显示✅催办通知当前活动任务处理人办理任务✅沟通与当前活动任务处理人沟通✅终止在任意节点终止流程实例✅运行及使用运行后端导入 idea 可选择 Gradle 或 Maven 方式管理依赖git clone https://gitee.com/aizuda/flowlong.git先跑一跑测试用例初始化执行 db/flowlong-mysql.sql 数据库脚本找到 flowlong-spring-boot-starter 模块，目录 test 部分 java/test找到 mysql 相关测试类 Test...java 执行观察数据库中表数据变化结构说明|- db 数据库文件存放目录 |- flowlong-core 工作流核心库 |- flowlong-mybatis-plus 数据访问层，默认 MybatisPlus 当然你可以适配其它 ORM |- flowlong-solon-example Solon 演示案例 |- flowlong-solon-plugin Solon 启动插件 |- flowlong-spring-boot-example SpringBoot 演示案例 |- flowlong-spring-boot-starter SpringBoot 启动插件 |- build.gradle Gradle 依赖管理 |- pom.xml Maven 依赖管理设计器导入 Vscodegit clone https://gitee.com/flowlong/flowlong-designer.git安装依赖、运行、打包# 安装依赖 npm install # 本地运行 npm run dev # 编译打包 npm run build效果预览源码仓库Demo后端源码设计器源码
一个简约风格的网址导航页，基于 [MIT] 协议开源。你可以直接使用它，也可以在此基础上客制化自己的网址导航。当然现在开源的导航站也非常多，但是让我眼前一亮还得是：Moon-Start软件特点⚡ 高效导航 - 极简样式，快速访问🍎 从心所欲 - 完全自由地增删改网站，支持自定义网站图标🛫 拖拽排序 - 快速调整网站顺序🔍 搜索词联想 - 支持必应、谷歌、百度等多个搜索引擎📱 响应式布局 - 可在任意尺寸的设备上正常显示🎨 主题切换 - 内置多种主题样式，可自由切换🌙 夜间模式 - 爱护你的双眼🌍 I18n - 支持简体中文、英文和日文📤 导入/导出数据 - 在不同设备间同步数据📦 浏览器插件 - 新建标签页时打开 Moon简洁直观的界面设计多样化的主题分类提供了多样化的主题分类，以满足用户的不同需求。您可以找到几乎关于任何主题的链接，无论是旅行、科技、学习、音乐还是体育等等。这种分类和归类使得您能够快速找到您感兴趣的网站，而无需费时费力地进行搜索。功能丰富的快捷方式网址导航网站的主要目的是使您快速访问您常访问的网站，并提供便利。它出色的地方就在于它提供了丰富的快捷方式。您可以设置您喜欢的网站为快捷方式，将其添加到主页上的卡片中，这样每次访问该网站时，您只需点击卡片即可进入。高度可定制化的个人化设置一个伟大的特点是提供高度可定制化的个人化设置。您可以根据自己的喜好和需求定制主页的布局和外观。您可以选择不同的主题颜色、卡片布局和网站图标。这样，您可以根据自己的喜好和风格来设计并优化您自己的网站导航。喜欢简约风，且想自定义导航站的伙伴，一定要试一试运行及部署1.拉取代码git clone https://github.com/jic999/moon-web-start.git2.进入目录cd moon-web-start3.安装依赖pnpm install4.启动项目pnpm dev5.打包项目pnpm build6.将生成的dist文件传到服务器，配置nginx指向dist目录即可浏览器插件插件适用于谷歌浏览器，可以在新建标签页时自动进入Moon。该插件暂未在Chrome应用商店发布，若要使用，请按照以下步骤：解压本项目下extension/moon-chrome-extension.zip'。在谷歌浏览器的扩展程序界面，打开右上角的开发者模式。点击左上角加载已解压的扩展程序。选择刚刚解压的moon-chrome-extension目录。演示地址、github源码
让 DOM 像眼睛一样注视的 JS 动画库。这是一个简易的动画库，主要用于计算一个 DOM 与观察目标，比如鼠标、DOM、输入框值之间的位置，从而做出一些有趣的动画，比方说让它变成跟眼睛一样。特性能够观看鼠标或其他 DOM，甚至输入值，观看任何你想要的内容！因为是基于DOM的，所以很容易支持RWD支持多种框架零依赖typescript开发gzip压缩后核心代码大小仅3kb如果元素不在屏幕上，则会自动停止观看兼容性||Chrome|Firefox|Safari|Edge|Opera|iOS Safari/Chrome|Android Chrome||:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:||支持度|70+|73+|14.1+|80+|70+|14.1+|✔|github源码官方demo
word预览，实际在开发中，是个很常见的功能，无论是自己开发组件，还是借助开源组件等等，都可以，但是今天我分享一款借助vue-office来实现word预览vue-office简介vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。目标是成为使用最简单，功能最强大的文件预览库vue-office功能特色一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用四处寻找、测试、集成各种库了使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容安装#docx文档预览组件 npm install @vue-office/docx vue-demi #excel文档预览组件 npm install @vue-office/excel vue-demi #pdf文档预览组件 npm install @vue-office/pdf vue-demi注意：如果是vue2.6版本或以下还需要额外安装 @vue/composition-apinpm install @vue/composition-apidocx文件预览目前支持docx文件预览，不支持doc文件使用网络地址预览通过配置docx文件的远程地址实现预览，这种预览方式最简单。 <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> 可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。上传文件预览预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。我们以ElementUI的上传组件作为示例，当然也可以使用普通的input type="file"，只要能获取文件的ArrayBuffer格式数据即可。 <el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action="" > <el-button size="small" type="warning">点击上传</el-button> </el-upload> <vue-office-docx :src="src"/> 主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。如果是原生的input type="file"，也是类似的 <vue-office-docx :src="src"/> xlsx文件预览目前只支持xlsx文件预览，不支持xls文件。使用网络地址预览 <vue-office-excel :src="excel" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> 上传文件预览和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。pdf文件预览使用网络地址预览 <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> 上传文件预览和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。我这里主要分享以VUE为基础的样例，如果你不是该框架，可参考官方文档vue-office官网
一个纯静态、功能强大的导航网站，支持SEO和在线编辑，希望你会喜欢，内置收录多达800+优质网站，为您的工作、学习、生活提供帮助。功能预览Discovery Navigation 的想法是让其简单方便，不依赖后端服务，不需要复杂的配置和数据库配置概念，因此可以开箱即用。🍰 支持SEO。🍰 完全静态，并提供自动部署功能。🍰 三叉树结构清晰，分类清晰。🍰 支持一个网站关联多个URL🍰 美丽与简约并存，不再是杀马特的时代。🍰 完全开源，易于定制。🍰 支持多种浏览模式并创新。🍰 支持足迹内存。🍰 支持手机浏览。🍰 支持搜索查询。🍰 支持自定义引擎搜索。🍰 多种主题切换。🍰 支持深色模式。🍰 支持后台管理，无需部署。🍰 支持从 Chrome 书签导入效果预览部署采用TypeScript + Html开发，因此部署也变得非常简单，这里分享三种部署方式Github部署1、fork当前项目2、在仓库页面点击分支，在输入框中输入创建分支。否则上传图片会出现404现象3、https://github.com/settings/tokens申请token，检查对应权限，如果不懂就全选，复制并保存token4、https://github.com/username/nav/settings/secrets/actions/new 创建一个新的应用token，name填写TOKEN（全部大写）5、访问https://github.com/username/nav/actions点击“绿色按钮”6、一定要修改项目配置文件nav.config.ts7、5分钟后，打开https://username.github.io/nav，你会看到一个非常强大的导航网站。Vercle部署步骤与第一种方法相同，只是不需要第四步。具体使用请按照步骤https://github.com/apps/vercelNetlify部署https://www.netlify.com/后台修改路由地址为system，如： https: //www.nav3.cn/#/light修改为https://www.nav3.cn/#/system升级升级前请备份根目录下的data文件夹和nav.config.ts文件夹，升级后替换。点击Watch右上角按钮，可第一时间跟踪版本升级情况。本地运行# Download git clone --depth=1 https://github.com/xjh22222228/nav.git cd nav # Installation dependencies(Node:v18) yarn # Start yarn start # Build yarn build源码地址githubdemo
博客第一版背景图都用的纯色系，当时感觉挺好的，过了这么久感觉有点审美疲劳的目前的背景图习惯加点背景色，然后高斯模糊这种方式，所以背景图素材就很关键了无意中看到一个网站，中有一些简约背景图，支持SVG下载、在线调色、调整大小，感觉还不错这个画风比较简约，先看看效果，万一你也喜欢这种呢为什么推荐它首先，它支持导出SVG格式，SVG的优点是可以无损放大，而且体积小，我从该网站下载了20几个背景，总共不到300KB，平均每个仅10KB。其次，支持在线编辑，所有图案大小、配色均可以调整，与你的报表适配。图案样式也可以小幅调整。使用时，将下载好的SVG图片放入画布背景即可：感兴趣的话，就去试试吧简约图库
今天无意中看到一个音乐网站，还挺有意思的，跟大家分享一下主要模拟大海与海底的声音，还可以配合等动物声音，再加上精美的3D动态海洋画面，带来一种沉浸式的深海体验，可以让躁动不安的心瞬间安静下来。还可以控制海浪的波涛汹涌或者沉到水底听听这些可爱的小动物的声音。整体上还是蛮有意思的，有兴趣去试试吧virtocean
创意CSS合辑二：轻松实现多种有趣效果
作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了弹跳的圆使用伪选择器 :before 和 :after ，并配合 animation 属性并设置 transform 变形参数，实现一个圆不停的弹跳的效果。实现思路：主体一个 div 标签用伪选择器 :before 和 :after 分别画两个圆，一个作为主体弹跳圆形，一个作为其阴影部分，分别设置 animation 动画参数，注意这里设置了反向播放参数 alternateHtml部分 弹跳的圆 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .yuan19{ width: 20px; height: 66px; position: relative; } .yuan19:before{ content: ''; width: 20px; height: 20px; position: absolute; border-radius: 50%; background-color: #333; animation: yuan191 .5s ease infinite alternate; } @keyframes yuan191 { 0% { top: 60px; height: 5px; border-radius: 50px 50px 25px 25px; transform: scaleX(1.5); } 50% { height: 20px; border-radius: 50%; transform: scaleX(1); } 100% { top: 0; } } .yuan19:after{ content: ''; width: 20px; height: 4px; border-radius: 50%; position: absolute; top: 62px; animation: yuan1912 .5s ease infinite alternate; } @keyframes yuan1912 { 0% { filter: blur(1px); transform: scaleX(1.5); background-color: rgba(0,0,0,0.9); } 50% { transform: scaleX(1); background-color: rgba(0,0,0,0.6); } 100% { filter: blur(2px); transform: scaleX(0.5); background-color: rgba(0,0,0,0.3); } }动态的波纹字使用 linear-gradient 拉出网格渐变，然后通过 animation 参数来改变 background-size 数据，形成不停变化的纹理效果。实现思路：主体一个 div 标签用 background-image: linear-gradient(...) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再设置 animation 的参数，修改 background-size 参数实现纹理不停变化Html部分 动态的波纹字 不就是 玩嘛！ CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .font20{ color: transparent; font-size: 70px; font-weight: 900; background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%); -webkit-background-clip: text; animation: font20 10s ease infinite; } @keyframes font20{ 0%{ background-size: 1px 2px; } 20%{ background-size: 4px 5px; } 40%{ background-size: 3px 4px; } 60%{ background-size: 5px 6px; } 80%{ background-size: 2px 3px; } 100%{ background-size: 7px 6px; } }好看的格栅字先绘制出渐变网格的文字效果，再利用 :before 以及搭配 content + attr(...)实现一个好看的网格阴影的文字实现思路：一个 div 标签，添加 data-text用 background-image: linear-gradient(...) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再使用 content + attr(...) 并让其覆盖到网格文字上面，形成视觉阴影效果此效果应该算是上一个的姊妹篇，可适用于内容的大标题等场景Html部分 好看的网格阴影文字 不就是 玩嘛 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .font21{ color: transparent; font-size: 70px; font-weight: 900; letter-spacing: 10px; background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%); background-size: 4px 4px; -webkit-background-clip: text; position: relative; } .font21:before{ content: attr(data-text); letter-spacing: 10px; color: green; position: absolute; top: -6px; left: -6px; text-shadow: 2px 2px #ffffff; }旋转的金币通过 animation 和 transform 来实现金币的 Y 轴旋转。实现思路：一个 div 标签用 box-shadow 实现金币的双层边框，设置 animation 的参数，修改 animation-timing-function 运动参数来实现旋转速度变化，修改 transform 参数让金币绕 Y 轴旋转Html部分 旋转的金币 ¥ CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .icon22{ width: 72px; height: 72px; line-height: 72px; text-align: center; color: #daa500; font-size: 40px; font-weight: 900; background-color: #ffee00; border-radius: 50%; box-shadow: inset 0 0 0 4px #ffee00,inset 0 0 0 5px #daa500,0 5px 12px rgba(0,0,0,0.2); animation: ani-icon22 5s ease infinite; } @keyframes ani-icon22{ 0%{ transform: rotateY(0deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } 50%{ transform: rotateY(900deg); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } 100%{ transform: rotateY(1800deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); } }一个旋转的金币，适用于游戏网站，会员币等场景。霓虹灯文字利用 animation 动画设置关键帧参数，再设置不同的延迟时间，达到一个闪烁的效果。实现思路：页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”利用 animation 动画在关键帧中设置不同的显示效果，然后不同的元素设置 animation-delay 加上不同的延迟时间，形成闪烁的视觉效果注意：设置 animation 动画时，animation-fill-mode 要设置为 forwards，以使动画执行完后保持在最后的状态不变此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。Html部分 闪烁的霓虹灯文字 鸿 星 尔 克 to be number one CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .light23{ cursor: default; } .title23{ color: #eaeaea; font-size: 32px; font-weight: 900; } .info23{ color: #eaeaea; font-size: 16px; letter-spacing: 1px; text-transform: capitalize; } .light23:hover .title23 span{ animation: light 0.4s ease forwards; } .light23:hover .title23 span:nth-of-type(2){ animation-delay: .14s; } .light23:hover .title23 span:nth-of-type(3){ animation-delay: .42s; } .light23:hover .title23 span:nth-of-type(4){ animation-delay: .78s; } @keyframes light{ 10%,30%,50%{ color: #eaeaea; text-shadow: none; } 20%,40%,60%{ color: #318BF6; text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED; } 100%{ color: #318BF6; text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED; } } .light23:hover .info23 span{ animation: light 0.4s ease forwards; animation-delay: 1s; }故障字体效果通过 animation 和 transform 来实现一个故障字体效果。实现思路：一个 div 标签，设置 data-text 值用 :before 和 :after 生成两个伪元素，设置 mix-blend-mode 混合模式，再分别设置 animation 的参数，让两个伪元素动起来，最后给主体 div 设置一个 transform: skew(...) 变形的 animation 实现视觉上故障的效果适用于网页404状态等场景应用。Html部分 故障字体效果 404 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .font24 { width: 156px; height: 98px; position: relative; font-size: 70px; font-weight: 900; color: transparent; letter-spacing: 10px; z-index: 10; animation: text-skew 4s linear infinite; } .font24:before,.font24:after { display: block; content: attr(data-text); position: absolute; top: 0; left: 0; } .font24:before { animation: text-light 1s alternate-reverse infinite; color: #ff0000; z-index: -5; text-shadow: 2px 2px 0 #00ff00; mix-blend-mode: darken; } .font24:after { animation: text-light2 0.5s alternate-reverse infinite; color: #00ff00; z-index: -10; text-shadow: 2px 2px 0 #ff0000; } @keyframes text-light{ 10% { transform: translate(-2px,4px); } 50% { transform: translate(2px, 2px); } 100% { transform: translate(-4px,4px); } } @keyframes text-light2{ 0% { transform: translate(0,0); } 20% { transform: translate(-2px,2px); } 40% { transform: translate(-2px,2px); } 60% { transform: translate(2px, -2px); } 80% { transform: translate(2px, 2px); } 100% { transform: translate(0,0); } } @keyframes text-skew{ 29%{ color: transparent; transform: skew(0deg,0deg); } 30%{ color: #000000; transform: skew(10deg,40deg); } 31%{ color: transparent; transform: skew(0deg,0deg); } 69%{ color: transparent; transform: skew(0deg,0deg); } 70%{ color: #000000; transform: skew(180deg,10deg); } 71%{ color: transparent; transform: skew(0deg,0deg); } }乱码效果通过 animation 配合伪元素搭配 content 属性来实现字符变换，实现一段字符不停更换。实现思路：一个 div 标签，div 内文字元素为英文字符最好用 :after 配合 content 属性，设置 animation 的参数让 content 内的字符进行变化，实现视觉上一种乱码的效果。这里要注意的是 content 内的字符长度不能超过主体 div 内字符的长度，也是前面为什么说主体 div 内的文字元素最好是英文字符的原因，为的是保持视觉上的统一适用于网页异常状态等场景应用。Html部分 一串乱码 The Bug! CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .font25{ position: relative; font-size: 24px; font-weight: 900; color: #1630f1; letter-spacing: 10px; background-color: #ffffff; } .font25:after{ content: ''; position: absolute; top: 0; z-index: 10; background-color: inherit; animation: text-ani25 2.4s linear infinite; animation-delay: 2s; } @keyframes text-ani25{ 0%{ content: "$-"; left: 0; } 5%{ content: ";y"; left: 0; } 10%{ content: "*&#H"; left: 0; } 15%{ content: "-!);"; left: 0; } 20%{ content: "#$_}-'"; left: 0; } 25%{ content: ":0^!$."; left: 0; } 30%{ content: "#{+.-?#u"; left: 0; } 35%{ content: "f7*%}-;#"; left: 0; } 40%{ content: "^='?'*$!"; left: 0; } 45%{ content: "+0^&!`^-"; left: 0; } 50%{ content: "&-?>-=|`"; left: 0; } 55%{ content: "u<|:#-"; left: auto; right: 0; } 60%{ content: ";~0![,"; left: auto; right: 0; } 65%{ content: ")+->"; left: auto; right: 0; } 70%{ content: "+.=d"; left: auto; right: 0; } 75%{ content: "&%"; left: auto; right: 0; } 80%{ content: "`@"; left: auto; right: 0; } 85%{ content: "-"; left: auto; right: 0; } 90%{ content: "#"; left: auto; right: 0; } 95%{ content: ""; left: 0; } 100%{ content: ""; left: 0; } }加载的花瓣通过 animation 配合 transform 实现4个圆的变化运动，形成视觉动态。实现思路：4个 div 绘制4个圆形每个圆形设置不同的 animation 参数，让每个圆形都渐渐变化成带一个角的；然后给4个圆的父元素 div 设置 animation 参数，在关键帧中设置 transform 属性，让整体旋转、放大、缩小适用于各种加载、刷新等状态的场景。Html部分 加载的圆 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .loading26{ width: 90px; height: 90px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; animation: loading26-eff 3s linear infinite; } @keyframes loading26-eff{ 0%{ transform: scale(1) rotate(0); } 20%{ transform: scale(1) rotate(72deg); } 40%{ transform: scale(0.5) rotate(144deg); } 60%{ transform: scale(0.5) rotate(216deg); } 80%{ transform: scale(1) rotate(288deg); } 100%{ transform: scale(1) rotate(360deg); } } .round26{ width: 40px; height: 40px; display: block; border-radius: 20px 20px 20px 20px; box-sizing: border-box; } .round26:nth-of-type(1){ background-color: #50DE68; animation: round-eff261 3s linear infinite; } .round26:nth-of-type(2){ background-color: #3DC453; animation: round-eff262 3s linear infinite; } .round26:nth-of-type(3){ background-color: #14BE71; animation: round-eff263 3s linear infinite; } .round26:nth-of-type(4){ background-color: #78DE35; animation: round-eff264 3s linear infinite; } @keyframes round-eff261{ 0%{ border-radius: 20px 20px 20px 20px 20px; } 20%{ border-radius: 20px 20px 20px 20px; } 40%{ border-radius: 20px 20px 0 20px; } 60%{ border-radius: 20px 20px 0 20px; } 80%{ border-radius: 20px 20px 20px 20px 20px; } 100%{ border-radius: 20px 20px 20px 20px 20px; } } @keyframes round-eff262{ 0%{ border-radius: 20px 20px 20px 20px 20px; } 20%{ border-radius: 20px 20px 20px 20px; } 40%{ border-radius: 20px 20px 20px 0; } 60%{ border-radius: 20px 20px 20px 0; } 80%{ border-radius: 20px 20px 20px 20px 20px; } 100%{ border-radius: 20px 20px 20px 20px 20px; } } @keyframes round-eff263{ 0%{ border-radius: 20px 20px 20px 20px 20px; } 20%{ border-radius: 20px 20px 20px 20px; } 40%{ border-radius: 20px 0 20px 20px; } 60%{ border-radius: 20px 0 20px 20px; } 80%{ border-radius: 20px 20px 20px 20px 20px; } 100%{ border-radius: 20px 20px 20px 20px 20px; } } @keyframes round-eff264{ 0%{ border-radius: 20px 20px 20px 20px 20px; } 20%{ border-radius: 20px 20px 20px 20px; } 40%{ border-radius: 0 20px 20px 20px; } 60%{ border-radius: 0 20px 20px 20px; } 80%{ border-radius: 20px 20px 20px 20px 20px; } 100%{ border-radius: 20px 20px 20px 20px 20px; } }输入框交互效果利用 flex 布局，然后利用 css 选择器来实现鼠标悬浮、点击等状态的交互效果。实现思路：label 搭配 input ，然后 input 设置 required 来判断非空状态利用 flex 布局，设置 justify-content: flex-end; 让输入框变高时，自动撑起提示文本。通过 :hover 、:foucus 、:valid 来判断鼠标状态，然后变化成不同的样式来实现交互的效果此效果可适用于小表单、或者登录注册表单等场景。Html部分 输入框交互 用户名 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .label28{ width: 190px; height: 68px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; cursor: text; } .span28{ width: 100%; color: #000; font-size: 14px; margin-bottom: 6px; padding: 0 10px; } .inp28{ width: 100%; padding: 0 10px; height: 2px; border: 0; font-size: 14px; box-sizing: border-box; background-color: rgba(0,0,0,0.1); transition: .3s; } .inp28:hover{ background-color: rgba(50,133,255,0.7); } .inp28:focus,.inp28:valid{ background-color: rgba(50,133,255,0.2); border: 2px solid rgba(50,133,255,0.7); border-radius: 4px; height: 42px; color: #000; }圆点交互:hover 获取鼠标状态，当鼠标悬浮上方时，改变背景样式来实现鼠标的交互。实现思路：两个span 搭建按钮主体当鼠标悬浮时，改变圆形 span 的参数，并且加上 transition 过渡效果，来实现圆形变成矩形背景的交互的效果此效果适用于文字按钮，也可以用于标记文字链接的地方，可以让鼠标与文字有一个有意思的交互效果。Html部分 圆点交互按钮 查看详情 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn29{ width: 100px; height: 42px; line-height: 42px; position: relative; cursor: pointer; } .btn29-bg{ width: 30px; height: 30px; display: block; border-radius: 15px; position: absolute; left: 0; bottom: 0; background-color: #97E138; transition: 0.24s; } .btn29-span-text{ width: 100%; text-align: center; display: block; font-size: 16px; font-weight: 700; color: #056C00; position: absolute; } .btn29:hover .btn29-bg{ width: 100%; height: 42px; border-radius: 21px; }文字上下滑动按钮当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。实现思路：一个 div 父元素，及其子元素span ，形成一个大按钮每个 span 添加其伪元素 :after ，并通过 content 属性插入文本，然后通过定位让其每个伪元素放到其上或下的位置，通过 :hover 获取鼠标状态，当鼠标悬浮在按钮上方时，改变其伪元素的定位，利用 transition 过渡效果，来让其伪元素上下滑入滑出，实现按钮块上下滑动的的交互效果此效果适用于较大的按钮入口，如主页banner处按钮，也可以放在当作首屏当作一个大banner作为视觉效果等场景。Html部分 文字上下滑动按钮 探 索 未 知 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn30{ height: 42px; position: relative; cursor: pointer; display: flex; overflow: hidden; } .btn-text30{ width: 36px; height: 42px; line-height: 42px; text-align: center; display: block; background-color: #457356; color: #ffffff; font-size: 16px; font-weight: 700; position: relative; } .btn-text30:after{ width: 36px; height: 42px; position: absolute; background-color: #3185fa; color: #ffffff; z-index: 99; transition: 0.3s ease-in-out; } .btn-text30:nth-of-type(1):after{ content: '学'; top: -42px; left: 0; } .btn-text30:nth-of-type(2):after{ content: '无'; top: 42px; left: 0px; } .btn-text30:nth-of-type(3):after{ content: '止'; top: -42px; left: 0; } .btn-text30:nth-of-type(4):after{ content: '境'; top: 42px; left: 0px; } .btn30:hover .btn-text30:after{ top: 0; }呼吸灯按钮模拟微信发送语音按钮，在按住按钮时增加呼吸灯效果。实现思路：主体一个 button 标签通过 :hover 和 :active 获取状态，分别设置不同的样式，当按钮按下时，增加 animation 动画并设置参数，让按钮阴影产生变化来实现呼吸灯效果Html部分 呼吸灯按钮 按住说话 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn31{ width: 190px; height: 42px; cursor: pointer; border: none; border-radius: 4px; background-color: #333; font-size: 16px; font-weight: 700; color: #fff; transition: 0.3s; } .btn31:hover{ background-color: #3185fa; } .btn31:active{ animation: btn31-eff 3s linear infinite; } @keyframes btn31-eff{ 0%{ box-shadow: 0 0 2px #3185fa; } 50%{ box-shadow: 0 0 40px #3185fa; } 100%{ box-shadow: 0 0 2px #3185fa; } }新拟态按钮使用 box-shadow 属性模拟新拟态风格按钮，当鼠标 :hover 悬浮时，通过 transition 过渡效果实现阴影变化丝滑过渡。实现思路：主体 button 标签给 button 设置 box-shadow 属性，设置外阴影和内阴影，然后 button 按钮增加 transition 属性，当鼠标悬浮在上方时，改变按钮的外阴影和内阴影参数，实现阴影的变化过渡Html部分 新拟态按钮 FUN CSS部分.app{ width: 100%; height: 100vh; background-color: #d1d1d1; position: relative; display: flex; justify-content: center; align-items: center; } .btn32{ height: 70px; padding: 0 20px; cursor: pointer; border: 1px solid rgba(255,255,255,0.8); border-radius: 10px; background-color: #f2fff7; font-size: 32px; font-weight: 700; color: #44d431; box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8); transition: 0.2s; } .btn32:hover{ color: #3034d4; background-color: #f2f3ff; border: 1px solid rgba(255,255,255,1); box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8); transform: translateY(10px) scale(0.98); }暗黑模式切换开关用css打造一个切换界面暗黑模式的按钮开关。实现思路：用 label 和 input 标签绘制开关按钮，span 标签绘制简约的月亮和太阳图标通过 :checked 属性选择器获取开关的状态，利用 span 标签通过 box-shadow 属性来实现月亮和太阳图标，然后通过 transition 过渡属性来实现开关时月亮和太阳图标的过渡变化，给人视觉上开关的效果Html部分 暗黑模式切换开关 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .label34{ width: 60px; height: 32px; position: relative; cursor: pointer; } .inp34{ display: none; } .check-span34{ width: 100%; height: 100%; display: block; background-color: #383838; border: 2px solid #383838; box-sizing: border-box; border-radius: 16px; transition: 0.3s linear; } .check-span34:after{ content: ''; width: 22px; height: 22px; background-color: #383838; box-shadow: inset -8px -4px 0 #ffffff; border-radius: 11px; position: absolute; top: 5px; left: 6px; box-sizing: border-box; transition: 0.3s ease-in-out; } .inp34:checked + .check-span34{ background-color: #ffffff; } .inp34:checked + .check-span34:after{ transform: translateX(26px); background-color: orange; box-shadow: none; }文字跳动的输入框当输入框获取焦点准备输入时，让输入框内提示文字跳起来的交互效果。实现思路：主体 label 和 input 标签，span 标签是模拟输入框内提示文字内容通过 ::focus 和 :valid 伪选择器获取输入框的状态， 给span 标签增加 transition 过渡属性，并且给单独的文字 span 标签添加 transition-delay 属性，分别设置不同的延迟参数，实现每个单独的提示文字依次跳起来的视觉效果Html部分 提示文字跳起来的输入框 用 户 名 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .label35{ width: 180px; position: relative; cursor: text; } .inp35{ width: 100%; padding: 0 10px; height: 42px; border: 0; border-bottom: 2px solid #414141; font-size: 16px; outline: none; box-sizing: border-box; transition: .3s; } .span35-box{ width: 100%; padding: 0 10px; color: #aaa; font-size: 16px; position: absolute; top: 9px; box-sizing: border-box; display: flex; } .span35-info{ transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5); } .span35-info:nth-of-type(2){ transition-delay: 100ms; } .span35-info:nth-of-type(3){ transition-delay: 200ms; } .inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{ color: #3034d4; transform: translateY(-30px); } .inp35:focus,.inp35:valid{ border-bottom: 2px solid #3034d4; }音频小特效使用 css3 animation 动画属性模拟实现一个音频节奏变化的小动效。实现思路：用7个 div 标签，绘制音频节奏谱7个 div 基于 flex 布局，进行底部对齐，让7个 div 标签变化时从底部往上进行高度的变化，然后基于 animation 属性，再设置不同的延迟时间及动画时长，让7个 div 标签在视觉上实现不同的变化频率Html部分 音频小动效 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .audio-box37{ width: 84px; height: 32px; display: flex; justify-content: space-between; align-items: flex-end; } .audio37-block{ width: 6px; box-sizing: border-box; background-color: #97E138; animation: audio73-eff 2s linear infinite; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138; } .audio37-block:nth-of-type(2){ background-color: #FF3A85; animation-delay: .3s; animation-duration: 2.4s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85; } .audio37-block:nth-of-type(3){ background-color: #A2DAF6; animation-delay: .38s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6; } .audio37-block:nth-of-type(4){ background-color: #FFD6D0; animation-delay: .5s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0; } .audio37-block:nth-of-type(5){ background-color: #FF472C; animation-duration: 2.7s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C; } .audio37-block:nth-of-type(6){ background-color: #DE74CE; animation-delay: .6s; animation-duration: 1.4s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE; } .audio37-block:nth-of-type(7){ background-color: #36AFCA; animation-delay: .8s; box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA; } @keyframes audio73-eff{ 0%{ height: 0; } 50%{ height: 32px; } 100%{ height: 0; }
创意CSS合辑一：轻松实现多种有趣效果
作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。相信有了以下示例，很多不会css动画效果的朋友，也就会了列表文字图标实现思路：主要看css部分，先固定 span 标签宽高为，圆角 50%，然后设定行高，让字符垂直居中；设定 overflow: hidden，限制字符溢出；然后设定 letter-spacing: 200px,让字符间距变大，不让第二个字符显示到span中；然后设定 text-indent: 12px，来让第一个字符居中。Html部分 04 第一个字符串生成文字图标 第一个字符串生成文字图标第一个字符串生成文字图标 用CSS可以做什么？用CSS可以做什么？ 前端的致命诱惑前端的致命诱惑 css部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .app ul { max-width: 300px; } .app ul li{ width: 100%; color: #152239; font-size: 16px; line-height: 42px; margin: 15px 0; float: left; } .app ul li span{ width: 42px; height: 42px; line-height: 40px; color: #1E47ED; font-size: 18px; font-weight: 700; text-indent: 12px; border-radius: 50%; display: block; float: left; overflow: hidden; background-color: #eaeaea; letter-spacing: 20px; margin-right: 15px; } 动态圆点水波纹这个效果使用 css 中 animation 属性，以及搭配伪元素 ::after、::before 来实现两个圆交替变化。实现思路：伪元素基于主体圆写出两个蓝色圆形来做水波纹，并设置 animation 属性进行变化。注意：第二个伪元素的圆形，延迟 2s 启动 animation 动画。Html部分 圆点水波纹效果 CSS部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .dot { width: 48px; height: 48px; display: block; position: relative; border-radius: 50%; background-color: blue; z-index: 1; } .dot::after { width: 100%; height: 100%; content: ""; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -2; background-color: blue; animation: dot-play 4s linear 400ms infinite; } .dot::before { width: 100%; height: 100%; content: ""; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; background-color: blue; animation: dot-play 4s linear 200ms infinite; animation-delay: 2s; /* 延迟 2s */ } @keyframes dot-play{ from{ transform: scale(1); opacity: .2; } to{ transform: scale(4); opacity: 0; } }呼吸灯效果这个效果主要用 css3 的 animation 属性来实现的。实现思路：写出三个圆，class 分别为 .red、.green、.bluecss 部分主要使用 animation 来实现边框及其阴影的大小变化，和其透明度的变化这个效果可以用作在网站的整体 Loading，也可以放在网站首屏当一个 banner 的背景也是非常棒的！Html部分 好看的呼吸灯效果 CSS部分*{ margin:0; padding: 0; } body,html{ background-color: #000; } .app{ width:100%; height: 100vh; display: flex; justify-content: center; align-items: center; } span{ width: 60px; height: 60px; margin: 40px; border-radius: 50%; } .red{ animation: just1 2s ease-in-out infinite alternate; } .green{ animation: just2 3s ease-in-out infinite alternate; } .blue{ animation: just3 4s ease-in-out infinite alternate; } @keyframes just1{ 0%{ border: 5px solid rgba(255,0,0,0); box-shadow: 0 0 0 rgba(255,0,0,0),0 0 0 rgba(255,0,0,0) inset; } 100%{ border: 5px solid rgba(255,0,0,1); box-shadow: 0 0 70px rgba(255,0,0,0.7),0 0 15px rgba(255,0,0,0.5) inset; } } @keyframes just2{ 0%{ border: 5px solid rgba(0,255,0,0); box-shadow: 0 0 0 rgba(0,255,0,0),0 0 0 rgba(0,255,0,0) inset; } 100%{ border: 5px solid rgba(0,255,0,1); box-shadow: 0 0 70px rgba(0,255,0,0.7),0 0 15px rgba(0,255,0,0.5) inset; } } @keyframes just3{ 0%{ border: 5px solid rgba(0,0,255,0); box-shadow: 0 0 0 rgba(0,0,255,0),0 0 0 rgba(0,0,255,0) inset; } 100%{ border: 5px solid rgba(0,0,255,1); box-shadow: 0 0 70px rgba(0,0,255,0.7),0 0 15px rgba(0,0,255,0.5) inset; } }动态毛玻璃此效果主要使用 backdrop-filter 属性，以及配合 animation 属性来实现毛玻璃模糊和一些动效。实现思路：两个圆形 div（.circle），以及模糊块（.bg-filter）使用animation 属性以及不同的参数来实现动效，产生动画视觉效果用 backdrop-filter 属性中的 blur 参数来模拟毛玻璃效果，数值越大，模糊效果越重，可适当调试参数，直到你喜欢为止此效果可适用于登录窗口，网站背景或者一些卡片列表中，使网页更具科技感和空间感。Html部分 动态的毛玻璃背景 CSS部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .box{ width: 400px; height: 300px; position: relative; } .circle-box{ width: 100%; height: 100%; border-radius: 10px; position: absolute; overflow: hidden; } .circle:first-child{ width: 120px; height: 120px; border-radius: 50%; border: 30px solid #7BF52A; box-sizing: border-box; position: absolute; top: -38px; left: -40px; animation: move-y 3.5s linear infinite; } .circle:last-child{ width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(136deg, #7BF52A 0%, #FFCD56 100%); box-sizing: border-box; position: absolute; bottom: -30px; right: -30px; animation: move-y 5s ease-in-out infinite; } .bg-filter{ width: 100%; height: 100%; background: rgba(255,255,255,.05); box-shadow: 0 2px 6px rgba(0,0,0,0.1); backdrop-filter: blur(6px); border-radius: 10px; box-sizing: border-box; position: absolute; } @keyframes move-y { 0% { transform: translateY(0); } 50% { transform: translateY(-16px); } 100% { transform: translateY(0); } }简约动态关注按钮此效果主要使用 css 伪选择器配合 css content 属性，以及 transition(过渡)属性来实现一个简约的动态按钮效果。实现思路：按钮主体代码就是一个 button 按钮标签，比较简单使用伪选择器 :before 配合 css content 属性，然后设置 transition 参数来实现按钮过渡动画效果此效果可适用于关注按钮、详情按钮等，增强用户交互体验。Html部分 简约的动态关注按钮 关注我 CSS部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } button{ width: 140px; height: 46px; font-size: 16px; font-family: Arial, Helvetica, sans-serif; font-weight: 700; color: #333; background-color: transparent; border: none; position: relative; box-sizing: border-box; transition: all 0.4s ease-in-out; } button:before{ content: ''; width: 4px; height: inherit; position: absolute; top: 0; left: 0; z-index: -5; background-color: #333; transition: all 0.4s ease-in-out; } button:hover{ cursor: pointer; color: #fff; } button:hover:before{ width: 100%; border-radius: 6px; }输入框交互此效果主要使用 css 伪选择器配合 html5 required 属性来实现一个简单的输入框的交互效果。实现思路：页面主要使用 label 与 input 标签，注意 input 中使用 required 属性，来判断 input 是否为空使用选择器 :hover 、:foucus 来获取鼠标状态，根据不同鼠标的不同状态来设置样式以及过渡效果，使用 :valid 来验证 input 值此效果可适用于登录页入口、小表单提交等页面，增强用户实时交互体验。Html部分 输入框选中交互动效 用户名 CSS部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } input{ list-style: none; outline-style: none; } label{ width: 240px; position: relative; display: flex; align-items: center; } input{ width: 240px; height: 32px; line-height: 32px; padding: 0 10px; border: 2px solid transparent; border-bottom-color: #333; background-color: transparent; box-sizing: border-box; transition: all 0.3s; font-size: 14px; color: #333; } span{ position: absolute; font-size: 14px; color: #999; left: 10px; cursor: text; z-index: 1; transition: all 0.3s; } label:hover input,input:focus{ border-color: blue; border-radius: 8px; } input:focus+span,input:valid+span{ transform: translateY(-32px); }loading动画这个 Loading 效果主要用 css3 的 animation 属性配合 border 属性来实现的。实现思路：写出 loading 主体代码css 部分主要设置边框颜色来实现整体边框配合顶部边框模拟加载状态，然后使用 animation 来实现整体旋转Html部分 loading CSS部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .loading { width: 50px; height: 50px; border: 4px solid rgba(0, 0, 0, 0.2); border-top-color: #000000; border-radius: 50%; animation: loading 1s linear infinite; } @keyframes loading { to { transform: rotate(360deg); } }鼠标悬浮线条动态变化这个链接悬浮效果主要用 css3 的 animation 属性配合 :hover 伪选择器来实现的。实现思路：a 标签主体，包裹子元素 span 以及文字元素 Design 。css 部分主要通过 :hover 伪选择器来设置 span 子元素样式，然后使用 animation 来实现 span 宽度变化。此效果可以在文字链接、文字按钮等地方实现一个简单的鼠标交互效果。Html部分 鼠标悬浮线条动态变化 Design CSS部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } a{ text-decoration: none; color: green; cursor: pointer; font-size: 34px; font-weight: bold; } .a-line{ width: 0; height: 2px; display: block; margin-bottom: 6px; background-color: green; } a:hover .a-line{ width: 100%; animation: move .5s ease; } @keyframes move{ from{ width: 0; } to{ width: 100%; } }按钮文字上下滑动这个按钮效果主要使用 :hover 伪选择器以及 transition 过渡属性来实现两个子元素上下过渡的效果。实现思路：button 标签主体，包裹两个子元素 span ，分别为 .defalut 和 .hover 。css 部分主要通过 :hover 伪选择器来分别设置两个 span 子元素的样式，然后配合 transform 以及定位来实现两个 span 的上下移动。注意：全局定义了 *{transition: .5s;}此效果可以在主入口按钮、详情或者更多等按钮处使用，增加一些鼠标的交互效果。Html部分 按钮文字上下滑动 鼠标放上来 点我吧 CSS部分*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #efefef; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } button{ width: 110px; height: 42px; color: #ffffff; background-color: #457356; border: none; border-radius: 4px; cursor: pointer; transition: all 0.3s linear; position: relative; overflow: hidden; } .defalut,.hover{ width: 100%; height: 100%; line-height: 42px; letter-spacing: 2px; display: block; transition: all 0.3s ease-in-out; cursor: pointer; } .hover{ position: absolute; left: 0; top: 100%; } button:hover .defalut{ transform: translateY(-100%); } button:hover .hover{ top: 0; }多彩变化的按钮这个按钮效果主要使用 :hover 、:active 伪选择器以及 animation 、transition 属性来让背景色循环快速移动形成视觉效果。实现思路：写上主体 button 标签css 部分主要通过 :hover 伪选择器判断鼠标悬浮时，设置 animation 参数让背景色沿 X 轴循环移动，注意这里变化的 background-positon 部分的 X 轴值等于按钮宽度，即 140px ，这样动画循环播放时就不会造成视觉断层Html部分 多彩变化的按钮 戳一下 CSS部分.app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } button{ width: 140px; height: 46px; font-size: 16px; font-weight: 700; color: black; border: 2px solid #ffffff; border-radius: 10px; background-color: #4158D0; background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 17%, #e6a731 39%, #8329e2 60%, #3fb75f 80%, #4158D0 100%); box-shadow: 0 0 0 2px #000000; cursor: pointer; transition: all 0.5s ease; } button:hover{ color: #ffffff; animation: quick 0.5s linear infinite; } @keyframes quick{ to { background-position: 140px; } } button:active{ transform: translateY(1px); }旋转的太极图案使用 :before 、:after 伪元素以及 animation 属性画一个顺时针旋转的太极图。实现思路：两个 div 标签，分别用作绘制整体大圆以及阴阳鱼。.taiji:before 和.taiji:after 伪元素分别绘制黑白阴阳鱼的主体，.yu:before 和 .yu:after 伪元素分别绘制黑白阴阳鱼的小鱼眼，然后设置旋转动画，顺时针旋转。Html部分 旋转的太极图 CSS部分.app{ width: 100%; height: 100vh; background-color: #e8e8e8; position: relative; display: flex; justify-content: center; align-items: center; } .taiji{ width: 200px; height: 200px; position: relative; border-radius: 50%; box-shadow: 0px -10px 20px 0px #2AF598, 0px 10px 20px 0px #08AEEA; animation: zhuan 5s linear infinite; } .taiji:before,.taiji:after{ content: ''; width: 200px; height: 100px; position: absolute; background-color: #fff; border-radius: 100px 100px 0 0; } .taiji:after{ top: 100px; background-color: #000; border-radius: 0 0 100px 100px; } .yu:before,.yu:after{ content: ''; width: 24px; height: 24px; position: absolute; top: 50px; left: 100px; border-radius: 50%; background-color: #000; border: 38px solid #fff; z-index: 1; } .yu:after{ left: 0; background-color: #fff; border: 38px solid #000; } @keyframes zhuan{ to { transform: rotate(360deg); } }新拟态输入框此效果使用 css 中 box-shadow 来模拟新拟态风格输入框被点击时的一个交互效果。实现思路：页面 input 标签， 并设置 placeholder 值使用 :foucus 来获取鼠标状态，设置 box-shadow 属性模拟新拟态风格，并设置过渡效果Html部分 12 新拟态输入框 CSS部分.app{ width: 100%; height: 100vh; background-color: #e0e0e0; position: relative; display: flex; justify-content: center; align-items: center; } input { width: 180px; height: 56px; border: none; outline-style: none; font-size: 16px; color: #333333; padding: 0 28px; border-radius: 28px; background: #e0e0e0; box-shadow: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff, inset 0 0 0 #b8b8b8, inset 0 0 0 #ffffff; transition: all .24s ease-in-out; } input:focus{ box-shadow: 0 0 0 #b8b8b8, 0 0 0 #ffffff, inset 6px 6px 12px #b8b8b8, inset -6px -6px 12px #ffffff; } input::placeholder { color: rgba(0, 0, 0, 0.4); font-size: 16px; font-weight: 700; transition: all .24s ease-in-out; } input:focus::placeholder { color: rgba(0, 0, 0, 0.8); }搜索框的小动特效使用 input 自定义样式模拟一个搜索图标，使用 transition 过渡属性实现搜索图标过渡到输入框的交互效果。实现思路：input 标签设置 required 判断是否为空input 自定义样式成圆形，随着 :focus 、:valid 判断输入框状态，来实现过渡动画此效果可适用于移动端H5页面、app导航栏等位置场景，增强动画交互体验。Html部分 搜索框小动效 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } label{ position: relative; } input{ width: 38px; height: 38px; line-height: 38px; outline-style: none; font-size: 16px; color: #333; border: 3px solid #a8a8a8; border-radius: 19px; padding: 0 16px; box-sizing: border-box; transition: all 1s ease-in-out; } .line{ width: 3px; height: 14px; display: block; background-color: #a8a8a8; transform: rotate(320deg); position: absolute; left: 30px; top: 32px; z-index: 10; opacity: 1; transition: all 1s ease-in-out; } input:focus,input:valid{ width: 180px; } input:focus+.line,input:valid+.line{ width: 1px; height: 16px; left: 19px; top: 10px; opacity: 0; transform: rotate(360deg); }简约大方的输入框使用 input 标签配合 transition 过渡属性实现输入框底部线条动态显示。实现思路：input 标签设置 required 判断是否为空，span 标签画输入框底部线条input 自定义样式去掉边框，随着 :focus 、:valid 判断输入框状态，来实现 span 线条变化过渡动画一款简约大方的动态输入框，适用于表单提交、账号登录入口。Html部分 简约大方的输入框 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } label{ position: relative; } input{ width: 140px; height: 36px; line-height: 36px; outline-style: none; font-size: 16px; color: #333; border: none; padding: 0 8px; box-sizing: border-box; } .line{ width: 0; height: 2px; display: block; background-color: #4158D0; background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 48%, #FFCC70 100%); transition: all 0.24s ease-in-out; } input:focus+.line,input:valid+.line{ width: 100%; }跳动的按钮使用 animation 属性，使 button 按钮不停的循环移动，产生视觉震动的效果。实现思路：一个 button 标签设置 animation 属性参数，让按钮位置不停循环变化Html部分 一直动的按钮 动起来 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .btn15{ width: 140px; height: 48px; line-height: 48px; background-color: #eee; border: none; border-radius: 24px; font-size: 16px; color: #333333; text-align: center; transition: all 0.24s linear; } .btn15:hover{ cursor: pointer; color: #fff; background-color: #253ed2; animation: yizhidong 0.24s linear infinite; } @keyframes yizhidong{ 0%{ transform: translate(0); } 20%{ transform: translate(-3px, 3px); } 40%{ transform: translate(-2px, -3px); } 60%{ transform: translate(3px, 2px); } 80%{ transform: translate(2px, -3px); } 100%{ transform: translate(0); } }汉堡菜单按钮使用 transition 过渡属性和 transform 变形属性，让汉堡图标和关闭图标之间进行过渡、变形，形成视觉效果。实现思路：label 标签包裹 input 标签，input 设置为多选按钮，三个 span 标签形成汉堡图标隐藏 input 多选按钮，设置 transition 过渡效果，当 input 多选按钮选中时，三个 span 标签设置变形效果，汉堡图标变形过渡到关闭图标适用于h5页面或者app页面中，隐藏菜单和打开菜单时使用。Html部分 汉堡菜单按钮 CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .label16{ width: 48px; height: 36px; display: block; position: relative; cursor: pointer; } .inp16{ display: none; } .line16{ width: inherit; height: 4px; border-radius: 2px; display: block; background-color: #3d3d3d; position: absolute; top: 0; transition: all 0.24s ease-in-out; } .line16:nth-of-type(2){ top: 16px; } .line16:nth-of-type(3){ top: 32px; } .inp16:checked ~ .line16:nth-of-type(1){ transform: rotate(45deg); top: 16px; } .inp16:checked ~ .line16:nth-of-type(2){ width: 0; } .inp16:checked ~ .line16:nth-of-type(3){ transform: rotate(-45deg); top: 16px; }文字加载动画使用 animation 动画属性让每个字符上下动起来，形成视觉加载效果实现思路：每个字符用 span 标签单独包裹所有 span 标签设置 animation 动画参数，注意设置 infinite 参数，使动画循环播放；给每个 span 设置动画延迟，形成视觉加载效果适用于加载页或底部刷新交互动画。Html部分 文字加载动画效果 F U N C S S CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .loading17{ height: 48px; font-size: 32px; font-weight: 700; letter-spacing: 24px; color: black; display: flex; justify-content: center; align-items: center; } .loading17 .load-span17{ animation: text-load17 2.8s linear infinite; } .loading17 .load-span17:nth-of-type(1){ color: #3185fa; animation-delay: 0.4s; } .loading17 .load-span17:nth-of-type(2){ color: #fc3621; animation-delay: 0.8s; } .loading17 .load-span17:nth-of-type(3){ color: #fcbb02; animation-delay: 0.12s; } .loading17 .load-span17:nth-of-type(4){ color: #3285ff; animation-delay: 1.6s; } .loading17 .load-span17:nth-of-type(5){ color: #2ab148; animation-delay: 2.0s; } .loading17 .load-span17:nth-of-type(6){ color: #fb3320; animation-delay: 2.4s; } @keyframes text-load17{ 0%{ transform: translateY(0); } 50% { transform: translateY(-20px); } 100%{ transform: translateY(0); } }聚光灯效果使用 -webkit-background-clip 和 clip-path ，并配合 animation 属性，实现一个好看聚光灯效果。实现思路：主体部分一个 div 标签用 background-image 的 linear-gradient 拉出渐变背景，让文字颜色透明 color: transparent ，然后配合 -webkit-background-clip: text 给文字实现渐变效果，最后加上动画属性 animation 并设置 clip-path 参数就可以啦注意：这里使用的是 -webkit-background-clip ，而不是 background-clip 。可适用于页面加载或展示页面大标题内容。Html部分 聚光灯效果 spotlight CSS部分.app{ width: 100%; height: 100vh; background-color: #ffffff; position: relative; display: flex; justify-content: center; align-items: center; } .spotlight18{ color: #eaeaea; font-size: 40px; font-weight: 900; text-transform: uppercase; position: relative; } .spotlight18:before{ width: inherit; height: inherit; content: attr(data-cont); color: transparent; background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 30%, #FFCC70 66%, #56e28d 100%); -webkit-background-clip: text; position: absolute; top: 0; left: 0; animation: spotlight18 8s linear infinite; } @keyframes spotlight18{ 0%{ clip-path: ellipse(32px 32px at 0 50%); } 50%{ clip-path: ellipse(32px 32px at 100% 50%); } 100%{ clip-path: ellipse(32px 32px at 0 50%); } }