今天在制作首页导航图特效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. oracle 一些常用的sql优化规则

    1.高效使用groupby 提高GROUP BY语句的效率,可以通过将不需要的记录在GROUP BY之前过滤掉. 低效: SELECT JOB ,AVG(SAL) FROM EMP GROUP BY ...

  2. pycharm配置运行django项目步骤

    1:在django项目的跟目录下执行:这是直接在Linux系统中直接运行 python manage.py runserver 0:8000 然后在浏览器中输入IP端口即可访问 pycharm配置运行 ...

  3. Java中Map和Object的互相转换方式

    一.使用Apache中的BeanUtils类,导入commons-beanutils包. Jar包Maven下载地址:https://mvnrepository.com/artifact/common ...

  4. 【机器学习篇】--SVD从初始到应用

    SVD一般应用场景--推荐系统,图像压缩. 1.直观感受. SVD其实就是将矩阵分界,直观感受如图.就是将A矩阵分界成U,S,V三个矩阵相乘.一般推荐系统中用的多.S是对角阵,里面的特征值是从大到小排 ...

  5. 《前端之路》之二：数据类型转换 && 隐式转换 || 显式转换

    目录 02:数据类型转换 && 隐式转换 || 显式转换 02:数据类型转换 && 隐式转换 || 显式转换 在上一个章节中,我们介绍了 JavaScript 的基本的 ...

  6. 高效并发unsafe-星耀

    定义 Unsafe类是在sun.misc包下,不属于Java标准.但是很多Java的基础类库,包括一些被广泛使用的高性能开发库都是基于Unsafe类开发的,比如Netty.Cassandra.Hado ...

  7. 声明式RESTful客户端在asp.net core中的应用

    1 声明式RESTful客户端 声明式服务调用的客户端,常见有安卓的Retrofit.SpringCloud的Feign等,.net有Refit和WebApiClient,这些客户端都是以java或. ...

  8. 使用EOLINKER做接口测试最佳路径（上）

    本文内容: 测试脚本管理:讲述如何在 EOLINKER 上设计测试项目目录结构. 编写测试脚本:讲述如何在 EOLINKER 上编写接口测试脚本. 测试脚本执行及报告:讲述如何在 EOLINKER 上 ...

  9. Java8内存模型—永久代(PermGen)和元空间(Metaspace)

    一.JVM 内存模型 根据 JVM 规范,JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分. 1.虚拟机栈:每个线程有一个私有的栈,随着线程的创建而创建.栈里面存着的是一种叫“栈 ...

  10. 包（package）以及面向对象三个基本特征（继承）的介绍

    1.包(package) 包(package) 用于管理程序中的类,主要用于解决类的同名问题.包也可以看成一个目录. 包的作用 [1] 防止命名冲突. [2] 允许类组成一个单元(模块),便于管理和维 ...