关于: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 ...
随机推荐
- Identity Server 4 预备知识 -- OpenID Connect 简介
我之前的文章简单的介绍了OAuth 2.0 (在这里: https://www.cnblogs.com/cgzl/p/9221488.html), 还不是很全. 这篇文章我要介绍一下 OpenID C ...
- nginx 报错502Bad Gateway
场景: 目前在ECS中起了多个node服务,使用forever进程守护,最近,打开线上页面发现报错502 Bad Gateway;同时部分静态资源访问不到.(之前可以的): 解决: 首先查看nginx ...
- 广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...
- springboot~ EventListener事件监听的使用
EventListener事件触发和监听器可以对代码解耦,在一些与业务无关的,通用的操作方法,我们可以把它设计成事件监听器,像通知,消息这些模块都可以这样设计. 事件源 @Getter @Builde ...
- 如何让vue自定义组件可以包裹内容，并且渲染出来，以及组件的组合使用
当我们用vue一开始写项目时,按需求文档自定义了一个公用组件,这个组件很多地方都用到了,然后随着项目的推进,又有了新的需求要在里面加东西,但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓ ...
- 全文检索-Elasticsearch （三） DSL
DSL:elasticsearch查询语言elasticsearch对json 的语法有严格的要求,每个json串不能换行,同时一个json串和一个json串之间,必须有一个换行 DSL(介绍查询语言 ...
- Data Lake Analytics + OSS数据文件格式处理大全
0. 前言 Data Lake Analytics是Serverless化的云上交互式查询分析服务.用户可以使用标准的SQL语句,对存储在OSS.TableStore上的数据无需移动,直接进行查询分析 ...
- Docker最全教程之使用Tencent Hub来完成CI(九）
使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...
- AngularJS 截取字符串
参考文章:https://blog.csdn.net/u010234516/article/details/54631525 //过滤器 app.filter('textLengthSet', fun ...
- jQuery(一)、核心
我认为,学习一门语言,主要是掌握它的思想与用途,就好比谈恋爱一样,你只要猜测到了对方的想法,就能够知情达意.废话不多说,我们开始今天学习的进度,加油ヾ(◍°∇°◍)ﾉﾞ 1. jQuery([sele ...