关于:target与定位动画的奇怪现象
今天在制作首页导航图特效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与定位动画的奇怪现象的更多相关文章
- 【奇怪现象】用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段,用电信却只有:__VIEWSTATE。【正常】?原因?
[奇怪现象]用联通访问某些ASP.NET网站会产生__EVENTVALIDATION字段,用电信却只有:__VIEWSTATE.[正常]?原因? 对于__VIEWSTATE和__EVENTVALIDA ...
- 同时对view延时执行两个动画时候的现象
同时对view延时执行两个动画时候的现象 对于view延时执行了两个动画后,会将第一个动画效果终止了,直接在第一个动画的view的最后的状态上接执行后续的动画效果,也就是说,我们可以利用这个特性来写分 ...
- 发现个delphi调用vc写的Dll中包括pchar參数报错奇怪现象
发现个delphi调用vc写的Dll中包括pchar參数奇怪现象 procedure中的第一行语句不能直接调用DLL的函数,否则会执行报错,在之前随意加上条语句就不报错了奇怪! vc的DLL源代码地址 ...
- for循环产生的Cortex-M3汇编代码的一个奇怪现象
最近比较一下KEIL和IAR两个编译器产生的代码,基于Cortex-M3处理器的,然后发现了一几个奇怪的地方. 很简单的一个C的for循环 void fun_for_add_65535(void) { ...
- PHP 浮点型转整型的一个奇怪现象
起因 最近通过一个学长的题了解php弱类型的时候,发现了一个奇怪的现象. 正文 主要问题在这样一段代码: $c=(int)((0.1+$b)*10); 当$b=0.6,0.8以及其他值的时候都正常 将 ...
- CSS Float浮动所带来的奇怪现象
先抛个例子出来 运行下面的例子后,可以看到输出内容如下. <!DOCTYPE html> <html lang="en"> <head> < ...
- SAP MM 并非奇怪现象之MB5B报表查不到某一笔出库记录?
物料号:1301002696 工厂代码:2160 MB5B,如下查询条件, 查询结果中,期初与期末库存数量都是0,期间的出库入库数量都是0.事实上该物料期初应该是有库存的.并且我用MB51相同时间段查 ...
- zookeeper集群安装的奇怪现象
zookeeper:配置的集群信息是domain:端口2888:端口3888: domain为内网静态ip:每次启动都不能相互连接报错误: [myid:3] - WARN [WorkerSende ...
- cygwin下调用make出现的奇怪现象
<lenovo@root 11:48:03> /cygdrive/d/liuhang/GitHub/rpi_linux/linux$make help 1 [main] make 4472 ...
随机推荐
- SDL 开发实战(七): SDL 多线程与锁机制
为什么要用多线程?在音视频领域主要是实现音视频同步.实现了音视频同步,我们的播放器就基本上合格了. 这里我们将讲解一下SDL的多线程与锁机制. 多线程的好处主要是能使程序更加充分利用硬件(主要是CPU ...
- #Java学习之路——基础阶段二(第四篇)
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- JavaSE:八种基本数据类型
变量: 程序用来存储数据的一块内存空间,程序在运行过程中可以对其存储的数据进行改变,所以叫做变量 常量:相对于变量来说,其值是不可改变的 整数类型(byte short int long) b ...
- 小乌龟git
一.概念 分布式版本控制系统.诞生于Linux社区,有兴趣可以去了解下git的前世今生. 与集中式版本控制有明显区别.集中式:集中管理的服务器,保存所有的修订版本,协同工作的人通过客户端连接服务器,取 ...
- Java读取Excel的另一种方法
除了用poi读取Excel的表格外,还可用ExcelHelper读取Excel.代码一例 String[] fieldNames = new String[] { "studentId&qu ...
- ASP.NET Core 3.0 上的gRPC服务模板初体验(多图)
早就听说ASP.NET Core 3.0中引入了gRPC的服务模板,正好趁着家里电脑刚做了新系统,然后装了VS2019的功夫来体验一把.同时记录体验的过程.如果你也想按照本文的步骤体验的话,那你得先安 ...
- 知识小罐头09(tomcat8启动源码分析 下)
初始化已经完成,现在就是启动这些组件,Tomcat中的start方法就是用于启动的,其实start的原理还是和上一篇说的初始化几乎一样!这里我就大概说一下,看几个比较关键的地方就行了. 前面的步骤就大 ...
- 以太坊工作原理之txpool详解
txpool详解 交易池txpool作为区块链系统的重要组成部分,对系统的安全性和稳定性具有重要作用.功能可归纳为:交易缓存.交易验证和交易过滤. 基本介绍 交易分类和缓存 txpool主要包含两个重 ...
- 剑指 offer 第一题: 二维数组中的查找
打算写 图解剑指 offer 66 题 的系列文章,不知道大家有没有兴趣
- 用VS2017进行移动开发(C#、VB.NET)——Progress控件,Smobiler移动开发
Progress控件 一. 样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个Progress控件到窗体界面上 修改Pr ...