css
43篇文章 · 0订阅
  • 「动感波浪」Input输入框上的占位文本动画效果〰️
    详细介绍纯CSS和JS创建漂亮的波浪输入框占位文本动画：逐字显示、颜色渐变和波浪上移的动态效果。为网页提供生动、有趣的输入体验用户在输入时获得更好的视觉反馈。贝塞尔函数给过渡效果带来平滑和流畅的感觉
    CSS HTML JavaScript
    「动感波浪」Input输入框上的占位文本动画效果〰️
  • 详解css需求—动态斑马线进度条效果
    感觉如下的这种斑马线进度条也算是非常常见的需求场景了，我以一个刚刚经历了从不会到会的人客观评价一下这个需求：“会者不难，难者不会”。学习后最终我用了五分钟，手撕了如下的进度条。
    前端 CSS
    详解css需求—动态斑马线进度条效果
  • 创建一个可以循环滚动的文本，可能没这么简单。
    创建如上图效果的滚动文本，你能想到几种方式？也许真没你想的这么简单。 通过js控制？通过css实现？setInterval？text-shadow？
    前端 CSS
    创建一个可以循环滚动的文本，可能没这么简单。
  • 纯css实现10种加载中动画
    这一段是纯css实现的10种动画效果。每个.spinner类定义了不同的样式属性，从.spinner-1到.spinner-10，每个都有不同的外观和动画效果。 这些动画可以用于网页中的加载中或其他需
    前端 CSS
    纯css实现10种加载中动画
  • CSS 高度还原鸿蒙OS开机动画 HarmonyOS
    前言 最近在掘金上看到一位大佬用CSS写了鸿蒙OS的开机动画（原文在这里），不过只是字母O的出场特效，看完觉得挺有意思，就想着能不能把整个动画效果给实现出来，说干就干，也不管能不能实现，拿起键盘就是一
    前端 CSS
    CSS 高度还原鸿蒙OS开机动画 HarmonyOS
  • 手把手教你实现文字悬停分割效果
    相信大伙都知道悬停效果吧，鼠标悬停的应用场景非常多，它是一个比较常见的功能。因此基于鼠标悬停来扩展的效果也是非常多的，今天就带大家来实现一个在文字上进行悬停分割的效果。
    CSS
    手把手教你实现文字悬停分割效果
  • 创意按钮交互：方向感知磁性悬停效果🧲
    使用HTML、CSS和 JS创建方向感知磁性悬停按钮，使扩展的圆圈在用户的光标移动到按钮区域内时跟随光标，从而创建出磁性效果，CSS提供视觉方面，而JS添加了动态，有趣的交互为界面添加了活泼的触感
    CSS HTML JavaScript
    创意按钮交互：方向感知磁性悬停效果🧲
  • “我要个六边形毛玻璃效果”
    毛玻璃质感（Glassmorphism）：本质上是模糊，上方是带有透明度的遮罩模糊，下方元素像有一层蒙层。通透轻盈，呼吸感强，具有虚实结合的美感。
    前端 CSS SVG
    “我要个六边形毛玻璃效果”
  • 整个活儿~永远加载不满的进度条
    各位开发大佬，平时肯定见到过这种进度条吧，一直在加载，但等了好久都是在99% ，有没有好奇这个玩意儿咋做的呢？
    Vue.js JavaScript
  • 不可思议的纯 CSS 滚动进度条效果
    就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…
    CSS 前端
    不可思议的纯 CSS 滚动进度条效果