你不需要JavaScript(CSS代替)

最新推荐文章于 2021-06-25 14:08:23 发布
最新推荐文章于 2021-06-25 14:08:23 发布
阅读量449 收藏 3
点赞数
分类专栏： HTML5+CSS|CSS3
原文链接：https://blog.youkuaiyun.com/WuLex
版权

CSS很强大，你可以在没有JS的情况下做很多事情

请注意，这些演示应视为CSS“概念证明”。 从可访问性的角度（键盘导航，语音合成等）或渐进式增强/降级/等方面来看，它们可能存在严重问题。

Quick links

  1. Accordion / Toggle
  2. Carousel
  3. Counter of checked check-boxes
  4. Flip on click
  5. Floating label on Textfield
  6. Font-Face (Latin)
  7. Info on hover/ Popover
  8. Image Gallery
  9. Menu
  10. Mobile menu off canvas
  11. Burger menu
  12. Fancy menu
  13. Modal/Popup
  14. Mouse tracking
  15. Parallax scrolling
  16. Tabs
  17. Todo List
  18. Tooltips
  19. Treeview
  20. Twitter Heart Animation
  21. Dynamic Image Colorizing
  22. Ripple Effect
  23. Responsive Counter Showing # of Items That Didn’t Fit Screen

Accordion / Toggle




