Home

JS special effects

CSS3 special effects

CSS3 select slider button code

Download Now Preview

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery CSS3选择滑块按钮代码 </title>

<style>
.tab-menu{
margin-top: 20px;
height: 26px;
overflow: hidden;
position: relative;
border-radius: 20px;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
li{
height: 24px;
line-height: 24px;
float: left;
text-align: center;
position: relative;
font-size: 12px;
}
.tab-menu span{
margin: 4px;
display: inline-block;
height: 18px;
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
transition: left .4s;
-webkit-transition: left .4s;
-moz-transition: left .4s;
}
li:hover{
cursor: pointer;
}
.tworow{
width: 160px;
background-color: rgba(224, 229, 232, 1);
}
.tworow span{
width: 72px;
background-color: rgba(0, 54, 80, 1);
}
.tworow .active{
color: white;
}
.tworow li{
width: 80px;
color:rgba(0, 54, 80, 1);
}
.eightrow li{
width: 50px;
color: white;
}
.eightrow .active{
color: #10aefc;
}
.eightrow{
width: 700px;
background: #10aefc;
}
.eightrow span{
width: 42px;
background: white;
}
</style>

</head>
<body>
<center>
<div class="tab-menu eightrow">
<span id="bg"></span>
<ul id="list">
<li class="active" type="1">24h</li>
<li type="2">48h</li>
<li type="3">72h</li>
<li type="4">96h</li>
<li type="5">120h</li>
<li type="6">144h</li>
<li type="7">168h</li>
<li type="8">192h</li>
<li type="9">216h</li>
<li type="10">240h</li>
<li type="11">264h</li>
<li type="12">288h</li>
<li type="13">312h</li>
<li type="14">336h</li>
</ul>
</div>

<div class="tab-menu tworow">
<span id="thirdbg"></span>
<ul id="hourlist">
<li class="active" type="1">24h</li>
<li type="2">48h</li>
</ul>
</div>
</center>
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<script>
new Slideicon($("#list"),{
index:0,
cover:$("#bg"),
callback:function (data) {
console.log(data)
}
});
new Slideicon($("#hourlist"),{
index:0,
cover:$("#thirdbg"),
callback:function (data) {
console.log(data)
}
});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

This is a CSS3 select slider button code. Friends who need it can download it directly. More special effect codes can be found on the PHP Chinese website.

Disclaimer

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

A beautiful round button code made using CSS3

27 Mar 2017

This is a round button made using CSS3. The effect looks very simple, but in fact the production is also very simple, mainly using the radial gradient and the ICON effect achieved by @font-face. Of course, it also does not include embellishment effects with other attributes, such as those made by box-shadow. Shadows, animation effects produced by transition, etc.

3D button exquisite effect code implemented using CSS3

27 Mar 2017

Use css3 code to create 3D button effects. This is a series of 3D button effects. The production method is old-fashioned (it never changes), but the color tone is very good, because many effects are easy to create in PS. It is easier especially for designers, but for a coder, it is still a bit difficult. For details, please look at the code produced and let the code show everything. I think you will be as impressed by the effect as I am.

Implementation code of 3D three-dimensional CSS3 elastic button

19 Mar 2017

This is another great pure CSS3 button animation. The characteristic of this CSS3 button is that it has a 3D three-dimensional visual effect, and the button is elastic and feels great when you click it. Especially against the background, the buttons appear more crystal clear and the three-dimensional effect becomes stronger. Another feature of this button is that it uses CSS3 to achieve animation effects, and the principle is simple. It just uses CSS3 to re-render the checkbox. Online demo source code download HTML code: <div class='container'> <div class='tog..

How to skillfully use CSS3 special effects to improve the user experience of web pages

09 Sep 2023

How to skillfully use CSS3 special effects to improve the user experience of web pages. With the development of the Internet, web design and user experience have become important links in website development. The application of CSS3 special effects can add dynamics and visual effects to web pages and improve user experience. This article will introduce several common CSS3 special effects and their code examples to help developers become more proficient in using CSS3 special effects and improve the user experience of web pages. Transition effect (Transition) Transition effect is one of the most basic special effects in CSS3. By changing a certain attribute

Implementation of css3 visual effects

22 Mar 2018

This time I will bring you the implementation of CSS3 visual special effects. What are the precautions for realizing CSS3 visual special effects? The following is a practical case, let’s take a look.

Sharing of 7 eye-catching jQuery/CSS3 special effects examples_jquery

16 May 2016

jQuery and CSS3 are definitely used a lot for web front-end development. Next, I will share some special effects made by jQuery and CSS3. I hope it will be helpful to friends who like to learn special effects.

How to use css3 to achieve 3D stereoscopic effects

14 Mar 2018

This time I will show you how to use css3 to achieve 3D stereoscopic special effects. What are the precautions for using css3 to achieve 3D stereoscopic special effects? The following is a practical case, let’s take a look.

CSS3 3D special effects video data sharing

31 Aug 2017

"CSS3 3D Special Effects Video Tutorial" uses the transition attribute, perspective attribute, and transform attribute in CSS3 to create real and usable three-dimensional effects.

css3 effect rotation

27 May 2023

Rotation of CSS3 special effects In web design, dynamic special effects can increase the interactivity and artistry of web pages, making users browse web pages more happily. Among them, the rotation effect is a relatively common special effect. In CSS3, rotation effects can be achieved through the transform attribute. 1. Use transform to achieve rotation. The transform attribute in CSS3 is used to achieve deformation effects of elements, such as rotation, movement, scaling, etc. When realizing the element rotation effect, you can use the rotate rotation function. The specific syntax is as follows: tra

See all articles