美文网首页
css 滚动动画

css 滚动动画

作者: aibinMr | 来源:发表于2019-08-24 02:35 被阅读0次
.animation{
    position: relative;
    animation:mymove 40s infinite;
    animation-play-state:running;
    animation-timing-function:linear;
    /* Safari and Chrome */
    -webkit-animation:mymove 40s infinite;
    -webkit-animation-play-state:running;   
    -webkit-animation-timing-function:linear;   
}
.animation:hover{
    
    animation-name:mymove;
    animation-play-state:paused;
    -webkit-animation-name:mymove; /* Safari 和 Chrome */
    -webkit-animation-play-state:paused;
    
}
@keyframes mymove
{
    from {right:0px;}
    to {right:2420px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {right:0px;}
    to {right:2420px;}
}

相关文章

  • vue 中使用wow.js

    wow.js可以在页面向下滚动时加载css动画,并且可以触发animate.css的动画效果。 wow.jsGit...

  • 前端开发遇到的问题

    CSS 1、页面平滑滚动 问题: 需要在滚动到顶部的时候有缓慢滚动的动画效果 方案: scroll-behavio...

  • 页面几种滚动总结

    动画滚动可以用css和jscss:transform:translateY transition:'1s...

  • wow.js的使用方法

    wow.js简介 功能: 滚动页面, 显示css动画 和animate.css配合使用 wow.js基本使用 基本...

  • css 滚动动画

  • AOS.js页面滚动动画插件(CSS3)

    aos.js是一个用于在页面滚动的时候呈现元素动画的工具库,AOS是 CSS3 动画驱动的库,当你滚动页面的时候能...

  • Vue 无缝轮播实现

    实现原理: 1.采用css3 实现 滚动效果(过渡动画) 2.采用 dom 事件监听 监听 过度动画 3.无缝原理...

  • 【转】纯CSS实现顶部滚动条效果

    效果如图 分析需求 看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能完成的,因为这里涉及了页面滚动距离的...

  • 让css3动画变得有趣wowjs

    wowjs可以在网页滚动时, 展示css动画,是animater的好朋友, wowjs官方实例演示链接: http...

  • css滚动

    布局:水平滚动,垂直滚动 垂直滚动: 水平滚动: css样式:

网友评论

      本文标题:css 滚动动画

      本文链接:https://www.haomeiwen.com/subject/scffectx.html