详解vue+css3做交互特效的方法(2)
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.导航滑块运行效果
原理分析
首先,下面是页面初始化的时候,橙色滑块的位置
鼠标放到第二个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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
内容版权声明:除非注明,否则皆为本站原创文章。