涨姿势了,这 4 个场景可用 CSS 完全取代 JS ~

举报
掘金安东尼 发表于 2022/11/12 10:43:07 2022/11/12
【摘要】 本篇通译自:# It’s 2022. Sometimes You Don’t Need Javascript at All 1. 颜色选择器我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。好消息来了,现在直接通过设置 input 标签属性,就自带这个颜色选择功能了~<input type="color" value="#FF99FF" />https://c...

本篇通译自:# It’s 2022. Sometimes You Don’t Need Javascript at All

1. 颜色选择器

我们通常需要通过复杂的 JavaScript 来实现一个类似下图的颜色选择器组件。

0_gVdaIXbeZ3Osa8O-.gif

好消息来了,现在直接通过设置 input 标签属性,就自带这个颜色选择功能了~

<input type="color" value="#FF99FF" />

https://code.juejin.cn/pen/7164305508357275652

GIF 2022-11-10 16-46-41.gif

涨姿势了,赶紧收藏一波、加强记忆,后面总会用到~

2. 打字效果

纯 CSS 就能实现以下“打字效果”

https://code.juejin.cn/pen/7164307268287070249

HTML

<h1>Welcome to JUEJIN</h1>

css

@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid black;
    width: 16.5em; 
    width: 21ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 7s steps(21, end),
    blink-caret .5s step-end infinite alternate;
}

3. 滑顶/触底效果

我们通常是这样实现点击按钮,滚动条立即触顶/触底效果的:

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

现在不必了,CSS 一行代码就可解决了~

https://code.juejin.cn/pen/7164310260218331174

4. 顺滑切图

原来 CSS scroll-snap-type: x mandatory; 可以让你顺滑切图。当你滑动横向滚动条到一定位置时,会自动为你切图,这样显得流畅;

https://code.juejin.cn/pen/7164311303769554948

是否更顺滑,实际效果可以在码上掘金上去掉 scroll-snap-type: x mandatory 这一行,前后对比一试便知。

小结

另,推荐最近 3 篇关于 CSS 文章:

# CSS 如何实现五彩斑斓的“呼吸字”?速度拿去装杯!😏

# CSS 如何实现“咖啡墙错觉”效果?神奇~

# CSS 边框也能动画?background-origin 和 -clip 来施加魔法~

全部附上了码上掘金,代码可在线测试。

有一说一,CSS 还真的挺神奇~~

之前听一位后端同学说,因为觉得 CSS 样式太麻烦,看似与编程无关,于是放弃了做前端,转而做后端。。。。

其实,可能看起来麻烦,用起来还是有点意思~~相当于多个手段,可作武器。


OK,以上便是本篇分享,希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

本文正在参加「金石计划 . 瓜分6万现金大奖」

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。