文档章节

h5-动画小案例-滚动展示

o
 osc_wws45aot
发布于 2019/08/20 15:31
字数 338
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.html区域

 1 <div>
 2     <ul>
 3         <li><img src="../img/a.jpg" alt=""></li>
 4         <li><img src="../img/b.jpg" alt=""></li>
 5         <li><img src="../img/c.jpg" alt=""></li>
 6         <li><img src="../img/d1.jpg" alt=""></li>
 7         <li><img src="../img/e.jpg" alt=""></li>
 8         <li><img src="../img/f.jpg" alt=""></li>
 9         <li><img src="../img/g.jpg" alt=""></li>
10         <li><img src="../img/h.jpg" alt=""></li>
11         <li><img src="../img/a.jpg" alt=""></li>
12         <li><img src="../img/b.jpg" alt=""></li>
13         <li><img src="../img/c.jpg" alt=""></li>
14         <li><img src="../img/d1.jpg" alt=""></li>
15         <li><img src="../img/e.jpg" alt=""></li>
16         <li><img src="../img/f.jpg" alt=""></li>
17         <li><img src="../img/g.jpg" alt=""></li>
18         <li><img src="../img/h.jpg" alt=""></li>
19     </ul>
20 </div>

2.css代码区域

 1     <style>
 2         *{
 3             padding: 0;
 4             margin: 0;
 5         }
 6         img{
 7             width: auto;
 8             height: 155px;
 9         }
10         div{
11             width: 1480px;
12             height: 155px;
13             margin: 100px auto;
14             background-color: #ddd;
15             overflow: hidden;
16         }
17         div > ul{
18             width: 200%;
19             list-style: none;
20 
21             /*添加动画*/
22             /*名字*/
23             animation-name: move;
24             /*耗时*/
25             animation-duration: 7s;
26             /*无限循环*/
27             animation-iteration-count: infinite;
28             /*时间函数*/
29             animation-timing-function: linear;
30         }
31 
32         div > ul > li{
33             width: auto;
34             float: left;
35         }
36 
37         div > ul >li > img{
38             height: 100%;
39         }
40 
41         /*鼠标上移,停止动画*/
42         div:hover > ul{
43             /*修改鼠标样式*/
44             cursor: pointer;
45             /*暂停动画*/
46             animation-play-state: paused;
47         }
48 
49         /*创建动画*/
50         @keyframes move {
51             from{
52                 transform: translateX(0);
53             }
54             to{
55                 transform: translateX(-1480px);
56             }
57         }
58 
59     </style>

效果图:一只滚动,鼠标悬浮及停止滚动

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Spark Summit North America 202006 高清 PPT 下载

为期五天的 Spark Summit North America 2020在美国时间 2020-06-22 ~ 06-26 举行。由于今年新冠肺炎的影响,本次会议第一次以线上的形式进行。这次会议虽然是五天,但是前两天是培训,后面三...

osc_z9t307rr
15分钟前
14
0
矩阵计算与AI革命:可将计算性能提高150倍的异构计算

本文翻译自Wikibon矩阵计算与AI革命系列研究文章。 如今异构计算(Heterogeneous Compute,HC)已经部署在消费类移动设备中,与传统架构相比可以将矩阵工作负载的性能提高50倍。同时,这也将...

osc_ml6lx2h4
16分钟前
11
0
smart 后台 使用说明

乐观锁 说明 如果想实现如下需求: 当要更新一条记录的时候,希望这条记录没有被别人更新,确保当前只有一个人在操作。 乐观锁的实现原理: 取出记录时,获取当前 version 2 更新时,带上这个 ...

奔跑的android
17分钟前
0
0
关于win10的hype-v与VMWARE启动冲突的解决方法

升级win10后,在卸载hype-v重启电脑后仍然报错,解决的办法是只需要直接使用管理员身份打命令提示符,然后执行以下命令即可: bcdedit /set hypervisorlaunchtype off...

osc_l7zl78wt
18分钟前
16
0
操作系统设计中的加电引导

作者:丁宋涛 系统启动过程概述 在掀下电脑开机按钮后,电源就会开始向主板和其他外围设备供电。初始状态下的电压还不太稳定,因此并不会立即开始指令的执行。此时,主板上的控制芯片组会发出重...

osc_kz2s8mnr
20分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部