html +css简易的旋转相册鼠标放上可暂停

最新推荐文章于 2023-04-15 23:40:51 发布

青衫已湿，卿未见

最新推荐文章于 2023-04-15 23:40:51 发布

阅读量293

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_58307405/article/details/129611735

版权

该博客介绍了如何使用HTML和CSS创建一个简单的旋转相册，鼠标悬停时可暂停展示。通过调整角度和背景设置，可以自定义相册样式，并能为图片添加超链接，适合初学者实践。

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

成品图片显示

css设置如下

其中可以更改图片以及背景颜色或是背景图片

若是想添加图片更改其中的角度（10张照片平分360度在翻转时每次翻转36度即可）

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            /* 此处可以更换背景颜色或是背景图片 */
            background-image: url(./img/04.jpg);
            /* 实现3d效果 添加视口 网页默认为2d效果
            prespective 3d元素距离视图的距离 为元素定义该属性时 子元素会获得透视效果 而不是元素本身
            */
            perspective: 800px;
        }
        /* 创建关键帧 */
        @keyframes rotates {
            0%{transform: rotateX(-20deg) rotateY(0eg)}
            25%{transform: rotateX(20deg) rotateY(90deg)}
            50%{transform: rotateX(-20deg) rotateY(180deg)}
            100%{transform: rotateX(20deg)