首页 > 其他分享 >css3 箭头上下跳动

css3 箭头上下跳动

时间:2023-04-04 15:11:34浏览次数:46  
标签:css3 opacity 2s 上下跳动 ease 5s 箭头 opener out

.container .stepsItem.permit .permitStepItem .table .showTable {
    width: .37rem;
    margin: .20rem auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -.18rem;
    -webkit-animation: opener .5s ease-in-out alternate infinite;
    animation: opener .5s ease-in-out alternate infinite;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
    transition: opacity .2s ease-in-out, transform .5s ease-in-out .2s;
}
@-webkit-keyframes opener {
    100% {
        bottom: .05rem;
    }
}

@keyframes opener {
    100% {
        bottom: .05rem;
    }
}

 

标签:css3,opacity,2s,上下跳动,ease,5s,箭头,opener,out
From: https://www.cnblogs.com/moguzi12345/p/17286469.html

相关文章

  • 纯CSS3实现多行文本截断
    纯CSS处理多行文本展开和收起,直接上代码和效果图1<html>2<header>3<style>4.wrap{5position:relative;6padding:5px25px25px;7border-radius:5px;8box-shadow:05px20px3px#cc......
  • echarts 折线图x轴不等分+拐点有箭头
    效果图: 不等分需要用到属性:connectNulls:true思路:x轴间隔需用null占位,然后把为null的数据连线就可以 varxData=['0点','1点','2点','','4点','5点','6点','',......
  • React状态 和 JavaScript箭头函数
    React状态和JavaScript箭头函数在看React的状态时见到了JS的箭头函数,一时间没看明白。React状态React把组件看成是一个状态机(StateMachines)。通过与用户的交互......
  • CSS3-页面布局基础一
    一、CSS概要web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端......
  • CSS3 Media Query 响应式媒体查询
    在CSS中,有一个极其实用的功能:@media响应式布局。具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分。通过响应式布局,可以达到只使用......
  • css3新特性
    css3新特性圆角使用CSS3border-radius属性,你可以给任何元素制作"圆角"border-radius属性,可以使用以下规则:四个值:第一个值为左上角,第二个值为右上角,第三个值为......
  • [echarts] 折线图 echarts 双箭头加文字
    可以直接点这个echarts例子,直接编辑option={tooltip:{trigger:'axis',},xAxis:[{type:'category',boun......
  • CSS选择器(包含CSS3新增的伪类和属性选择器等)
    选择器详见https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/SelectorsCSS语法规则由两个主要的部分构成:选择器,以及一条或多条声明(样式)全局选择器......
  • CSS3动画
    动画动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自......
  • CSS3实现的线条波浪动画效果
    阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中,使用了3张波浪线条的png图片,以及少量的CSS......