今天在制作首页导航图特效demo时，无意发现一个奇怪的交互现象，故记录

经测试，简化了触发该现象的代码，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        @keyframes move_top{
            0%{ top: 350px; }
            100%{ top: 0; }
        }
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*去除滚动条*/
            overflow: hidden;
        }
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            z-index: -1;
        }
        a{
            display: block;
            width: 100px;
            height: 100px;
            background: #acf;
        }
        #moveBox:target{
            /*使用动画*/
            animation: move_top 1s 1;
        }
    </style>
</head>
<body>
    <div id="moveBox"></div>
    <a href="#moveBox"></a>
</body>
</html>

在点击a标签后，moveBox并未如预期所想从距顶部350px位置到距顶部0px位置，而是a标签从屏幕上方进入屏幕。

去除html的overflow属性后，可发现当点击a标签时，页面出现一个滚动条，同时滚动条的可滚动长度在不断的缩小，同时a标签从上方进入可视区域。

把animation的循环次数从1改成大于1时，从第二次动画开始，动画效果符合预期。

修改moveBox的position属性的值为fixed可不触发该现象。

关于:target与定位动画的奇怪现象的更多相关文章

  1. 【奇怪现象】用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段，用电信却只有：__VIEWSTATE。【正常】？原因？

    [奇怪现象]用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段,用电信却只有:__VIEWSTATE.[正常]?原因? 对于__VIEWSTATE和__EVENTVALIDA ...

  2. 同时对view延时执行两个动画时候的现象

    同时对view延时执行两个动画时候的现象 对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分 ...

  3. 发现个delphi调用vc写的Dll中包括pchar參数报错奇怪现象

    发现个delphi调用vc写的Dll中包括pchar參数奇怪现象 procedure中的第一行语句不能直接调用DLL的函数,否则会执行报错,在之前随意加上条语句就不报错了奇怪! vc的DLL源代码地址 ...

  4. for循环产生的Cortex-M3汇编代码的一个奇怪现象

    最近比较一下KEIL和IAR两个编译器产生的代码,基于Cortex-M3处理器的,然后发现了一几个奇怪的地方. 很简单的一个C的for循环 void fun_for_add_65535(void) { ...

  5. PHP 浮点型转整型的一个奇怪现象

    起因 最近通过一个学长的题了解php弱类型的时候,发现了一个奇怪的现象. 正文 主要问题在这样一段代码: $c=(int)((0.1+$b)*10); 当$b=0.6,0.8以及其他值的时候都正常 将 ...

  6. CSS Float浮动所带来的奇怪现象

    先抛个例子出来 运行下面的例子后,可以看到输出内容如下. <!DOCTYPE html> <html lang="en"> <head> < ...

  7. SAP MM 并非奇怪现象之MB5B报表查不到某一笔出库记录？

    物料号:1301002696 工厂代码:2160 MB5B,如下查询条件, 查询结果中,期初与期末库存数量都是0,期间的出库入库数量都是0.事实上该物料期初应该是有库存的.并且我用MB51相同时间段查 ...

  8. zookeeper集群安装的奇怪现象

    zookeeper:配置的集群信息是domain:端口2888:端口3888:  domain为内网静态ip:每次启动都不能相互连接报错误: [myid:3] - WARN  [WorkerSende ...

  9. cygwin下调用make出现的奇怪现象

    <lenovo@root 11:48:03> /cygdrive/d/liuhang/GitHub/rpi_linux/linux$make help 1 [main] make 4472 ...

随机推荐

  1. FloatingActionButtonDemo【悬浮按钮的使用，顺带snackBar的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton ...

  2. Spring Boot连接MySQL数据库

    上篇 只需两步!Eclipse+Maven快速构建第一个Spring Boot项目 已经构建了一个Spring Boot项目,本文在此基础上进行连接MySQL数据库的操作. 1. pom.xml添加依 ...

  3. relief中visio图出现问题处理

    需安装visio2010版本, 安装DsoFramer_KB311765_x86.exe 管理员权限打开cmd,运行regsvr32 dsoframer.ocx

  4. ## 本篇文章对linux常用的一些命令做一下总结,如有需要补充以及不懂得地方,请在下方留言 适合于linux初学者,以及对命令掌握不牢的用来备忘

    本篇文章对linux常用的一些命令做一下总结,如有需要补充以及不懂得地方,请在下方留言 适合于linux初学者,以及对命令掌握不牢的用来备忘一,磁盘管理1.显示当前目录位置 pwd2.切换目录 cd ...

  5. Python从零搭建Conf_Web配置管理平台

    环境 CentOS 6/7 x64 Python:2 .7.6 Etcd: 3.2.18 Confd:0 .16.0 Nginx: 1.12.1 效果演示 一,拓扑图: 二.涉及软件 ETD: .分布 ...

  6. .net 笔试面试总结(3)

    什么是Sql注入?如何避免Sql注入? 用户根据系统的程序构造非法的参数从而导致程序执行不是程序期望的恶意Sql语句. 使用参数化的Sql就可以避免Sql注入. 数据库三范式是什么? 第一范式:字段不 ...

  7. pdf文件下载水印添加的中文与空格问题解决

    public static boolean waterMark(String inputFile, String outputFile, String waterMarkName)throws IOE ...

  8. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  9. 模板引擎artTemplate的使用

    1.引入template文件 <script src = js/template-native.js></script> 2.写模板 <script type=" ...

  10. Android常用的四种布局(或者说是五种)

    一.FrameLayout(帧布局): 显示特点:所有的子控件默认显示在FrameLayout的左上角,会重叠在一起显示. 常用属性: layout_gravity(设置给子控件,调整控件在容器内的重 ...