- 2024-08-23Vue3的学习---7
7.动画与过渡动画与过渡的区别：过渡：主要用于简单的属性变化，从一个状态平滑过渡到另一个状态。动画：可以定义复杂的关键帧序列，实现更为复杂和多变的动画效果。7.1动画7.1.1回顾CSS动画<head><metacharset="UTF-8"><metaname="viewport"content="width=device
- 2024-08-17前端css动画水平移动，垂直移动，对角线移动transform
水平移动：transform:translateX(100px);沿着x轴向右移动100px，向左-100px 垂直移动：transform:translateY(100px);沿着Y轴向上移动100px，向下就是-100px 对角线移动：transform:translate(100px,100px); 对应x轴，y轴坐标<!DOCTYPEhtml><htmllang="en"
- 2024-03-25横向滚动展示内容
从蔚蓝档案中得到灵感，与好友博丽七七，一起做了个简易版的 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><ti
- 2024-02-28假期vue学习笔记11 动画
<template> <divid="root"> <Test/> <Test2/> <Test3/> </div></template><script>importTestfrom'./components/Test.vue'importTest2from'./comp
- 2024-02-28【vue】做一个从右边出来又回去的一个抽屉div
前言：工作需要做一个从右往左出现的一个弹窗，要有抽屉效果，看了网上各种方法好多都不能用，最后试了一种可以用，但是忘记是哪个网址了，现在就是自己写一下这个随便以后用到方便找。做一个从右边出来又回去的一个抽屉divhtml代码<divclass="addBtn"@click="show">点击按钮出
- 2024-01-18Vue3.0 路由动画（页面跳转）
前言vue3.0的页面组件之前切换的动画效果，在移动端H5页面，交互体验比较好，就是带Vue3的Transition组件 之前的写法是 Transition的组件要包在routerView外面，但是3.0的语法就是要在在里面了，不然会黄色警告<divclass="animation"><RouterViewv-slot="{Component,
- 2023-12-27使用Element.animate()实现动画
Element.animate()实现<divid="app"><button@click="startAmi">开始</button><p>{{msg}}</p></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><s
- 2023-12-22一个炫酷的CSS动画
先不说是啥，直接上代码，想看效果自己复制运行。<!DOCTYPEhtml><html><head><style>html{background:black;}.container{width:300px;height:300px;}.main1{width:500px;
- 2023-12-03vue3中css使用js中的变量
<scriptsetuplang="ts">import{SoundOutlined}from'@ant-design/icons-vue'constprops=defineProps({title:{type:String,default:''},color:{type:String,default:'#000'}
- 2023-11-16uni-app头像流动效果
您可以在uni-app中使用CSS动画实现头像流动效果。以下是一种可能的实现方式。首先，您可以在样式中添加一个CSS动画，这里我们定义一个从左到右的流动效果：css复制代码 <style> .avatar{ /*其他的样式...*/ /*添加动画*/ animation:flow3sinfi
- 2023-11-10h5购物车列表实现商品左滑删除
<htmllang="en"><head><metacharSet="UTF-8"><title>Title</title><style>.cart-list{padding:4px;}.cart-item{position:relative;
- 2023-08-25记录--一个炫酷的css动画
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助最近有一个需求，要我实现一个动画效果，效果如下简单分析了一下效果，是一个3d的效果，首先是一个圆，接着是两段圆环，第三层是一堆小圆环，最里面是一些线上运动，有着渐变色的矩形。第一层的圆环很简单。第二层的圆环其实
- 2023-08-18vue无缝循环轮播
在网上看了几个无缝循环轮播的实现方法，使用方法都比较复杂，所以这里提供一种比较简单的实现方式gitee:https://gitee.com/philippines-kisses-snow/rotation结构和理论梳理理论轮播的原理就是通过translateY/translateX移动轮播容器+过渡达到轮播项上下左右轮播效果的，为了达
- 2023-08-16小程序手写tab切换下边框跟随移动特效
简单效果就是这样，主要是用到微信的动画和获取元素信息left处理。具体来说就是先给红色的边一个固定位置，等到点击切换下一个按钮的时候，获取到下一个按钮的left信息，然后对红色边框使用translateX动画效果，代码如下：wxml<viewclass="tab"><viewbindtap="changeType"id="a1
- 2023-08-08vue--day58---多个元素过度
1.App.vue<template> <div><Test></Test><Test2></Test2></div> </template> <script> importTestfrom'./components/Test.vue';importTest2from'./components/Test2.vue';
- 2023-06-30轮播图效果
<style> @keyframesswiper{ 0%{transform:translateX(0);} 28%{transform:translateX(0);} 33%{transform:translateX(-300px);} 61%{transform:translateX(-300px);}
- 2023-02-09CSS 3.0实现的悬停菜单特效
今天给大家分享一个用CSS3.0实现的悬停菜单特效，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><m
- 2023-01-23Blazor如何实现类似于微信的Tab切换？
是否有小伙伴在使用tab的时候想进行滑动切换Tab？并且有滑动左出左进，右出右进的效果，本文将讲解怎么在Blazor中去通过滑动切换Tab本文中的UI组件使用的是MASABlazor,您也
- 2023-01-23Blazor如何实现类似于微信的Tab切换？
是否有小伙伴在使用tab的时候想进行滑动切换Tab？并且有滑动左出左进，右出右进的效果，本文将讲解怎么在Blazor中去通过滑动切换Tab本文中的UI组件使用的是MASABlazor,您也
- 2022-12-19css3 animation实现动态无缝轮播1
<htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</tit
- 2022-12-19css3 animation实现动态无缝轮播
<divclass="box":style="{'--card-ul-width-start':-30+'px','--card-ul-width-middle1':-cap.length*30+'px','--card-ul-width-middle2':-cap.length*60+'px','-
- 2022-11-27野花--js中使用+实现转换成字符串的小注意
在使用C3的transform时出现的一个问题:this.style.transform='translateX('+boxLeft+e.targetTouches[0].pageX-startX+'px)';这个并没有出现我预料的结果变成
- 2022-10-26css让层水平垂直居中
.myDiv{position:absolute;top:50%;left:50%;transform:translateX(-50%)translateY(-50%)}在父窗体上声明<div
- 2022-09-22Vue中的过渡效果
文中介绍简单动画 更多动画 Animate.css插件只有一个元素<div><button@click="isShow=!isShow">显示/隐藏</button> <!--appear页面
- 2022-08-25平移：translate()
在CSS3中，我们可以使用transform属性的translate()方法来实现元素的平移效果。语法：transform:translateX(x);/*沿X轴方向平移*/transform:translateY(y);/*沿Y轴方向