CSS3简单魔方动画效果

最新推荐文章于 2022-07-22 17:59:07 发布

Inory_ye

最新推荐文章于 2022-07-22 17:59:07 发布

阅读量433

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Inory_ye/article/details/111601303

版权

本文介绍了如何使用CSS3创建简单的魔方动画效果。通过在body中添加元素并定义样式，利用背景图片、定位和动画关键帧实现鼠标悬停时的变换。详细步骤包括设置元素布局、li的样式调整以及动画的触发和视角设定。

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

CSS简单魔方效果

在这里插入图片描述

在魔方效果中我们主要用到的是animation动画，transition(过渡)，transform(变换)

首先我们在body里面下我们需要的标签元素


<body>
   <!--这里也可以用div写 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

写好后我们在style标签里写我们所需要的的样式

先给ul设置我们所需要的样式让它相对页面居中

<style>

     ul {
   
            width: 250px;
            height: 250px;
            transform-style: preserve-3d;//3d效果
            position: relative;
            /*在这里给父级设置相对定位是为了后面给li设置
            绝对定位时让li以ul的左顶点进行位置偏移*/
            margin: 300px auto;
            padding: 0;  //这里我们给ul设置内边距为0         
        }
</style>

给父级设置好样式后我们现在来给li设置样式，因为在鼠标还没有触碰到是只是一张图片，所以这里我们要给li背景图片，这里这里我是写在标签选择器里的，刚开始每个li都堆叠在一起所以只会看到一张图片。

<style>
      li {
   
            position: absolute;
            width: 250px;
            height: 250px;
            list-style: none;//去除li前面的符号
            transform-origin: center center;//旋转的中心点
            background-image: url(web/9.jpg);
            background-size: 100