首页>国内 > 正文

全球百事通!四个可以用CSS 实现复杂JavaScript 效果的技巧

2022-09-20 15:48:06来源:web前端开发

最近,我学到了一些比较实用的CSS编程技巧,之前很多效果不得不求助于 JavaScript 来实现,但是今天,我学会了直接用CSS 来完成。相信看完这篇你也会爱上CSS,一起来看看吧!

1.轮播动画

没想到用CSS就能做到平滑过渡的效果,大家可以试试滑动图片,会有惊喜给你!


(资料图)

HTML

CSS

*{  margin: 0;  padding: 0;}.box{  // Key CSS  scroll-snap-type: x mandatory;  -webkit-overflow-scrolling: touch;  display: flex;  overflow-x: scroll;}.box img{  height: 100vh;  min-width: 100vw;  // Key CSS  scroll-snap-align: start;}
2.颜色选择器

你必须使用过类似此组件的组件才能获得颜色,我们通常需要编写复杂的 JavaScript 来实现它的功能,但现在我们可以通过 input 元素来实现。

我们只需要将 type 设置为“color”即可获得浏览器原生支持的颜色选择器。

你可以尝试单击图片并为猫赋予新的颜色。

演示地址:https://codepen.io/qianlong/pen/vYRmypd

3.打字效果

你能想象只用 CSS 实现打字机效果吗?这真是太神奇了。

演示地址:https://codepen.io/qianlong/pen/ZExKBPW

HTML

Welcome to medium

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;}
4.平滑滚动到顶部

当网页过长时,我们通常会提供一个按钮,让用户可以流畅地滚动到顶部。我们曾经使用 JavaScript 来做到这一点。

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

演示地址:https://codepen.io/qianlong/pen/NWYpqZq

我们真的需要那么多麻烦吗?是的,现在,我们只需要一行 CSS 就可以做到。

html, body {  scroll-behavior: smooth;}

演示地址:https://codepen.io/qianlong/pen/QWmvKZx

最后

如果你觉得我今天分享这些CSS技巧对你有帮助的话,请记得点赞我,关注我,并将它分享给你的朋友,也许能够帮助到他。

最后,感谢你的阅读,祝编程愉快。

关键词: 颜色选择器 到了一些 才能获得 平滑过渡的 它的功能

相关新闻

Copyright 2015-2020   三好网  版权所有