今天在制作首页导航图特效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. 2020考研-必须了解的干货"极限微分和你说的悄悄话"

    极限微分和你说的悄悄话 2019-03-02 RunWsh 美食供应商有考研学子 想必接触过数学或物理的都对牛顿和莱布尼兹不陌生.如果你是考研大军中的一员,估计天天会与他们眉来眼去的吧! 牛顿莱布:别 ...

  2. Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.thinkplatform.dao.UserLogDao' available: expected at least 1 bean which qualifies as autowi

    我出错的问题是: 检查:

  3. 【Dubbo篇】--Dubbo框架的使用

    一.前述 Dubbo是一种提供高性能,透明化的RPC框架.是阿里开源的一个框架. 官网地址:http://dubbo.io/ 二.架构 组件解释: Provider: 提供者.发布服务的项目.Regi ...

  4. mysql的学习笔记（三）

    1.外键约束(保持数据一致,完整.实现一对多或一对一) 父表(参照的表)和子表(有外键列的表)必须使用相同的存储引擎InnoDB,禁止使用临时表. 外键列和参照列必须具有相似的数据类型.其中数字的长度 ...

  5. Windows Server 2019 容器化探索-Docker安装

    Docker on Windows Server 2019 微软自Windows Server 2016开始支持Docker,今天我们将介绍在Windows Server 2019上安装并使用Dock ...

  6. 【春华秋实】深入源码理解.NET Core中Startup的注册及运行

      写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程序的起点.通过使用Startup,可以配置化处理所有向应用程序所做的请求的 ...

  7. DSAPI Wifi热点的扫描与连接

    使用DSAPI扫描和连接Wifi热点,支持连接隐藏的SSID. 效果演示: 代码如下: Private Wifi As New DSAPI.网络.Wifi Private Sub Button1_Cl ...

  8. 我爱Java系列之《JavaEE面试宝典》---【IO流面试总结】

    1.什么是比特(Bit),什么是字节(Byte),什么是字符(Char),它们长度是多少,各有什么区别 答案 Bit最小的二进制单位 ,是计算机的操作部分 取值0或者1 Byte是计算机操作数据的最小 ...

  9. nginx系列9：HTTP反向代理请求处理流程

    HTTP反向代理请求处理流程 如下图:

  10. vue 日期时间过滤器

    来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删 来自:https://segmentfault.com/a/11900 ...