走马灯的实现

最新推荐文章于 2023-08-23 16:39:10 发布

debbyDeng

最新推荐文章于 2023-08-23 16:39:10 发布

阅读量1.3k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/debbyDeng/article/details/53508954

版权

该博客展示了如何使用HTML5和CSS3实现走马灯（轮播）效果。通过CSS3的transform属性和关键帧动画创建了水平滚动的文字走马灯，以及3D旋转的图片展示效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maxium-scale=1,user-scalable=no">
    <title>bootstrap</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        body{
            background: #494A5F;
            color: #D5D6E2;
        }
        .marquee{
            -webkit-perspective:500px;
            font-size: 0;
        }
        .marquee>div{
            width:30rem;
            height:12rem;
            display:inline-block;
            position:relative;
            background: #e5233e;
            overflow: hidden;
        }
        .marquee div:first-child{
            transform:rotateY(-30deg);