html5——动画案例（无缝滚动）
无缝滚动：是两组拼在一起的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} div {
width: 300px;
height: 50px;
margin: 200px auto;
overflow: hidden;
} ul {
list-style: none;
width: 620px;
height: 50px;
animation: gun 3s infinite linear;
} li {
float: left;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font: 500 20px/50px "Microsoft YaHei UI";
} @keyframes gun {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-300px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li>无</li>
<li>缝</li>
<li>滚</li>
<li>动</li>
<li>效</li>
<li>果</li>
<li>无</li>
<li>缝</li>
<li>滚</li>
<li>动</li>
<li>效</li>
<li>果</li>
</ul>
</div>
</body>
</html>
html5——动画案例（无缝滚动）的更多相关文章
- CSS3动画之无缝滚动
与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- html5——动画案例（时钟）
1.秒钟转360度需要60s分60步 2.分针转360度需要3600s分60步 3.秒钟转360度需要43200s分60步 <!DOCTYPE html> <html lang=&q ...
- html5——动画案例（大海）
太阳的发散效果主要是利用transform: scale(1.3),将物体变大 <!DOCTYPE html> <html lang="en"> <h ...
- html5——动画案例（太阳系）
太阳系主要利用定位,伪元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
随机推荐
- 用XAMPP+Wordpress搭建个人博客
http://biancheng.dnbcw.info/php/456308.html http://jingyan.baidu.com/article/f71d60376ba9571ab641d11 ...
- 实用型的DJANGO ORM
比较深入一点的内容,需要用时,用心看看. URL: https://www.sitepoint.com/doing-more-with-your-django-models/ https://www. ...
- kendo grid 点击更新没有反映
因为没有在dataSource上写schema schema: { model: { id: "DeptId", fields: { CompanyId: { editable: ...
- OpenCV基础篇之像素操作对照度调节
程序及分析 /* * FileName : contrast.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Tue 29 ...
- 这篇讲angular 的$q的讲得不错
原文: https://segmentfault.com/a/1190000000402555 ---------------------------------------------------- ...
- [LeetCode][Java] N-Queens II
题目: Follow up for N-Queens problem. Now, instead outputting board configurations, return the total n ...
- LeetCode 141. Linked List Cycle （链表循环）
Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...
- Java课程设计——人事管理系统
主界面代码: package PersonSystem; import java.awt.*; import java.awt.event.*; import javax.swing.*; impor ...
- POJ 2007 Scrambled Polygon（简单极角排序）
水题,根本不用凸包,就是一简单的极角排序. 叉乘<0,逆时针. #include <iostream> #include <cstdio> #include <cs ...
- Asp.NET之对象学习
一.总述 二.具体介绍 1.Request对象 Request对象是用来获取client在请求一个页面或传送一个Form时提供的全部信息,这包含可以标识浏览器和用户的HTTP变量,存储在client的 ...