Maison > Télécharger > Effets JS > effets spéciaux HTML5
Il s'agit d'un code de zone de recherche avec des effets animés implémentés par jQuery+CSS3. Téléchargez les effets de zone de recherche d'expansion et de contraction créative. code js <script type="text/javascript"> fonction searchToggle(obj, evt){ var conteneur = $(obj).closest('.search-wrapper'); if(!container.hasClass('active')){ conteneur.addClass('active'); evt.preventDefault(); } sinon if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){ conteneur.removeClass('active'); //effacer la saisie conteneur.find('.search-input').val(''); // efface et masque le conteneur de résultats lorsque nous appuyons sur fermer conteneur.find('.result-container').fadeOut(100, function(){$(this).empty();}); } } fonction submitFn(obj, evt){ value = $(obj).find('.search-input').val().trim(); _html = "Ouais ouais ! Votre texte de recherche ressemble à ceci : "; si(!value.length){ _html = "Ouais ouais ! Ajoutez un SMS à un ami :D"; } sinon{ _html += "<b>" + valeur + "</b>"; } $(obj).find('.result-container').html('<span>' + _html + '</span>'); $(obj).find('.result-container').fadeIn(100); evt.preventDefault(); } </script>
effets spéciaux HTML515952018-02-01
Il s'agit d'un modèle d'invite d'erreur 404 couramment utilisé pour les sites Web. Téléchargez le modèle d'animation d'erreur de page Web html5 svg spaceman 404. code js <script type="text/javascript" src="js/bodymovin.js"></script> <script type="text/javascript" src="js/data.js"></script> <div id="svgContainer"></div> <script type="text/javascript"> var svgContainer = document.getElementById('svgContainer'); var animItem = bodymovin.loadAnimation ({ emballage : svgContainer, Type d'animation : 'svg', boucle : vrai, animationData : JSON.parse(animationData) }); </script>
effets spéciaux HTML539022018-01-29
<link rel="stylesheet" type="text/css" href="css/base.min.css"> </tête> <body class="main_box" style="background-color: #eee"> <div class="box"> <div class="bg_in"> <div class="title">• 刮奖区 •</div> </div> <div class="content"> <div id="mask_img_bg"><span class="cont-span"></span> <!--<img/>--> </div> <img id="redux" src="images/layer.png"> </div> <!--次数--> <div class="hint-num"> <h4>今日你还有 <strong class="clicknum">0</strong> 次刮奖机会</h4> </div> </div> <div class="hint-show"> <img class="hint-img" src="images/hint.png"> <img class="colour-img" src="images/colour.png"> <!--<img class="prize-img">--> <span class="prize-span"></span> <a class="close"></a> <a class="btn"></a> </div> La crackée HTML5 de la crackée HTML5 a été conçue pour répondre aux besoins des utilisateurs.
effets spéciaux HTML528862018-01-29
html, corps { largeur : 100 % ; hauteur : 100% ; débordement : caché ; marge : 0; remplissage : 0 ; -webkit-user-select : aucun ; -moz-user-select : aucun ; -ms-user-select : aucun ; sélection par l'utilisateur : aucun ; } corps { couleur de fond : gris clair ; } #toile { Position : absolue ; haut : 0 ; en bas : 0 ; gauche : 0; à droite : 0 ; } HTML5 Canvas cliquer pour ajouter des effets spéciaux d'animation de jus d'orange est un code permettant d'ajouter des effets spéciaux d'animation de jus d'orange en un seul clic n'importe où sur la page.
effets spéciaux HTML513022018-01-29
<style type="text/css"> div { largeur : 500 px ; marge : 30px auto ; } </style> </tête> <body><script src="/demos/googlegg.js"></script> <div id="otext1"></div> <div id="otext2"></div> <div id="otext3"></div> <div id="otext4"></div> <script src="js/elasticText.js" type="text/javascript" charset="utf-8"></script> L'effet d'animation de texte à ressort est un code d'animation de texte similaire à l'effet d'animation à ressort lorsque la souris passe dessus.
effets spéciaux HTML520312018-01-29
.star-rating { famille de polices : 'FontAwesome' ; marge : 50px auto ; } .star-rating > frontière : aucune ; affichage : bloc en ligne ; } .star-rating > champset: non (: vérifié) > Position : absolue ; haut : -9999px ; clip : rect(0, 0, 0, 0); } .star-rating > float : c’est vrai ; largeur : 1em ; rembourrage : 0,05em ; débordement : caché ; espace blanc : nowrap; curseur : pointeur ; taille de la police : 200 % ; couleur : #16a085; } Il s'agit d'un code de notation par étoiles implémenté en CSS3 pur, un simple effet spécial de page Web d'effet de notation par étoiles au survol de la souris CSS3.
effets spéciaux HTML537392018-01-29
HTML { dimensionnement de la boîte : border-box ; } *, *::après, *::avant { box-sizing : hériter ; } *, *:avant, *:après { dimensionnement de la boîte : border-box ; contour : aucun ; } corps { largeur : 100 % ; hauteur : 100vh; famille de polices : 'Source Sans Pro', sans-serif ; taille de la police : 16 px ; police-smooth: auto; poids de la police : 300 ; hauteur de ligne : 1,5 ; couleur: #444; couleur de fond : noir ; image d'arrière-plan : url("img/zzsc.jpg"); position d'arrière-plan : centre centre ; répétition d'arrière-plan : pas de répétition ; taille d'arrière-plan : contenir ; } Il s'agit d'un effet d'animation réaliste d'ouverture et de fermeture de rideau CSS3, qui est un effet d'animation d'ouverture et de fermeture de rideau d'imitation intéressant.
effets spéciaux HTML523922018-01-29
.star-rating { famille de polices : 'FontAwesome' ; marge : 50px auto ; } .star-rating > frontière : aucune ; affichage : bloc en ligne ; } .star-rating > champset: non (: vérifié) > Position : absolue ; haut : -9999px ; clip : rect(0, 0, 0, 0); } .star-rating > float : c’est vrai ; largeur : 1em ; rembourrage : 0,05em ; débordement : caché ; espace blanc : nowrap; curseur : pointeur ; taille de la police : 200 % ; couleur : #16a08 Il s'agit d'un code de notation par étoiles implémenté en CSS3 pur, un simple effet spécial de page Web d'effet de notation par étoiles au survol de la souris CSS3.
effets spéciaux HTML514602018-01-27
HTML { dimensionnement de la boîte : border-box ; } *, *::après, *::avant { box-sizing : hériter ; } *, *:avant, *:après { dimensionnement de la boîte : border-box ; contour : aucun ; } corps { largeur : 100 % ; hauteur : 100vh; famille de polices : 'Source Sans Pro', sans-serif ; taille de la police : 16 px ; police-smooth: auto; poids de la police : 300 ; hauteur de ligne : 1,5 ; couleur: #444; couleur de fond : noir ; image d'arrière-plan : url("img/zzsc.jpg"); position d'arrière-plan : centre centre ; répétition d'arrière-plan : pas de répétition ; taille d'arrière-plan : contenir ; } corps :avant { Position : absolue ; contenu : ''; largeur : 100 % ; taille : 84,25 % ; box-shadow : encart 0 0 200px 200px noir ; indice z : 1 ; } Il s'agit d'un effet d'animation réaliste d'ouverture et de fermeture de rideau CSS3, qui est un effet d'animation d'ouverture et de fermeture de rideau d'imitation intéressant.
effets spéciaux HTML526402018-01-27
Le plug-in de sélection de date et d'heure mobile zepto est un code js permettant de sélectionner la date et l'heure de la semaine sur une page Web mobile. code js <script src="zepto.js"></script> <script src="zepto.mtimer.js"></script> <script> $(fonction(){ $('#picktime').mtimer(); }); </script>
effets spéciaux HTML521932018-01-26
html, corps { famille de polices : Georgia, serif ; style de police : italique ; taille de police : 4,2 vmin ; hauteur de ligne : 4,7 vmin ; couleur : rgba (255,255,255,0,6); marge : 0; remplissage : 0 ; hauteur : 100% ; arrière-plan : rgba(66,39,71,1); arrière-plan : -moz-linear-gradient (haut, rgba(66,39,71,1) 0 %, rgba(43,25,46,1) 73 %, rgba(19,11,20,1) 100 %) ; arrière-plan : -webkit-gradient (en haut à gauche, en bas à gauche, color-stop (0%, rgba (66,39,71,1)), color-stop (73%, rgba (43,25,46,1)) , arrêt de couleur(100%, rgba(19,11,20,1))); arrière-plan : -webkit-linear-gradient(haut, rgba(66,39,71,1) 0 %, rgba(43,25,46,1) 73 %, rgba(19,11,20,1) 100 %) ; arrière-plan : -o-linear-gradient (haut, rgba(66,39,71,1) 0 %, rgba(43,25,46,1) 73 %, rgba(19,11,20,1) 100 %) ; arrière-plan : -ms-linear-gradient(haut, rgba(66,39,71,1) 0 %, rgba(43,25,46,1) 73 %, rgba(19,11,20,1) 100 %) ; arrière-plan : dégradé linéaire (vers le bas, rgba(66,39,71,1) 0 %, rgba(43,25,46,1) 73 %, rgba(19,11,20,1) 100 % ); } un { couleur : rgba (255,255,255,0,6); } #lampadario { poste : fixe ; gauche : 50% ; haut : 0 ; } CSS3 est un système de gestion de contenu CSS3.
effets spéciaux HTML526272018-01-26
<html> <tête> <meta charset="utf-8"> <title>H5+Code d'horloge numérique en toile composé de coeurs</title> </tête> <body style="overflow:hidden;"> <script src="/demos/googlegg.js"></script> <id de toile="canvas"></canvas> <script type="text/javascript" src="js/digit.js"></script> <script type="text/javascript" src="js/app.js"></script> <div style="text-align:center;margin:50px 0; police:normal 14px/24px 'MicroSoft YaHei';"> </div> </corps> </html> Il s'agit d'un code d'horloge numérique composé de cœurs implémenté dans HTML5 Canvas, avec des effets spéciaux d'horloge cardiaque animée en mouvement.
effets spéciaux HTML521432018-01-26
<style> corps{couleur de fond : #292929} *{padding:0;margin:0;} .wrapper{ largeur : 960px ; marge:0 auto; hauteur de ligne : 36px ; texte-align:center; couleur:#999; } toile{display:block;background: #000;} .mod-botton{ hauteur : 32px ; remplissage : 15px 0; text-align: center; } </style> Un jeu Pacman Code Pac-Man avec effets spéciaux produits par HTML5, téléchargez le code source du jeu web Pac-Man.
effets spéciaux HTML531942018-01-26
<title>HTML5手机微信端开心消消乐游戏代码</title> <style type="text/css"> * { remplissage : 0px ; marge : 0px ; curseur : par défaut ; } corps { police : 12px/20px Palatino ; }</style> <!--<script type="text/javascript">document.write('<script type="text/javascript" src="../resource/js/resource_loader.js?ver='+ Math.random()+'"></script>')</script>--> </tête> <corps> <div id="spilgames-root"></div> <script type="text/javascript" src="js/game.min.js"></script> <script> fonction dp_Ranking() { document.location.href = "http://www.sucaihuo.com/"; } </script> <div id="share" style="display: none"> <img width="100%" src="bitmap/share.png" style="position : fixe ; z-index : 9999 ; haut : 0 ; gauche : 0 ; affichage : " ontouchstart="document.getElementById(& #39;share').style.display='none';"> </div> <script> HTML5 开心消消乐网页游戏是一款好玩的手机微信端开心消消乐游戏代码，消消乐游戏HTML5源码。
effets spéciaux HTML526762018-01-25
<script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> html, corps{ largeur : 100 % ; hauteur : 100% ; marge : 0; remplissage : 0 ; Débordement : caché ; couleur d'arrière-plan : #101010 ; } .conteneur{ position : absolue ; largeur : 500 px ; hauteur : 500px ; haut : 50 % ; gauche : 50% ; marge supérieure : -250 px ; marge gauche : -250px; } </style> Il s'agit d'un effet spécial réaliste d'animation de poissons sous-marins HTML5 Canvas qui dessine des bancs de sardines nageant dans la mer.
effets spéciaux HTML518352018-01-25
<body><script src="/demos/googlegg.js"></script> <div class="contain-clock"> <div class="face-1"> <div class="heure"></div> <div class="minute"></div> <div class="seconde"></div> <div class="center"></div> </div> <div class="face-2"> <div class="line"></div> <div class="ligne ligne-2"></div> <div class="ligne ligne-3"></div> <div class="ligne ligne-4"></div> <div class="line line-5"></div> <div class="line line-6"></div> </div> <div class="arm"></div> <div class="bras bras-2"></div> <div class="bell"></div> <div class="bell bell-2"></div> <div class="hammer"></div> <div class="handle"></div> </div> Les fichiers CSS3 sont basés sur des images CSS3 et CSS3 sont mis à jour.
effets spéciaux HTML514032018-01-25
Il s'agit d'un bouton de commentaire en étoile très simple, embellissant le code du formulaire de commentaire de la zone de texte, le code du formulaire de commentaire en étoile jQuery et les effets spéciaux de notation par étoiles jQuery. code js <script type="text/javascript"> $(fonction () { $('.text-area-input').click(function () { if ($(this).val() == 'Veuillez saisir le contenu du commentaire...') { $(this).css({ couleur : '#000000' }).val('') } }); //En partant $('.text-area-input').blur(function () { var iNum = $(this).val().length; var fixedLength = 20;//Longueur fixe if (iNum <fixedLength) { $('.text-area-input-length span').html(fixedLength - iNum); } autre { $(this).val($(this).val().substr(0,fixedLength - 1));//Intercept length $('.text-area-input-length span').html(iNum - fixedLength); } }); //Lorsque vous appuyez dessus $('.text-area-input').keydown(function () { var iNum = $(this).val().length; var fixedLength = 20;//Longueur fixe if (iNum <fixedLength) { $('.text-area-input-length span').html(fixedLength - iNum); } autre { $(this).val($(this).val().substr(0,fixedLength - 1));//Intercept length $('.text-area-input-length span').html(iNum - fixedLength); } }); $('.text-area-bottom a').click(function () { var star = $('input[name=star]:checked').val(); var content = $('textarea[name=content]').val(); alerte(contenu); }); $('.text-area-star label').click(function () { var labelLength = $('.text-area-star label').length; pour (var i = 0; i < labelLength; i++) { if (this == $('.text-area-star label').get(i)) { $('.text-area-star label').eq(i).addClass('red'); } autre { $('.text-area-star label').eq(i).removeClass('red'); } } }); }); </script>
effets spéciaux HTML521732018-01-24
Un code de calculatrice Web HTML5 simple et magnifique, des effets spéciaux exquis de style calculatrice HTML5 + CSS3. code js <script> Fonction s(v) { document.getElementById('res').value = v } function a(v) { document.getElementById('res').value += v } function e() { try { s(eval(document.getElementById('res').value)) } catch(e) { s('Error') } } </script>
effets spéciaux HTML524412018-01-24
Il s'agit d'un code de pagination jquery de style orange avec la page précédente, la page suivante et le saut de recherche. Téléchargez le plug-in de pagination jQuery entièrement fonctionnel. code js <script type="text/javascript" src="js/lib/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#Pagination").pagination("15"); }); </script>
effets spéciaux HTML519372018-01-24
Il s'agit d'un effet spécial permettant de basculer automatiquement l'affichage du produit et de l'image du produit lorsque la souris passe sur l'image, code de changement d'onglet d'image jQuery. <div class="slide"> <div class="slide_point"> <span class="cur_point point1"><img width="210px" height="280px" src="img/image/2_1.png"></span> <span class="point2"><img width="200px" height="250px" src="img/image/0_2.png"></span> <span class="point3"><img width="200px" height="250px" src="img/image/0_3.png"></span> <span class="point4"><img width="200px" height="250px" src="img/image/0_4.png"></span> ; <div class="slide_cont"> <ul class="clearfix"> <li> <img src="img/image/1_1.png" hspace="10" usemap="#s_map_1" ismap="ismap"/> <map name="s_map_1" class="s_map"> <area class="map_point" shape="rect" coords="10,20,170,300" href="#" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="220,20,390,300" href="siteall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="420,20,600,300" href="pageall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="620,20,810,300" href="pageal.htm" target="_blank" alt="" title=""> </carte> </li> <li> <img src="img/image/1_2.png" hspace="10" usemap="#s_map_2"/> <map name="s_map_2" class="s_map"> <area class="map_point" shape="rect" coords="10,20,170,300" href="urlall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="300,20,500,300" href="siteall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="620,20,810,300" href="pageal.htm" target="_blank" alt="" title=""> </carte> </li> <li> <img src="img/image/1_3.png" hspace="10" usemap="#s_map_3"/> <map name="s_map_3" class="s_map"> <area class="map_point" shape="rect" coords="10,20,170,300" href="urlall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="220,20,390,300" href="siteall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="420,20,600,300" href="pageall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="620,20,810,300" href="pageal.htm" target="_blank" alt="" title=""> </carte> </li> <li> <img src="img/image/1_4.png" hspace="10" usemap="#s_map_4"/> <map name="s_map_4" class="s_map"> <area class="map_point" shape="rect" coords="10,20,170,300" href="urlall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="300,20,500,300" href="siteall.htm" target="_blank" alt="" title=""> <area class="map_point" shape="rect" coords="620,20,810,300" href="pageal.htm" target="_blank" alt="" title=""> </carte> </li> </ul> </div> </div>
effets spéciaux HTML516682018-01-24