Carousel


](https://codepen.io/FabianK/pen/zJLLrR)

Counter of checked check-boxes


Flip on click

Floating label on Textfield

Font-Face (Latin)


[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接

Info on hover/ Popover

Image Gallery

Loaders

Menu

Mobile menu off canvas

Burger Menu

Fancy Menu

Modal/Popup

Mouse tracking

Parallax scrolling

Tabs

Todo List

Tooltips

Treeview

Twitter Heart Animation

Dynamic Image Colorizing

Ripple Effect

Responsive Counter Showing # of Items That Didn’t Fit Screen

一些能用css代替javaScript实现效果的代码-笔记
mao2411的博客
07-18 181
平滑滚动 随着scroll-behavior属性的新增，我们可以使用一行CSS代码来处理网站上的平滑滚动！浏览器支持约为75％，兼容性还是挺不错的。 html { scroll-behavior: smooth; } 滚动捕抓 <main class=”parent”> <section class=”child”></section> <section class=”child”></section> <sectio
CSS超出文本指定宽度用省略号代替和文本不换行
09-24
本文将深入探讨如何使用CSS实现超出文本指定宽度用省略号代替以及禁止文本换行。 1. **一般文字截断** 当我们希望文本在特定宽度后被截断并用省略号表示时，可以使用以下CSS样式： ```css .text-overflow { ...
你可能不需要一个 JavaScript 框架（一）
weixin_34242509的博客
11-09 129
你可能不需要一个 JavaScript 框架 You (probably) don't need a JavaScript framework 我并不打算写一篇类似于《为何 JavaScript 社区如此不堪》的文章那是因为我觉得真没必要。只是我认为事情本来就很简单，而且以“就地取材”的方式去做事情也确实十分有趣。下面我就为您一一娓娓道来...
能使用CSS3取代JS的一些小技巧
qq236710052的博客
07-08 519
使用CSS3取代JS的一些场景
你可能不需要一个 JavaScript 框架（三）
zhangxin09的专栏
01-28 775
HTTP/2HTTP 协议已重写。这已不是文本的协议，而是二进制的。二进制协议更加高效，并且不易出错。HTTP/2连接也是多路复用的，简单地说 - 允许你在一个连接中同时传输多个响应。The HTTP-protocol has been completely rewritten. The protocol is no longer textual, but binary. Binary proto
js可以代替html和css么,CSS代替JS就可以搞定的几则小特效
weixin_35900383的博客
06-25 610
直接入题1. 每个单词的首字母大写其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能，想都没想 CSS 可以完成这个功能。马上就屁颠屁颠的写了一个方法：functioncapitalizeFirst(str){letresult='';result=str.toLowerCase().replace(/(|^)[a-z]/g,(L)=>L.toUpperC...
用javascript实现代替marquee的滚动字幕效果代码
10-30
### 使用JavaScript实现替代Marquee的滚动字幕效果 随着Web技术的发展与用户对网页体验要求的提高，传统的`<marquee>`标签因其诸多不足而逐渐被淘汰。为了更好地满足用户需求和提升网页质量，使用JavaScript来实现...
前端面试题vue，css.,javascript
02-02
- **资源压缩:** 使用 `mini-css-extract-plugin` 和 `compression-webpack-plugin` 插件压缩 CSS 和 JavaScript 文件。 - **按需加载:** 使用 webpack 的 `import()` 函数实现代码分割和按需加载。 - **减少 DOM...
基于约定代替配置理念的nojs.js HTML前端无JavaScript设计源码
最新发布
09-26
nojs.js项目通过简化技术栈，利用CSS强大的样式描述能力，尝试构建一个几乎不需要JavaScript参与的前端体验，这对于提高网页的加载速度和性能，以及优化用户体验都有着积极的意义。同时，该项目也为前端开发者提供了...
js可以代替html和css么,要求JS和CSS给index.html代替
weixin_42418755的博客
06-25 403
我使用Express和create-react-app。要求JS和CSS给index.html代替我的React应用程序是一种方式，现在我试图从Express服务器提供服务。// server/app.jsconst express = require('express');const path = require('path');const app = express();// Serve st...
前端性能优化--能用css的地方尽量不要用js
cangowu的博客
03-08 2080
在写这篇文字的时候，本来没有打算归类到前端性能优化的范畴，只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果，比较常见的有导航栏，提示信息等，很多时候我们会利用js实现，比如鼠标移动到父级li上，我们希望子级显示菜单，我们可能在js给每个父级的li绑定一个hover事件。 0、导航栏 下面我用css的方式实现，这里我们利用了hover的伪类，（我们可能大部分都是用到a标签上的
如何在不用JavaScript的情况下使用CSS来实现图表功能
sandstom_1985的专栏
07-21 735
最近看到smashing magazine举行的一个小设计创意比赛，其中有个获奖作品完全用css来显示图表功能，觉得很amazing。 于是，在本地大致剖析了下他的实现原理，果然令人耳目一新啊。 注意：下面的代码只在最新的chrome上测试通过。-_-! 先上个最后的效果图 实现的HTML为
你可能不需要一个 JavaScript 框架（二）
weixin_34007291的博客
11-22 165
解决方案 Solution 你需要的，还是 JavaScript 和 Web API。我希望阁下可以看看 Web API (detailed)，快速浏览一下然后回到本文。 What you need is vanilla JavaScript and the Web API. I want you to take a look at the We...
使用CSS替代JS实现几种常见的特效
常敲代码手不抖
09-25 5447
本文来源于博客：不要点我 为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。 1. 导航高亮 导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。 在正常态时，每
Maven——spring mvc加载js css静态资源文件
baoyu_G的博客
05-27 1849
之前试过&lt;mvc:resources&gt;和&lt;mvc:default-servlet-handler&gt;,都不管用。经过尝试采用了下面的方法，加载成功。首先是目录结构：common-js.jsp是我为了避免重复引用静态资源而写的通用的jsp页面。在common-js.jsp中引入静态资源，其他的jsp页面只需要适用&lt;jsp:include&gt;引入common-js.js...
WebMvcConfigurerAdapter过时及静态资源无效
KevinDai007的博客
11-14 2027
在Springboot 2.0(Spring5)后用自己的的配置类继承WebMvcConfigurerAdapter时，idea提示这个类已经过时了. 网上很多说法会说使用WebMvcConfigurationSupport来代替, 然而如果使用WebMvcConfigurationSupport会导致Springboot的webmvc配置失效,即访问不到静态资源。这是因为WebMvc的自动配置都...
table中cellspacing、cellpadding的css写法
漫漫程序人生路
08-03 665
border-collapse : separate | collapse separate  :　 默认值。边框独立（标准HTML） collapse  :　 相邻边被合并border-spacing : length 设置或检索当表格边框独立（例如当border-collapse属性等于separate时），行和单元格的边框在横向和纵向上的间 距。当只指定一个length值时，这个值将作用于横...
也许后端MVC的说法已经过时了
weixin_34195546的博客
12-28 458
呃，标题有点耸人听闻，不过我并不是标题党。考虑到谈论大而虚的东西（比如最好的语言）容易引起争论，所以还请诸君带着看戏而不是庭辩的心态来看待本文。 依我个人所见，后端框架，类似于MVC这样的组织方式已经显得过气了。 过去，在创建应用时通常会按MVC各建一个文件夹，每个文件夹就是一个模块。MVC三者的职责是这样的： Controller绑定...
MVC4 引入CSS
会飞De琥珀
08-11 2756
在Content下面创建2个CSS文件: My.css My2.css BundleConfig.cs 在BundleConfig.cs文件中RegisterBundles静态方法中,添加修改如下代码: bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css", "~/Conte
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值