走马灯相册（CSS3D效果）

最新推荐文章于 2024-04-02 06:53:13 发布
最新推荐文章于 2024-04-02 06:53:13 发布
阅读量795 收藏 7
点赞数 2
分类专栏： css3 css 文章标签： css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50821119/article/details/111332034
版权
css 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
css3
13 篇文章 0 订阅
订阅专栏

如下效果图

在这里插入图片描述

实现原理

通过CSS3D属性，定位图片位置，通过动画让盒子一直旋转。

  • 新建一个ul，内置6个li。每个li加一个背景图片。
  <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ul>

  • 全部定位到一个位置。页面上显示的2D页面。也就是跑马灯的正面。

  • 从顶部看走马灯，就是一个六边形，只不过六个边是一个立体的面，也就是最下边的那条边
    在这里插入图片描述

  • 以上图为准，

  • 由于li定位在一个位置，正面为图片，反面空白，当跑马灯旋转到第2张图片看到的应该是正面.

  • 第1张图片，不需要旋转，直接位移Z轴正方向600px。

  transform: translateZ(600px);
  • 第2张图片，位移Z轴负方向600px，旋转180deg，
    切记，旋转与位移顺序不要写反了
 transform: translateZ(-600px) rotateY(180deg);
  • 4与6旋转角度相同。
 图片6    transform: rotateY(60deg) translateZ(-600px);

图片4
 transform: rotateY(60deg) translateZ(600px);
  • 3与5旋转角度相同。
 图片3    transform: rotateY(-60deg) translateZ(600px);

图片5
 transform: rotateY(-60deg) translateZ(-600px);
  • 添加3D展示。
            transform-style: preserve-3d;

-给ul添加动画，让它动起来，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: linear-gradient(76.8deg, rgb(121, 45, 129) 3.6%, rgb(36, 31, 98) 90.4%);
        }
        
        ul {
            list-style: none;
            width: 400px;
            height: 400px;
            margin: 0 auto;
            margin-top: 200px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-10deg);
            animation: spin 6s infinite linear;
        }
        
        @keyframes spin {
            to {
                transform: rotateX(-10deg) rotateY(360deg);
            }
        }
        
        ul:hover {
            animation-play-state: paused;
        }
        
        li {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        
        li:nth-child(1) {
            transform: translateZ(600px);
            background: url(./img/pic-1.jpg) no-repeat;
            background-size: 400px 400px;
        }
        
        li:nth-child(2) {
            transform: translateZ(-600px) rotateY(180deg);
            background: url(./img/pic-2.jpg)no-repeat;
            background-size: 400px 400px;
        }
        
        li:nth-child(3) {
            transform: rotateY(60deg) translateZ(-600px);
            background: url(./img/pic-3.jpg)no-repeat;
            background-size: 400px 400px;
        }
        
        li:nth-child(4) {
            transform: rotateY(60deg) translateZ(600px);
            background: url(./img/pic-4.jpg)no-repeat;
            background-size: 400px 400px;
        }
        
        li:nth-child(5) {
            transform: rotateY(-60deg) translateZ(-600px);
            background: url(./img/pic-5.jpg)no-repeat;
            background-size: 400px 400px;
        }
        
        li:nth-child(6) {
            transform: rotateY(-60deg) translateZ(600px);
            background: url(./img/pic-6.jpg)no-repeat;
            background-size: 400px 400px;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ul>
</body>

</html>
云杰8了
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue 实现走马灯效果
12-30
Part.1  问题 在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2  实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3  代码 HTML <template> <div class=home> <div class=home-box> <div xss=removed> <div class=marquee> <div class=marquee_box> <ul class=marquee_list
css3 实现3d动态的走马灯效果
11-11
css3 实现3d走马灯效果，完全使用css3实现 设置xyz方向
前端游戏巨制! CSS居然可以做3D游戏了，意外的惊喜
最新发布
2401_84023920的博客
04-02 566
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】+ ') ';复制代码到这里, 我们的玩家盒子已经可以移动了.自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
css3 3d走马灯,CSS3——3D旋转图（跑马灯效果图）
weixin_32098599的博客
08-04 1436
CSS3新增了很多新的属性，可以用很少的代码实现炫酷的动画效果，但由于兼容性各浏览器的能力存在不足，有特别需求的网站就呵呵啦。H5C3已是大势所趋了，之前看过一个新闻，Chrome将在年底全面转向H5，抛弃了Flash。。本案例主要使用了CSS3中的变换transform和动画animation属性，实现了跑马灯效果，详细的解释在代码中的注释中。做好布局之后的效果图 添加了animation样式，...
用CSS 2D 3D实现一个简单的跑马灯效果页面
周五星的博客
03-31 212
跑马灯 使用了定位+2d+3d+动画 animation-name:规定@keyframes动画的名称； animation-duration：规定动画完成一个周期所花费的时间 animation-timing-function：规定动画的速度曲线，默认是“ease”，linear均速： animation-delay：规定动画何时开始，默认是0； animation-iteration-co...
走马灯相册
11-02
使用JavaScript和CSS制作的图片走马灯，鼠标向左则向左走动，鼠标向右则向右走动。但是不可以循环滚动。
相册跑马灯效果
weixin_30326515的博客
03-30 125
<!doctype html> <html lang="en"> <head> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> ...
前端每日实战：7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
weixin_33762130的博客
04-29 157
效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cWkn...
CSS3超酷3D文字跑马灯特效
12-13
这是一款使用纯CSS3制作的超酷3D文字跑马灯特效。该跑马灯特效将跑马灯背景制作为3D立方体效果，文字在上面移动时，就像是文字投影到墙壁上，在转角出会改变运动方向。
纯css3实现走马灯效果
12-13
纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下： 主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-...
跑马灯图片展示-10种切换特效
11-09
跑马灯图片展示-10种切换特效 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
简单图片跑马灯效果
11-28
jquery开发简单图片跑马灯效果
纯css图片无缝走马灯效果源码
11-11
纯css图片无缝走马灯效果源码，无需js控制，完美效果
HTML+CSS图片无缝走马灯效果.rar
06-30
实现HTML图片无缝走马灯效果的简明代码，集成使用方便快捷！
css3 3d走马灯,【CSS练习】如何用纯 CSS 创作一个 3D 文字跑马灯特效
weixin_39713763的博客
08-04 211
知识点1.white-space 属性normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。transform允...
CSS3——3D旋转图（跑马灯效果图）
weixin_34308389的博客
08-24 1185
2019独角兽企业重金招聘Python工程师标准>>> ...
用html和css写一个走马灯效果
06-09
以下是一个简单的走马灯效果，使用HTML和CSS实现： HTML代码： ``` <div class="slider"> <ul> <li>第一张图片</li> <li>第二张图片</li> <li>第三张图片</li> </ul> </div> ``` CSS代码： ``` .slider { width: 600px; height: 300px; overflow: hidden; } ul { list-style: none; margin: 0; padding: 0; width: 180%; animation: slide 10s linear infinite; } li { float: left; width: 33.33%; height: 300px; text-align: center; font-size: 24px; line-height: 300px; } @keyframes slide { 0% { transform: translateX(0%); } 33.33% { transform: translateX(-100%); } 66.66% { transform: translateX(-200%); } 100% { transform: translateX(0%); } } ``` 解释： - 首先，我们创建一个包含三张图片的`<ul>`列表，并将其放置在一个宽度为

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值