首页 > 其他分享 >background实现边线动画

background实现边线动画

时间:2023-11-22 19:45:23浏览次数:26  
标签:动画 right background 2px 边线 position size

边线左侧划出,右侧收起,关键点就是 改变background-position的位置left -> right

.div {
    background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 1.3s;
}

.div:hover {
    background-position-x: left;
    background-size: 100% 2px;
}

 

标签:动画,right,background,2px,边线,position,size
From: https://www.cnblogs.com/mengff/p/17850134.html

相关文章

  • 记录--实现金币飞入钱包的动画
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 效果金币从初始位置散开后逐个飞向指定位置,这是游戏中很常用的一个动画,效果如下:思路这个效果中,分成两个阶段:一定数量的金币从一个起点散开这些金币逐一飞向终点计算金币的初始散开位置生成圆周上的等......
  • OLED动画设计
    前言之前在b站上看到很多大佬分享了OLED丝滑滑动的界面的效果,当时对这个超级喜欢,但是看到大部分都是用的U8G2的OLED图形库。这对于一些资源比较紧张的单片机,而且还想用上这种的并不是很友好。而且我最开始使用OLED的时候用的都是中景园的代码,都是比较简单的GUI接口,所以掌握理论方......
  • 前端学习笔记202309学习笔记第九十八天-vue2-动画特效和常见组件库3
     ......
  • 纯CSS3实现圆圈动态发光特效动画
    参考文档:https://www.cnblogs.com/cyfeng/p/12625606.htmlhtml文件: <div class="item"></div>css文件:     <!DOCTYPEHTML><html><head><title>纯CSS3实现圆圈动态发光特效动画</title><style>bo......
  • Svg动画和Canvas动画有什么区别
    一、什么是SVG动画SVG(ScalableVectorGraphics)动画是指使用SVG技术创建的可缩放矢量图形进行动画效果的展示。SVG动画可以通过CSS或JavaScript来实现,常见的SVG动画包括以下几种类型:   CSS动画:使用CSS的@keyframes规则和animation属性来定义和控制SVG元素的动画效果。可以通过指......
  • Animator.Enable一帧内两次设置之间的动画控制属性变更失效
    1)Animator.Enable一帧内两次设置之间的动画控制属性变更失效2)移动端Shader的Varying插值后是否会写回主存3)UnityAvatar在大型MMO中使用情况如何4)UnityWebRequest加载外部图片,尺寸是否必须是4的倍数这是第360篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖了UWA问答、社区......
  • 一篇文章搞定Cocos Creator中动画编辑器的使用
    在CocosCreator游戏开发中,动画特效的使用非常频繁,而动画特效的操作对初学者来说又相对复杂,所以,初学者一定要引起重视。对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀~动画编辑器使用1:创建一个节点;2:为这个节点添加一个动画组件cc.Anima......
  • 所见即所得的动画效果:Animate.css
    我们可以在集成Animate.css来改善界面的用户体验,省掉大量手写css动画的时间。官网:Animate.css使用1、安装依赖npminstallanimate.css--save2、引入依赖import'animate.css';3、在项目中使用在class类名上animate__animated是必须的,animate__flipInX为你应用的动画效......
  • WPF动画之移动淡出淡入
    publicvoidShowAnimation(){//动画时间varduration=newDuration(TimeSpan.FromSeconds(0.3)); //移入vardoubleAnimation=newDoubleAnimation{Duration=duration,To=0......
  • Cocos Creator中骨骼动画组件的使用
    在CocosCreator游戏开发中,骨骼动画对于优化系统资源占用有很大帮助,很多时候我们都会使用。对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀~spine骨骼动画工具1:骨骼动画:把动画打散,通过工具,调骨骼的运动等来形成动画2:spine是一个非常流......