搜索
首页web前端html教程用Vue+CSS3怎么做交互特效

我们知道,做项目的时候一定会用到交互效果或者特效,我曾开发郭一个项目一直在用Vue.开发技术栈方面就用了Vue+CSS3,过程中发现vue+css3开发特效很好用,今天就给大家带来这样一份教程。

1.文章上面的代码,虽然代码很简单,不难理解,但是也是建议大家边写边看,这样不会混乱。
2.文章所提及的小实例,都是很基础的,大家可以参照自己的想法进行扩展,或者修改,可能会有意想不到的效果。我写这类型的文章也是想授人以渔,不是授人以鱼!
3.这几个实例,摘自我自己的平常练习的项目,代码已经提到github上面了(vue-demos)。欢迎大家star。

2.开场小动画

原理分析

说到原理分析,其实也没什么可以分析的,就是在页面是下面这个状态的时候,把文字替换掉。至于看到字体缩成一团,就是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 id="text">     <h1>{{testText}}</h1> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript">     new Vue({         el:&#39;#text&#39;,         data:{             nowIndex:0,             testText:&#39;欢迎浏览&#39;         },         mounted(){             let _this=this;             let timer = setInterval(function(){                 _this.nowIndex++;                 switch (_this.nowIndex) {                     case 1:                         _this.testText = &#39;守候的文章&#39;;                         break;                     case 2:                         _this.testText = &#39;愿您浏览愉快&#39;;                         break;                     case 3:                         _this.testText = &#39;学到知识&#39;;                         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 id="text">     <h1>欢迎浏览</h1> </div> </body> <script>     var oH1=document.querySelector(&#39;h1&#39;),nowIndex=0;     console.log(oH1)     var timer = setInterval(function () {         nowIndex++;         switch (nowIndex) {             case 1:                 oH1.innerHTML = &#39;守候的文章&#39;;                 break;             case 2:                 oH1.innerHTML = &#39;愿您浏览愉快&#39;;                 break;             case 3:                 oH1.innerHTML = &#39;学到知识&#39;;                 break;         }         if (nowIndex > 3) {             setTimeout(() => {                 clearInterval(timer);             }, 2000)         }     }, 2000) </script> </html>

3.导航滑块

运行效果

原理分析

首先,下面是页面初始化的时候,橙色滑块的位置

鼠标放到第二个tab上面,大家可以看到,橙色滑块就是向右偏移了一个tab的距离

鼠标放到第三个tab上面,大家可以看到,橙色滑块就是向右偏移了两个tab的距离

如果从第一个tab到第六个tab的索引是0,1,2,3,4,5。

那么滑块的公式就是(索引*tab的宽度)。大家看到有逐渐过去的效果,其实是css3过渡(transition)的效果。大家看下面的代码就行了,一看就懂!代码如下:

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="{&#39;transform&#39;:&#39;translate3d(&#39;+nowIndex*100+&#39;px,0,0)&#39;}"></div> </div> </body> <script src="vue.min.js"></script> <script type="text/javascript">    new Vue({        el:&#39;#nav&#39;,        data:{            nowIndex:0        }    }) </script> </html>

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=&#39;translate3d(0,0,0)&#39;;     })     for(var i=0;i<oLi.length;i++){         oLi[i].index=i;         oLi[i].addEventListener("mouseenter",function (e) {             oSlider.style.transform=&#39;translate3d(&#39;+this.index*100+&#39;px,0,0)&#39;;         })     } </script> </html>

4.轮播图

蓝框的是li,黑框的是div

看到上面,其实也就是控制ul的偏移量(transform:translate3d)。计算公式和上面的滑块相似,索引(0|1|2|3)*li的宽度。不同的就是,ul的偏移量是取负数,因为ul是想左偏,上面的滑块是向右偏!
当第一张图片的时候,ul偏移量设置(transform: translate3d(0px, 0px, 0px))。
当第二张图片的时候,ul偏移量设置(transform: translate3d(-1000px, 0px, 0px))。
当第二张图片的时候,ul偏移量设置(transform: translate3d(-2000px, 0px, 0px))。以此类推,偏移量很简单的就能计算出来!

可能我说的大家有点懵,但是,看下面的代码,就不会懵了,因为代码也很简单!

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="{&#39;width&#39;:(listWidth*list.length)+&#39;px&#39;,&#39;transform&#39;:&#39;translate3d(-&#39;+(listWidth*nowIndex)+&#39;px,0,0)&#39;}">         <!--遍历出来的图片-->         <li v-for="(li,index) in list" :style="{&#39;width&#39;:listWidth+&#39;px&#39;}">             <a href="javascript:;">                 <img :src="li" class="slider-img"/>             </a>         </li>     </ul>     <div class="slide-option">         <span v-for="(li,index) in list" :class="{&#39;active&#39;:index===nowIndex}"></span>     </div>     <div class="slide-arrow">         <div class="arrow-left" @click.stop="switchDo(&#39;reduce&#39;)"></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: &#39;#slide-img&#39;,         data: {             nowIndex: 0,             listWidth: &#39;1000&#39;,             list: [&#39;./images/timg1.jpg&#39;, &#39;./images/timg2.jpg&#39;, &#39;./images/timg3.jpg&#39;, &#39;./images/timg4.jpg&#39;],             timer:null         },         methods: {             //滑动操作             switchDo(reduce){                 clearInterval(this.timer);                 //根据reduce判断this.nowIndex的增加或者减少!                 if(reduce===&#39;reduce&#39;){                     //如果是第一张,就返回最后一张                     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>

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(&#39;#slide-img-ul&#39;);         var oLi=oUl.querySelectorAll(&#39;li&#39;);         var oSpan=document.querySelector(&#39;.slide-option&#39;).querySelectorAll(&#39;span&#39;);         var oArrowLeft=document.querySelector(&#39;.arrow-left&#39;);         var oArrowRight=document.querySelector(&#39;.arrow-right&#39;);         oUl.style.width=&#39;4000px&#39;;         oArrowLeft.addEventListener(&#39;click&#39;,function () {             switchDo(&#39;reduce&#39;);         })         oArrowRight.addEventListener(&#39;click&#39;,function () {             switchDo();         })         var timer=null,nowIndex=0;         function switchDo(reduce){             clearInterval(timer);             //设置样式             oUl.style.transform=&#39;translate3d(-&#39;+(1000*nowIndex)+&#39;px,0,0)&#39;;             for (var i=0;i<oSpan.length;i++){                 if(i===nowIndex){                     oSpan[i].className=&#39;active&#39;;                 }                 else{                     oSpan[i].className=&#39;&#39;;                 }             }             //根据reduce判断this.nowIndex的增加或者减少!             if(reduce===&#39;reduce&#39;){                 //如果是第一张,就返回最后一张                 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.小结

好了,关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。今天讲这三个小实例不是说给大家代码,让大家复制粘贴使用,而是希望能起到一个抛砖引玉的作用,拓展思维的作用!就像我之前写文章说得那样,我写文章是希望能起到一个授人以渔的作用,而不是授人以鱼!最后,如果大家觉得有什么地方我写错了,写错不好,或者有其它什么建议,欢迎指出!让大家相互学习,共同进步!

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!


相关阅读:

CSS3的loading特效怎么制作

CSS的编码怎么转换

怎样用canvas做出粒子喷泉动画的效果

以上是用Vue+CSS3怎么做交互特效的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具