CSS前端示例：看似需要 JavaScript 实现的效果，其实仅用到了 CSS 的示例集合

English | [简体中文](./README-zh_CN.md) # You Don't Need JavaScript [](https://dev.to/t/javascript) Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation. ### Style Guide: ```markdown ## <a id="DemoSubject"></a>Carousel [<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page) [<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page) [<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page) **[⬆ back to top](#quick-links)** ``` --- &nbsp; ## Quick links - [You Don't Need JavaScript](#you-dont-need-javascript) - [Style Guide:](#style-guide) - [Quick links](#quick-links) - [Accordion / Toggle](#accordion--toggle) - [Analog-clock](#analogclock) - [Animated Button](#animated-btn) - [Animated Buttons](#animated-buttons) - [Bonfire](#bonfire) - [Bubble](#bubble) - [Burger Menu](#burger-menu) - [Button Animation](#button_letsgo) - [Captain America Shield](#captain) - [Carousel](#carousel) - [Compass Loader](#compassloader) - [City animation footer](#city-animation-footer) - [Counter of checked check-boxes](#counter-of-checked-check-boxes) - [Dog Box Animation](#dog-box-animation) - [Dropdown Menu](#dropdown-menu) - [Dynamic Image Colorizing](#dynamic-image-colorizing) - [Enable dark mode](#Enable-dark-mode) - [Fancy Menu](#fancy-menu) - [Flip on click](#flip-on-click) - [Floating label on Textfield](#floating-label-on-textfield) - [Floating Labels V2](#Floating-labelV2) - [Font-Face (Latin)](#font-face-latin) - [Footer](#footer) - [Gradient Animation](#gradient-animation) - [growing-flower](#growing-flower) - [growing-flower](#growing-flower) - [Image Gallery](#image-gallery) - [infinite-carousel](#infinite-carousel) - [Info on hover/ Popover](#info-on-hover-popover) - [Jumping Ball](#jumping-ball) - [Light Bulb Animation](#light-bulb-animation) - [Loaders](#loaders) - [Mobile menu off canvas](#mobile-menu-off-canvas) - [Modal/Popup](#modalpopup) - [Mouse tracking](#mouse-tracking) - [NavBar](#navbar) - [Neon Button](#neon-button) - [Neon Card](#neon-card) - [Neumorphism Card Design](#neumorphism-card-design) - [Parallax scrolling](#parallax-scrolling) - [Pendulum](#Pendulum) - [Playing Card Animation](#playing-card-animation) - [Responsive Counter Showing # of Items That Didn't Fit Screen](#responsive-counter-showing--of-items-that-didnt-fit-screen) - [Ripple Effect](#ripple-effect) - [Scary animation](#scary-animation) - [Scenary](#scenary) - [Shake Button](#shake-button) - [Shake Button](#shake-button-1) - [Shuffling squares](#shuffling-squares) - [Star Wars Intro](#star-wars-intro) - [Switch](#switch) - [Tabs](#tabs) - [Thankyou-Animation](#thankyou-animation) - [Todo List](#todo-list) - [Tooltips](#tooltips) - [Treeview](#treeview) - [Twitter Heart Animation](#twitter-heart-animation) - [Book Animation](#book-animation) - [Zoom when hover](#zoom-when-hover) - [Contributors](#contributors) - [Contributing](#contributing) - [CSS Toggle](#toggle) - [Sliced Button](#slicedbutton) - [DVD Screen Saver](#dvd-screen-saver) - [RotateSquare](#RotateSquare) ## <a id="toggle"></a>CSS Toggle [<img src="images/toggle1.png" height="230" title="CSS Toggle" alt="Toggle">](https://codepen.io/Vikash-Gorai/pen/QWYbpVm) [<img src="images/toggle2.png" height="230" title="CSS Toggle" alt="Toggle">](https://codepen.io/Vikash-Gorai/pen/QWYbpVm) **[⬆ back to top](#quick-links)** ## <a id="Accordion"></a>Accordion / Toggle [<img src="images/accordion.png" height="230" title="Demo 1">](http://www.mraffaele.com/labs/css-only-accordions/) [<img src="images/toggler.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/pyXQrj) [<img src="images/toggler2.png" height="230" title="Demo 3">](http://codepen.io/PaulZi/pen/zBbVvV) [<img src="images/accordion.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Animated-Buttons"></a>Animated Buttons <img src="images/Animated-button-1.png" height="230" title="Demo 1"> <img src="images/Animated-button.png" height="230" title="Demo 2"> <img src="images/Animated-button-2.png" height="230" title="Demo 2"> <img src="images/liquidButton.png" height="230" title="Demo 2"> **[⬆ back to top](#quick-links)** --- --- &nbsp; ## <a id="captain"></a>Captain America Shield <img src="Captain America Shield/images/shield.png" height="230" title="Demo 1"> **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Carousel"></a>Carousel [<img src="images/slideshow2.png" height="230" title="Demo 1">](http://codepen.io/SitePoint/pen/MyPVdK) [<img src="images/slideshow.png" height="230" title="Demo 2">](https://codepen.io/cavico/pen/yOjwya) [<img src="images/slideshow3.png" height="230" title="Demo 3">](https://codepen.io/FabianK/pen/zJLLrR) [<img src="./images/Infinite-carousel-purnasth.gif" alt="Carousel-Nepal" height="230" title="Carousel-Nepal">](https://codepen.io/purnaaa/pen/NWoWeBB) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Counter"></a>Counter of checked check-boxes [<img src="images/checkedcounter.png" height="230" title="Demo 1">](https://codepen.io/anon/pen/eZWXOZ) [<img src="images/checkedcounter2.png" height="230" title="Demo 2">](http://codepen.io/lonekorean/pen/wKbzv) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Flip"></a>Flip on click [<img src="images/flipper.png" height="230" title="Demo">](https://codepen.io/RuudBurger/pen/bwjry) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Flip"></a>Flip on click [<img src="images/cssTable.png" height="230" title="Css Table Demo">](https://codepen.io/TAPAS-SINGHAL/pen/abXZNWR) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Flip"></a>Flip on click [<img src="images/pendulum.png" height="230" title="Pendulum Animation Demo">](https://codepen.io/TAPAS-SINGHAL/pen/ZEwOGjj) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Animated Box"></a>Animated Box [<img src="images/AnimatedBox.jpg" height="230" title="Demo">](https://codepen.io/Ayan-Saxena/pen/qBgBYoZ) [<img src="images/AnimatedBox2.jpg" height="230" title="Demo">](https://codepen.io/Ayan-Saxena/pen/qBgBYoZ) **[⬆ back to top](#quick-links)** ## <a id="analogclock"></a>Analog-clock [<img src="images/clock.jpg" height="230" title="Analog-clock">](https://codepen.io/himadeepthi-sayani/pen/RwvNqQm) **[⬆ back to top](#quick-links)** --- &nbsp; [<img src="images/textfields.png" height="230" title="Demo">](http://codepen.io/KtorZ/pen/ZOzdqG) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Font"></a>Font-Face (Latin) [<img src="images/sansfont.png" height="230" title="Demo">](https://yusugomori.com/projects/css-sans/fonts) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Info"></a>Info on hover/ Popover [<img src="images/tooltips.png" height="230" title="Demo 1">](https://codepen.io/monika-sivakumar/pen/rNoqxVX) [<img src="images/tooltips2.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/XXOpga) [<img src="images/info-on-hover.png" height="230" title="Demo 3">](http://codepen.io/SitePoint/pen/akAmPw) [<img src="images/tooltips.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ) **[⬆ back to top](#quick-links)** --- &nbsp; ## <a id="Image"></a>Image Gallery [<img src="images/gallery.png" height="230" title="Demo 1">](https://codepen.io/shaishgandhi/pen/yJzamw) [<img src="images/gallery2.png" height="230" title="Demo 2">](http://codepen.io/pavlovsk/pen/sjubp) [<img src="images/gallery3.png" height="230" title="Demo 2">](https://codepen.io/olgamozejko/pen/yLjwyye) [<img src="images/vertical-gallery.gif" height="230" title="Demo 4">]() [<img src="./Author/a-img2.jpg" height="230" title="Demo 5">]() *