动画
土垚金鑫
软件
展开
-
vue项目新闻消息向上滚动案例
vue项目新闻消息向上滚动案例效果如下图所示:代码组件如下:<template> <div class="message-page"> <div class="msg-tit"> <div class="msg-top"> <div class="tit-word">消息通知</div> <div class="原创 2021-04-01 11:41:30 · 1839 阅读 · 0 评论 -
vue项目登录页-实现字体动画案例
vue项目登录页-实现字体动画案例实现思路:1,让每个字都包含在span标签中,span标签的display:inner-block2,页面刚生成时(动画之前)设置margin宽度为80px,opacity为0.23,页面渲染完后(mounted方法)设置一个setTimeout,添加一个css样式,css样式中含有动画效果,主要代码如下所示mounted方法mounted() { setTimeout(()=>{ this.wor原创 2021-01-05 19:09:05 · 1518 阅读 · 0 评论 -
vue项目开发引导页-带有动画效果
vue项目开发引导页-带有动画效果,如下图所示本案例实现步骤是:1,先开发一个全局的弹框(遮罩层)全局弹框代码-遮罩层2,添加背景图-使用绝对定位实现元素定位3,开发带有动画效果的组件实现动画效果的代码如下所示,PositionGuide.vue:<template> <div class="re-guide"> <div class="re-content"> <div class="re-cbtn"原创 2021-01-05 16:58:19 · 3849 阅读 · 4 评论 -
css动画--使用图标进行顺时针与逆时针转圈
css动画–使用图标进行顺时针转圈代码如下:<template> <div style="width:1300px;height: 600px;border: 1px solid red;margin:0 auto"> <div class="circel"> </div> </div&g...原创 2020-01-21 16:08:13 · 5197 阅读 · 0 评论