CSS3动画animation语音滚动

最新推荐文章于 2024-06-12 10:15:41 发布

昌子玩前端

最新推荐文章于 2024-06-12 10:15:41 发布

阅读量3.6k

点赞数

分类专栏： Css3

本文链接：https://blog.csdn.net/weixin_38047955/article/details/68962171

版权

Css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

现的图像动画效果大致是这样的：语音滚动！

【代码效果】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画animation语音滚动</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.rd_item{background-color: #959595;border-radius: 32px;width: 380px;height: 72px;display: inline-block;vertical-align: middle;position: relative;}
.rd_item_center{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOgAAAA6CAYAAAC6XxVcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAB/UlEQVR42u3czW7UMBQG0BiNyqYIBHt4/8fiAbrgZwMbs0BCo6qpxiWuPzvn7OLFzZ1MvrE9k7ZsRKq11uvjUkoZ3ROv783oBoB9AgrBBBSCCSgEE1AIJqAQTEAhmIBCMAGFYAIKwQQUggkoBBNQCHYZ3QBt/JXLuZhBIZiAQjBL3MEsWXmOGRSCmUEXN8sMXWv99ajPtyuf91YCSoq7pwb3AtQ63nreFAK6iN4z5V791vO+oM+7g8ZbX++PR32+O6Juq2EBPeqGmmUJNwvvyz/3oxvYtlcI6AJv1JKvd5Y+z+7SunQ5aqmzp3edUTemQIxVa324Pi6lfDqyTq8cTbMH7b0n2Kufshfhv30Mq3OTaQK69d8T3LeM11q/Xh+XUr6MuCisbaaApvk8ugHW50kiCCagEExAIZg96Mt9H90A65spoD8H1X9yvJTyfuzl4AymCWjv3x/36vvdcxnfwurc5LL3RMtR46161xn1BI8nh8YqpXzoWadXjrrPoGe7MWd5vbP0eXbDlrhpMy5/tV7PtJXKgX6PbmDbJtqD8rzegTjbB2rKf1YQUKKN+i4khYAubpYb1pd3T/MkEQQzgw6W/gnOWGZQCCagEMwSdzKWxOdiBoVgAgrBBBSCCSgEE1AIJqAQTEAhmIBCMAGFYAIKwQQUggkoBBNQCPYHrQOkxB24s9gAAAAASUVORK5CYII=);
background-repeat: repeat-x;
width: 232px;
height: 58px;
margin: 7px auto 0;
animation:roll 2s linear infinite;
}
@keyframes roll{
    from{background-position:1px 0px}
    to{background-position:236px 0px}
}
</style>
</head>
<body>
<div class="rd_item">
                    <div class="rd_item_center"></div>
                </div>
</body>
</html>

昌子玩前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3动画animation语音滚动

现的图像动画效果大致是这样的：语音滚动！【代码效果】 CSS3动画animation语音滚动html,body {padding: 0;margin: 0;}.rd_item{background-color: #959595;border-radius: 32px;width: 380px;height: 72px;display: inline-block
复制链接

扫一扫