Maison

Effets spéciaux JS

Effets spéciaux CSS3

Code du bouton de sélection du curseur CSS3

Télécharger maintenant Aperçu

<!DOCTYPE html>
<html lang="fr">
<tête>
<meta charset="UTF-8">
<title>jQuery+CSS3 选择滑块按钮代码 </title>

<style>
.tab-menu{
marge supérieure : 20 px ;
hauteur : 26px ;
débordement : caché ;
position : relative ;
rayon de bordure : 20 px ;
}
ul{
remplissage : 0 ;
marge : 0;
style de liste : aucun ;
}
li{
hauteur : 24px ;
hauteur de ligne : 24 px ;
flotteur : gauche ;
text-align: center;
position : relative ;
taille de la police : 12 px ;
}
.onglet-menu span{
marge : 4px ;
affichage : bloc en ligne ;
hauteur : 18px ;
position : absolue ;
gauche : 0;
haut : 0 ;
rayon de bordure : 20 px ;
transition : gauche .4s ;
-webkit-transition : gauche .4s ;
-moz-transition : gauche .4s ;
}
li: survoler {
curseur : pointeur ;
}
.tworow{
largeur : 160px ;
couleur d'arrière-plan : rgba(224, 229, 232, 1);
}
.deux rangées{
largeur : 72px ;
couleur d'arrière-plan : rgba(0, 54, 80, 1);
}
.tworow .active{
couleur : blanc ;
}
.tworow li{
largeur : 80px ;
couleur:rgba(0, 54, 80, 1);
}
.huit rangées li{
largeur : 50px ;
couleur : blanc ;
}
.huit rangées .active{
couleur : #10aefc ;
}
.huit rangées{
largeur : 700px ;
arrière-plan : #10aefc ;
}
.huit rangées{
largeur : 42px ;
fond : blanc ;
}
</style>

</tête>
<corps>
<centre>
<div class="onglet-menu huit lignes">
<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="onglet-menu deux lignes">
<span id="thirdbg"></span>
<ul id="hourlist">
</ul>
</div>
</centre>
<script src="script/jquery.min.js"></script>
<script src="script/slide.js"></script>
<script>
nouvelle Slideicon($("#list"),{
indice : 0,
couverture :$("#bg"),
rappel : fonction (données) {
console.log(données)
}
});
nouvelle Slideicon($("#hourlist"),{
indice : 0,
couverture :$("#thirdbg"),
rappel:fonction (données) {
console.log(données)
}
});
</script>

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

Il s'agit d'un code de bouton de sélection CSS3. Les amis qui en ont besoin peuvent le télécharger directement. D'autres codes d'effets spéciaux peuvent être trouvés sur le site Web chinois de PHP.

Clause de non-responsabilité

Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn

Article connexe

Code d'implémentation du bouton élastique CSS3 tridimensionnel 3D

19 Mar 2017

Il s'agit d'une autre excellente animation de bouton CSS3 pure. La caractéristique de ce bouton CSS3 est qu'il a un effet visuel tridimensionnel 3D, et le bouton est élastique et se sent bien lorsque vous cliquez dessus. Surtout sur l'arrière-plan, les boutons apparaissent plus clairs et l'effet tridimensionnel devient plus fort. Une autre caractéristique de ce bouton est qu'il utilise CSS3 pour obtenir des effets d'animation, et le principe est simple. Il utilise simplement CSS3 pour restituer la case à cocher. Code source de la démo en ligne à télécharger Code HTML : <div class='container'> <div class='tog..

Code d'effet exquis du bouton 3D implémenté à l'aide de CSS3

27 Mar 2017

Utilisez le code CSS3 pour créer des effets de boutons 3D. Il s'agit d'une série d'effets de boutons 3D. La méthode de production est démodée (elle ne change jamais), mais la tonalité des couleurs est très bonne, car de nombreux effets sont faciles à créer dans PS It. C'est plus facile surtout pour les concepteurs, mais pour un codeur, c'est encore un peu difficile. Pour plus de détails, veuillez regarder le code produit et laisser le code tout montrer. Je pense que vous serez aussi impressionné que moi par l’effet.

Apprenez à utiliser CSS3 pour ajouter des effets de dégradé aux images (explication détaillée du code)

17 Aug 2021

Dans l'article précédent « Vous apprendre étape par étape comment utiliser CSS3 pour obtenir des effets d'animation (partage de code) », je vais vous présenter comment utiliser les effets d'animation CSS3 pour configurer l'expérience. L'article suivant vous expliquera comment utiliser CSS3 pour ajouter des effets de dégradé aux images.

Partage de code pour obtenir de bons effets de validation de formulaire en utilisant du CSS3 pur (image)

18 Apr 2017

Pure CSS3 obtient de bons effets de validation de formulaire

Partage du code source des effets de différence visuelle basés sur JQuery et CSS3 pour imiter l'affiche Apple TV background_jquery

16 May 2016

Il s'agit d'un jQuery et CSS3 très cool imitant l'effet de différence visuelle d'arrière-plan d'affiche Apple TV. Cet effet de différence visuelle utilise la souris pour se déplacer vers le haut, le bas, la gauche et la droite sur l'écran, et divers éléments de l'affiche se déplacent à différentes vitesses, formant un effet de différence visuelle, et comporte également des effets spéciaux de streamer.

Utilisez HTML5 CSS3 pour obtenir un effet de commutation de curseur Dites adieu aux compétences du didacticiel Javascript CSS_html5

16 May 2016

En ce qui concerne les curseurs, CSS et JS ont été utilisés dans le passé pour obtenir des effets de commutation associés. J'ai entendu dire que tout le monde discutait de la mise en œuvre de l'utilisation de HTML5 CSS3, mais je ne l'ai jamais implémenté moi-même. Eh bien, cette fois, j'ai le temps de jouer avec CSS3. Les amis intéressés peuvent en savoir plus.

Comment obtenir un effet de vague avec du CSS3 pur ? (exemple de code)

28 Jun 2022

Comment obtenir un effet de vague avec du CSS3 pur ? Cet article vous présentera comment utiliser l'animation SVG et CSS pour créer des effets de vagues. J'espère que cela vous sera utile !

Apprenez étape par étape à utiliser CSS3 pour créer un effet de barre de navigation sympa (explication détaillée du code)

31 Aug 2021

Dans l'article précédent « Vous apprendre à utiliser CSS3 pour ajouter des effets tridimensionnels aux polices (avec code) », j'ai présenté comment utiliser CSS3 pour ajouter des effets tridimensionnels aux polices. L'article suivant vous expliquera comment utiliser CSS3 pour créer un effet de barre de navigation sympa. Voyons comment le faire ensemble.

Comment obtenir un effet d'ombre de texte CSS3 ? [Explication détaillée du code]

05 Sep 2018

Cet article continue de présenter comment créer des effets d'ombre de texte dans CSS3, c'est-à-dire comment créer des polices 3D. Le principal attribut qui doit être maîtrisé ici est l'attribut de style text-shadow.

See all articles