Maison > Article > interface Web > Comment utiliser Vue+CSS3 pour créer des effets interactifs
Comment utiliser Vue+CSS3 pour créer des effets interactifs
- php中世界最好的语言original
- 2017-11-27 15:18:132524parcourir
Nous savons que des effets interactifs ou des effets spéciaux seront certainement utilisés lors de la réalisation de projets. J'ai déjà développé un projet et j'utilise Vue En termes de développement de la pile technologique, j'ai utilisé Vue+CSS3 dans le processus. que les effets spéciaux de développement vue+css3 sont très utiles. C'est facile à utiliser. Aujourd'hui, je vais vous proposer un tel tutoriel.
1. Bien que le code de l'article soit très simple et pas difficile à comprendre, il est recommandé de le lire en écrivant pour éviter toute confusion.
2. Les petits exemples mentionnés dans l'article sont très basiques. Vous pouvez les développer ou les modifier selon vos propres idées, ce qui peut avoir des effets inattendus. Quand j’écris ce type d’article, je veux aussi apprendre aux gens à pêcher, pas leur apprendre à pêcher !
3. Ces exemples sont tirés de mes propres projets de pratique quotidienne, et le code a été mentionné sur github (vue-demos). Bienvenue à tous dans la star.
2. Animation d'ouverture
Analyse de principe
En parlant d'analyse de principe, il n'y a en fait rien à analyser Il s'agit de remplacer le texte lorsque la page est dans l'état suivant. Perdre. Quant à voir la police se réduire en boule, c'est l'effet de contrôle de l'attribut CSS letter-spacing. Le flou de police est l'effet de contrôle du filtre d'attribut CSS : Blur() ! Vous pouvez voir qu'il y a des changements progressifs, ce qui est l'effet de l'animation CSS3
Analysons brièvement les étapes de cette animation Comme vous pouvez le voir en bas, cette animation comporte un total de 8 étapes.
Maintenant, c'est clair. Nous voulons commencer à modifier le texte au moment indiqué ci-dessous, c'est-à-dire deux secondes après le chargement de la page, l'animation sera exécutée deux fois avant de commencer à modifier le texte. Changez ensuite le texte toutes les deux secondes jusqu'à la fin !
Les codes de deux méthodes, vue et javascript, sont donnés ci-dessous. Voyons quelle méthode est la plus simple !
Méthode vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body{ background: #ccc; } h1 { color: white; text-transform: uppercase; margin-top: 100px; text-align: center; font-size: 6rem; line-height: 1; animation: letterspacing 1s 7 alternate ease-in-out; display: block; letter-spacing: .5rem; } @keyframes letterspacing { 0% { letter-spacing: -72px; filter: blur(20px); } 40% { filter: blur(6px); } 80% { letter-spacing: 8px; filter: blur(0); } } </style> <body> <div id="text"> <h1>{{testText}}</h1> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#text', data:{ nowIndex:0, testText:'欢迎浏览' }, mounted(){ let _this=this; let timer = setInterval(function(){ _this.nowIndex++; switch (_this.nowIndex) { case 1: _this.testText = '守候的文章'; break; case 2: _this.testText = '愿您浏览愉快'; break; case 3: _this.testText = '学到知识'; break; } if (_this.nowIndex > 3) { setTimeout(() => { clearInterval(timer); }, 2000) } }, 2000) } }) </script> </html>Méthode javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body{ background: #ccc; } h1 { color: white; text-transform: uppercase; margin-top: 100px; text-align: center; font-size: 6rem; line-height: 1; animation: letterspacing 1s 7 alternate ease-in-out; display: block; letter-spacing: .5rem; } @keyframes letterspacing { 0% { letter-spacing: -6rem; filter: blur(1rem); } 40% { filter: blur(.3rem); } 80% { letter-spacing: .5rem; filter: blur(0rem); } } </style> <body> <div id="text"> <h1>欢迎浏览</h1> </div> </body> <script> var oH1=document.querySelector('h1'),nowIndex=0; console.log(oH1) var timer = setInterval(function () { nowIndex++; switch (nowIndex) { case 1: oH1.innerHTML = '守候的文章'; break; case 2: oH1.innerHTML = '愿您浏览愉快'; break; case 3: oH1.innerHTML = '学到知识'; break; } if (nowIndex > 3) { setTimeout(() => { clearInterval(timer); }, 2000) } }, 2000) </script> </html>3. Curseur de navigation
Effet opérationnel
Analyse des principes
Tout d'abord, voici la position du curseur orange lors de l'initialisation de la page
Placez la souris sur le deuxième onglet Comme vous pouvez le constater, le curseur orange est décalé d'une tabulation vers la droite. .
Placez la souris sur le troisième onglet. Vous pouvez voir que le curseur orange est décalé vers la droite de la distance de deux onglets
Si vous passez du premier onglet aux index. des six onglets sont 0,1,2,3,4,5.
Ensuite la formule du slider est (index * largeur de la tabulation). Comme vous pouvez le voir, l'effet qui passe progressivement est en fait l'effet de la transition CSS3. Il suffit de regarder le code ci-dessous, vous le comprendrez d’un coup d’œil ! Le code est le suivant :
Méthode vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="reset.css"> <style> .nav{ margin: 40px; position: relative; } .nav li{ float: left; width: 100px; height: 40px; line-height: 40px; color: #fff; text-align: center; background: #09f; cursor: pointer; } .nav span{ position: relative; z-index: 2; } .nav .slider{ position: absolute; transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); width: 100px; height: 40px; background: #f90; top: 0; left: 0; z-index: 1; } </style> <body> <div class="nav clear" id="nav" @mouseleave="nowIndex=0"> <ul> <li @mouseenter.stop="nowIndex=0"><span>Tab One</span></li> <li @mouseenter.stop="nowIndex=1"><span>Tab Two</span></li> <li @mouseenter.stop="nowIndex=2"><span>Tab Three</span></li> <li @mouseenter.stop="nowIndex=3"><span>Tab four</span></li> <li @mouseenter.stop="nowIndex=4"><span>Tab five</span></li> <li @mouseenter.stop="nowIndex=5"><span>Tab six</span></li> </ul> <div class="slider" :style="{'transform':'translate3d('+nowIndex*100+'px,0,0)'}"></div> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#nav', data:{ nowIndex:0 } }) </script> </html>Méthode javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <link rel="stylesheet" href="reset.css"> <style> .nav{ position: relative; } .nav li{ float: left; width: 100px; height: 40px; line-height: 40px; color: #fff; text-align: center; background: #09f; cursor: pointer; } .nav span{ position: relative; z-index: 2; } .nav .slider{ position: absolute; transition: all .5s cubic-bezier(0.4, -0.3, 0.57, 1.38); width: 100px; height: 40px; background: #f90; top: 0; left: 0; z-index: 1; } </style> <body> <div class="nav clear" id="nav"> <ul> <li><span>Tab One</span></li> <li><span>Tab Two</span></li> <li><span>Tab Three</span></li> <li><span>Tab four</span></li> <li><span>Tab five</span></li> <li><span>Tab six</span></li> </ul> <div class="slider"></div> </div> </body> <script type="text/javascript"> var oDiv=document.querySelector("#nav"),oLi=oDiv.querySelectorAll("li"),oSlider=document.querySelector(".slider"); oDiv.addEventListener("mouseleave",function () { oSlider.style.transform='translate3d(0,0,0)'; }) for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].addEventListener("mouseenter",function (e) { oSlider.style.transform='translate3d('+this.index*100+'px,0,0)'; }) } </script> </html>Image carrousel
Le cadre bleu est li, le cadre noir est Ce que vous voyez ci-dessus est div
, qui contrôle en fait le décalage de ul (transform:translate3d). La formule de calcul est similaire au curseur ci-dessus, indice (0|1|2|3)*largeur de li. La différence est que le décalage de ul est un nombre négatif, car ul veut se déplacer vers la gauche, et le curseur ci-dessus veut se déplacer vers la droite !
Lorsque la première photo est prise, le décalage ul est défini (transform : translate3d(0px, 0px, 0px)).
Lors de la prise de la deuxième image, définissez le décalage ul (transform : translate3d(-1000px, 0px, 0px)).
Lors de la prise de la deuxième image, définissez le décalage ul (transform : translate3d(-2000px, 0px, 0px)). Par analogie, le décalage peut être calculé facilement !
Peut-être que ce que j'ai dit vous semble un peu déroutant, mais si vous regardez le code ci-dessous, vous ne serez pas dérouté, car le code est également très simple !
voie vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="reset.css"> <style> .slide-img { width: 1000px; height: 500px; overflow: hidden; position: relative; margin: 20px auto; } ul { transition: all .5s ease; } li { float: left; } .slide-arrow div { width: 50px; height: 100px; position: absolute; margin: auto; top: 0; bottom: 0; background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat; } .arrow-right { transform: rotate(180deg); right: 0; } .arrow-left { left: 0; } .slide-option{ position: absolute; bottom: 10px; width: 100%; left: 0; text-align: center; } .slide-option span{ display: inline-block; width: 14px; height: 14px; border-radius: 100%; background: #ccc; margin: 0 10px; } .slide-option .active{ background: #09f; } </style> </head> <body> <div class="slide-img clear" id="slide-img"> <!--用tran这个class控制ul是否含有过渡效果，样式已经写好--> <ul :style="{'width':(listWidth*list.length)+'px','transform':'translate3d(-'+(listWidth*nowIndex)+'px,0,0)'}"> <!--遍历出来的图片--> <li v-for="(li,index) in list" :style="{'width':listWidth+'px'}"> <a href="javascript:;"> <img :src="li" class="slider-img"/> </a> </li> </ul> <div class="slide-option"> <span v-for="(li,index) in list" :class="{'active':index===nowIndex}"></span> </div> <div class="slide-arrow"> <div class="arrow-left" @click.stop="switchDo('reduce')"></div> <div class="arrow-right" @click.stop="switchDo"></div> </div> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript"> new Vue({ el: '#slide-img', data: { nowIndex: 0, listWidth: '1000', list: ['./images/timg1.jpg', './images/timg2.jpg', './images/timg3.jpg', './images/timg4.jpg'], timer:null }, methods: { //滑动操作 switchDo(reduce){ clearInterval(this.timer); //根据reduce判断this.nowIndex的增加或者减少！ if(reduce==='reduce'){ //如果是第一张，就返回最后一张 if(this.nowIndex===0){ this.nowIndex=this.list.length-1; } else{ this.nowIndex--; } } else{ //如果是最后一张，就返回第一张 if(this.nowIndex===this.list.length-1){ this.nowIndex=0; } else{ this.nowIndex++; } } var _this=this; this.timer=setInterval(function () { _this.switchDo(); },4000) }, }, mounted(){ var _this=this; this.timer=setInterval(function () { _this.switchDo(); },4000) } }) </script> </html>voie javascript
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="reset.css"> <style> .slide-img { width: 1000px; height: 500px; overflow: hidden; position: relative; margin: 20px auto; } ul { transition: all .5s ease; } li { float: left; } .slide-arrow div { width: 50px; height: 100px; position: absolute; margin: auto; top: 0; bottom: 0; background: url("http://i1.bvimg.com/1949/4d860a3067fab23b.jpg") no-repeat; } .arrow-right { transform: rotate(180deg); right: 0; } .arrow-left { left: 0; } .slide-option{ position: absolute; bottom: 10px; width: 100%; left: 0; text-align: center; } .slide-option span{ display: inline-block; width: 14px; height: 14px; border-radius: 100%; background: #ccc; margin: 0 10px; } .slide-option .active{ background: #09f; } </style> </head> <body> <div class="slide-img clear" id="slide-img"> <!--用tran这个class控制ul是否含有过渡效果，样式已经写好--> <ul id="slide-img-ul"> <!--遍历出来的图片--> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg1.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg2.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg3.jpg" class="slider-img"/></a></li> <li style="width: 1000px;"><a href="javascript:;"><img src="images/timg4.jpg" class="slider-img"/></a></li> </ul> <div class="slide-option"> <span></span> <span></span> <span></span> <span></span> </div> <div class="slide-arrow"> <div class="arrow-left"></div> <div class="arrow-right"></div> </div> </div> </body> <script type="text/javascript"> window.onload=function () { var oUl=document.querySelector('#slide-img-ul'); var oLi=oUl.querySelectorAll('li'); var oSpan=document.querySelector('.slide-option').querySelectorAll('span'); var oArrowLeft=document.querySelector('.arrow-left'); var oArrowRight=document.querySelector('.arrow-right'); oUl.style.width='4000px'; oArrowLeft.addEventListener('click',function () { switchDo('reduce'); }) oArrowRight.addEventListener('click',function () { switchDo(); }) var timer=null,nowIndex=0; function switchDo(reduce){ clearInterval(timer); //设置样式 oUl.style.transform='translate3d(-'+(1000*nowIndex)+'px,0,0)'; for (var i=0;i<oSpan.length;i++){ if(i===nowIndex){ oSpan[i].className='active'; } else{ oSpan[i].className=''; } } //根据reduce判断this.nowIndex的增加或者减少！ if(reduce==='reduce'){ //如果是第一张，就返回最后一张 if(nowIndex===0){ nowIndex=oLi.length-1; } else{ nowIndex--; } } else{ //如果是最后一张，就返回第一张 if(nowIndex===oLi.length-1){ nowIndex=0; } else{ nowIndex++; } } timer=setInterval(function () { switchDo(); },4000) } switchDo(); } </script> </html>5 Résumé
D'accord, à propos des effets spéciaux du développement vue+css3, et. C'est tout pour la comparaison de javascript+css3. J'espère que ces trois petits exemples pourront aider tout le monde à comprendre comment utiliser vue+css3 pour développer des effets spéciaux. Les trois petits exemples dont je parle aujourd’hui n’ont pas pour but de vous donner des codes à copier-coller, mais j’espère qu’ils pourront vous servir de point de départ et élargir votre réflexion ! Comme je l’ai dit dans mon article précédent, j’écris l’article dans l’espoir de jouer un rôle en apprenant aux gens à pêcher, plutôt que d’apprendre aux gens à pêcher ! Enfin, si vous estimez que j'ai commis une erreur ou que j'ai commis une erreur, ou si vous avez d'autres suggestions, n'hésitez pas à les signaler ! Laissez chacun apprendre les uns des autres et progresser ensemble !
Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment créer l'effet de chargement de CSS3
CSS Comment convertir l'encodage
Comment utiliser le canevas pour créer l'effet d'animation de fontaine de particules
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!