html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例
1. 需求
一张图片从左向右无限循环移动
2. 代码
由于是应用在移动端,故使用rem单位,后面问题也发生在这。
HTML
CSS
.dog {
width: 5.4rem; \\图片宽度
height: 3.04rem; \\图片高度
background-image: url(head.jpg);
background-size: 5.4rem 3.04rem; \\图片宽高
background-position: -5.4rem 0;
animation: run 2s linear infinite;
}
@keyframes run {
from {background-position: -5.4rem 0;}
to {background-position: 0 0;}
}
3. 问题
在PC端,是没有问题的,但是在移动端(可能是重新计算字体大小导致的?)会发现移动速度与所设置的不一致,并且图片无法实现无缝。
4. 原因
未知,没找到相关资料,目测是动态计算font-size引起的问题。
5. 解决
经过测试发现若是在文件加载完毕后,给图片添加上动画则是正常。故修改代码:
JS
$(document).ready(function(){
remReSize();
setTimeout(function() {
$('.dog').css('animation', 'run 2s linear infinite');
}, 0);
});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html背景图片循环自动播放,CSS动画实现背景无缝无限循环的实现示例相关推荐
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- html 背景图片不重复显示,css如何设置背景图片不重复?
css设置背景图片,默认的样式是图片重复,有的时候页面只需要一个不重复的背景图片,这就需要使用到css背景图片重复属性background-repeat: no-repeat;进行设置. css使用b ...
- css背景颜色占全部屏幕,css怎样让背景充满整个屏幕
炫酷时钟 body{ height: 100%;color: #51555c; background: url("./img/bg1.png") no-repeat; /* 背景图 ...
- html 网页背景图片根据屏幕大小CSS自动缩放
腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的.先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好. 前几天用CSS研究出相同效果的样式代码 ...
- YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放 设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
- Android之app引导页(背景图片切换加各个页面动画效果)
转载:http://blog.csdn.net/lowprofile_coding/article/details/48037095 先看效果图: 1.显示三个页面的Activity 用view p ...
- vue 使用video加载视频进行展示,视频循环自动播放
vue 使用video加载视频进行展示,视频循环自动播放loop autoplay <span v-else-if="item.prop === 'alarmVedio'"& ...
- php图片背景平铺,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
最新文章
- Selenium 2 WebDriver 多线程 并发
- UITableView优化
- Go go-metrics
- php 有indexof函数吗,详解PHP处理字符串类似indexof的方法函数
- php srem,SREM命令_视频讲解_用法示例-redis编程词典-php中文网
- Odoo 去掉 恼人的 上午和下午
- apache-apollo Dockfile 镜像制作
- C语言常见面试题汇总
- 图相似度模型(论文篇)
- kgm转mp3安卓_酷狗KGM转MP3格式工具电脑版
- 八皇后——(第一场 递归与回溯)
- 鼠标单击双击事件监听
- Intel无线网卡linux,Deepin 15.8/Ubuntu 18.04用intel无线网卡9260ac速度跑不满的解决
- 微信扫描小程序码登录 PC 网站 Demo
- Codeforces 855G Harry Vs Voldemort 边双连通分量+并查集
- ZBrush笔刷属性栏简介
- iphone之Info.plist的属性
- Oracle操作语句(PL/SQL)创建表空间:第 1 行出现错误: ORA-01119: 创建数据库文件时出错 ORA-27040: 文件创建错误, 无法创建文件OSD-04002: 无法打开文件
- C++顺序栈的实现(进栈,出栈,判断栈空,打印输出,获取栈顶元素)
- codeforces_#242 (Div. 2)