理所当然就使用了vue+css3开发
做项目就不免会开发交互效果或者特效，而我比来开发的项目一直在使用vue，开发技术栈方面，理所固然就使用了vue+css3开发，过程中发明使用vue+css3开发特效，和javascript/jquery+css3的思维方法不一样，但是比javascript/jquery+css3简单一点点。今天就分享三个简单的小实例，但愿能起到拓展思维的感化，让大家大白vue+css3应该怎样开发交互效果！如果大家有什么好的建议，或者感受我哪里写错了，欢迎指出！
1.文章上面的代码，虽然代码很简单，不难理解，但是也是建议大家边写边看，这样不会混乱。2.文章所提及的小实例，都是很根本的，大家可以参照本身的想法进行扩展，或者改削，可能会有意想不到的效果。我写这类型的文章也是想授人以渔，不是授人以鱼！
3.这几个实例，摘自我本身的泛泛操练的项目，代码已经提到github上面了(vue-demos)。欢迎大家star。 2.开场小动画 运行效果
gif图模糊效果看着跟实际效果不太一样！大家注意！
道理分析
说到道理分析，其实也没什么可以分析的，就是在页面是下面这个状态的时候，把文字替换失。至于看到字体缩成一团，就是letter-spacing这个css属性的控制效果。字体模糊就是filter: blur()这个css属性的控制效果！看到有逐渐的变革，就是css3动画（animation）的效果
下面简单分析下，这个动画的几个法式，从下面看到，这个动画一共8个法式。
这下就清晰明了了，我们要不才图这个瞬间开始转变文字，也就是页面加载了两秒后，动画执行了两次后就开始转变文字。然后每隔两秒转变一次文字，直到最后！
下面给出vue和javascript两种方法的代码，看下哪种方法越发的简单！
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> <h1>{{testText}}</h1> </div> </body> <script src="http://www.mamicode.com/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> 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> <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.导航滑块 运行效果温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31547.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")