html+css3跑马灯(抖音我们的照片记录幸福到永远)

1，效果图

2，介绍
主要通过css3动画属性实现，中间这个人物是通过窗口定位固定在哪里的。
由于谷歌浏览器为优化用户体验禁止audio中的autoplay属性，所以下面直接加了一个audio，点击即可播放。

3,html部分(这里可以更改为自己喜欢的图片)

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我们的照片记录幸福到永远</title></head><body><div class="box"><div class="play1"><ul><li><img src="img/banner1.jpg" alt=""></li><li><img src="img/banner2.jpg" alt=""></li><li><img src="img/banner3.jpg" alt=""></li><li><img src="img/banner4.jpg" alt=""></li><li><img src="img/banner5.jpg" alt=""></li><li><img src="img/banner6.jpg" alt=""></li><li><img src="img/banner7.jpg" alt=""></li><li><img src="img/banner8.jpg" alt=""></li><li><img src="img/banner9.jpg" alt=""></li><li><img src="img/banner10.jpg" alt=""></li><li><img src="img/banner1.jpg" alt=""></li><li><img src="img/banner2.jpg" alt=""></li><li><img src="img/banner3.jpg" alt=""></li><li><img src="img/banner4.jpg" alt=""></li></ul></div><div class="play2"><ul><li><img src="img/banner17.jpg" alt=""></li><li><img src="img/banner18.jpg" alt=""></li><li><img src="img/banner19.jpg" alt=""></li><li><img src="img/banner20.jpg" alt=""></li><li><img src="img/banner11.jpg" alt=""></li><li><img src="img/banner12.jpg" alt=""></li><li><img src="img/banner13.jpg" alt=""></li><li><img src="img/banner14.jpg" alt=""></li><li><img src="img/banner15.jpg" alt=""></li><li><img src="img/banner16.jpg" alt=""></li><li><img src="img/banner17.jpg" alt=""></li><li><img src="img/banner18.jpg" alt=""></li><li><img src="img/banner19.jpg" alt=""></li><li><img src="img/banner20.jpg" alt=""></li></ul></div><div class="play3"><ul><li><img src="img/banner21.jpg" alt=""></li><li><img src="img/banner22.jpg" alt=""></li><li><img src="img/banner23.jpg" alt=""></li><li><img src="img/banner24.jpg" alt=""></li><li><img src="img/banner25.jpg" alt=""></li><li><img src="img/banner26.jpg" alt=""></li><li><img src="img/banner27.jpg" alt=""></li><li><img src="img/banner28.jpg" alt=""></li><li><img src="img/banner29.jpg" alt=""></li><li><img src="img/banner30.jpg" alt=""></li><li><img src="img/banner21.jpg" alt=""></li><li><img src="img/banner22.jpg" alt=""></li><li><img src="img/banner23.jpg" alt=""></li><li><img src="img/banner24.jpg" alt=""></li></ul></div></div><img src="img/hero2.png" class="hero"  alt=""><audio src="audio/zaijian.mp3" autoplay="autoplay" loop="loop" controls="con">当前浏览器不支持audio</audio></body>
</html>

4，css部分

 <style type="text/css">* {margin: 0;padding: 0;}ul{display: flex;}li {width: 400px;height: 200px;list-style: none;flex-shrink: 0;padding: 0 5px;box-sizing: border-box;}img {width: 100%;height: 100%;object-fit: cover;}.box{width: 100%;height: 728px;display: flex;flex-direction: column;justify-content: space-evenly;overflow: hidden;}.box div{width: 100%;height: 200px;}.play1{animation: action1 40s infinite linear;}.play2{transform: translateX(-4000px);animation: action2 40s infinite linear;}.play3{animation: action1 40s infinite linear;}@keyframes action1{to{transform: translateX(-4000px);}}@keyframes action2{to{transform: translateX(0px);}}.hero{position: fixed;bottom: 0;left: 50%;margin-left: -500px;width: 800px;height: 600px;}</style>

记录每一个前端小案例！

html+css3跑马灯(抖音我们的照片记录幸福到永远)相关推荐

CSS3动画解析抖音 LOGO制作
为什么80%的码农都做不了架构师?>>> 前言 "字节跳动"现今也是如日中天,旗下产品,除头条外,还有短视频平台"抖音",人气也是非常高 ...
抖音怎么把照片做成视频？超火的照片切换教程，3分钟就能搞定
抖音怎么把照片做成视频?怎么上传照片视频到抖音?抖音上很吸赞的照片切换效果怎么做? 今天教大家3分钟做出一个抖音上比较热门的照片视频,用到的工具是数码大师. 第一步:把照片一次性添加进来打开数码大师 ...
抖音查举报记录？解密抖音查被举报记录灰产
抖音查举报记录?解密抖音查被举报记录灰产[反诈骗,大家小心] 我们平时刷短视频/直播的时候,经常会刷到一些影响三观或者负能量的视频/直播,对于这种视频,看不惯的人会向平台投诉请平台对该视频进行处罚例 ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
（3年工作经验）天天下班刷抖音，不如亲自跑去抖音瞧一瞧！
面试准备,基础点到为止,只要不答得很差就没事.主要还是算法,基本上每轮两个算法题,白板写代码,要运行的那种,还是挺有压力. 不得不说字节面试效率很高.节奏很快,一下午一面二面连着面试,之后隔两天就三面 ...
抖音APP逆向资料记录
整理于2020年10月下旬,献给不甘平凡的你更多企业级爬虫知识请查收于:https://blog.csdn.net/weixin_45316122/article/details/109840745 ...
uniapp生成抖音小程序问题记录
input标签在ios不显示在开发工具和安卓上input标签可以正常显示,但是在ios上发现input标签不显示. 解决办法:给input加上宽度: 原因大概是抖音小程序的input输入框没有宽度, ...
抖音网红大蓝称视频号永远都做不起来
最近杰哥从微商大佬龚文祥爆料了解到,抖音头部知识付费网红大蓝最近跟视频号杠上了,大蓝发视频表示,视频号永远都做不起来,视频号给抖音提鞋都不配,因为字节跳动短视频技术一直高于腾讯,视频号永远无法超越! ...

html+css3跑马灯(抖音我们的照片记录幸福到永远)

html+css3跑马灯(抖音我们的照片记录幸福到永远)相关推荐

最新文章

热门文章