jQuery sliding option effects
jQuery sliding option effects
<style type="text/css">
.demo { padding: 2em 0; background: #fff; }
a:hover, a:focus { outline: none; text-decoration: none; }
.tab .nav-tabs { border-bottom: none; position: relative; }
.tab .nav-tabs li { margin-right: 60px; z-index: 1; }
.tab .nav-tabs li:after { content: ""; width: 100%; border: 1px solid #ccc6c6; position: absolute; top: 50%; right: -60%; z-index: -1; }
.tab .nav-tabs li:last-child:after { border: none; }
.tab .nav-tabs li a { display: block; padding: 15px 20px; background: #fff; font-size: 15px; font-weight: 600; color: #956cae; text-transform: uppercase; border-radius: 0; margin-right: 0; border: 2px solid #956cae; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease 0s; }
.tab .nav-tabs li.active a, .tab .nav-tabs li a:hover { color: #fff; border: 2px solid #956cae; }
.tab .nav-tabs li a:after { content: ""; display: block; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s ease 0s; }
.tab .nav-tabs li.active a:after, .tab .nav-tabs li a:hover:after { height: 100%; background: #956cae; }
.tab .tab-content { padding: 20px 10px; margin-top: 0; font-size: 14px; color: #999; line-height: 26px; }
.tab .tab-content h3 { font-size: 24px; margin-top: 0; }
@media only screen and (max-width: 767px) {
.tab .nav-tabs li { margin: 0 25px 0 0; }
}
@media only screen and (max-width: 479px) {
.tab .nav-tabs li { width: 100%; text-align: center; margin: 0 0 10px 0; }
.tab .nav-tabs li:after { width: 0; height: 100%; top: auto; bottom: -60%; right: 50%; }
}
</style>
這是一款基于jQuery Bootstrap實(shí)現(xiàn)的滑動(dòng)選項(xiàng)卡代碼，簡(jiǎn)潔扁平風(fēng)格個(gè)性選項(xiàng)卡切換特效，鼠標(biāo)懸停時(shí)還有動(dòng)畫效果。
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
10 Amazing Image Effects using jQuery
10 Mar 2025
Ten amazing jQuery image effects plugins to inject fashion into your website! With these jQuery image effects plugins, you can easily convert ordinary images on your website, enhance image effects, create galleries, scrollers, and make your website look new! Image segmentation effects combined with CSS and jQuery This tutorial will create an image segmentation effect. It's similar to a sliding door effect, where the image slides left or right, showing the text behind it, but the difference is that the effect looks like the image is split in half, one moves to the left and the other moves to the right. Source jQuery Image Distortion Script ImageWarp adds interesting twist effects to selected images on the page
How to Build a Simple jQuery Image Slider with Sliding and Opacity Effects?
24 Nov 2024
Building a Simple jQuery Image Slider with Sliding and Opacity EffectsCreating a custom image slider in jQuery without relying on external plugins...
How to Build a Simple jQuery Image Slider with Fade-in/Out or Sliding Effects?
26 Nov 2024
Guide to Creating a Simple jQuery Image Slider with Fade-in/Out or Sliding EffectsIntroductionInstead of relying on bulky plugins, some developers...
jQuery Matrix Effects
10 Mar 2025
Bring matrix movie effects to your page! This is a cool jQuery plugin based on the famous movie "The Matrix". The plugin simulates the classic green character effects in the movie, and just select a picture and the plugin will convert it into a matrix-style picture filled with numeric characters. Come and try it, it's very interesting! How it works The plugin loads the image onto the canvas and reads the pixel and color values: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data The plugin cleverly reads the rectangular area of ??the picture and uses jQuery to calculate the average color of each area. Then, use
How to Access Object Properties with Special Characters in JavaScript?
01 Jan 2025
Accessing Object Properties with Special CharactersAccessing object properties with special characters, such as periods or other...
Csgo special effects blockbuster movies HD viewing entrance to watch Csgo high-definition special effects blockbuster movies directly
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) is a first-person shooter that is loved by players around the world. Its exciting competitions and high-quality special effects videos have always been topics to talk about by players. Whether it is the thrilling professional leagues or the friendly match between ordinary players, it can show amazing special effects and strategies in the game. This article will introduce you in detail how to find and watch CSGO special effects blockbusters in detail to ensure that you can experience the best visual enjoyment.
10 jQuery Sliding Sidebar Panel Plugins
23 Feb 2025
This post showcases 10 jQuery sliding sidebar panel plugins, a valuable resource for developers seeking efficient slide panel solutions. Slide panels enhance user interaction by toggling content visibility via clicks or hovers. mb.jquery: Provid
What are Douyin's own AI tools?
29 Nov 2024
Douyin provides many of its own AI tools to help creators easily create, edit and promote content, including: intelligent editing, video special effects, subtitle generation, cover generation and other auxiliary content creation. Intelligent recommendations, content review and creation assistance tools improve content quality and dissemination efficiency. Voice changers and more add interest to the content.
10 jQuery Cool Menu Effect Plugins
01 Mar 2025
10 cool jQuery menu special effects plug-ins to improve website user experience! We have shared many jQuery navigation menu plugins, and now we bring you 10 more amazing jQuery menu effects plugins. Enjoy it! Related readings: - 10 dazzling jQuery navigation menus - 15 excellent jQuery navigation menus Right-click menu This plugin is very easy to use and compact, allowing you to create right-click menus. Source Code Demo 2. jQuery Multi-level Menu – FX CSS Menu with Submenu 100% CSS menu, visual effects provided by jQuery. Only use Javascript to implement special effects. Fully compatible with cross-browser, package
Hot Tools
jQuery+Html5 realizes beautiful confession animation code
jQuery+Html5 implements beautiful confession animation code, the animation effect is great, a must-have for programmers to confess!
Couple's romantic confession js special effects code
JS special effects code for couples' romantic confession. Such special effects can be used on wedding photography websites or placed on personal websites. It is also a good special effect. PHP Chinese website recommends downloading!
Simple js love confession artifact
Simple native js love confession artifact
Bunker's html5 particle animation expressive effects
Bunker's html5 particle animation expression special effects code, the animated special effects text can be changed in the code, you can make a page where you can customize text input, it should be very popular, this HTML5 special effect is very beautiful.
jQuery responsive background login interface template
jQuery responsive backend login interface template html source code. The login page uses jquery to verify the form and determine whether the username and password meet the requirements. Usually the login page is a page that must be used on corporate websites or mall websites. Responsive backend pages, When the browser zooms in or out, the background will resize the image according to the browser! PHP Chinese website recommends downloading!