用css做一个3d相册

最新推荐文章于 2024-06-18 12:33:46 发布

土豆才不土

最新推荐文章于 2024-06-18 12:33:46 发布

阅读量855

点赞数 1

本文链接：https://blog.csdn.net/qq_45256777/article/details/119301970

版权

用css做一个简单的3D相册

话不多说，先看代码

	 <style>
        @keyframes anima {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        body {
            perspective: 800px;
            transform-style: preserve-3d;
        }
        
        .box {
            margin: 300px auto;  
            width: 300px;
            height: 200px;
            transform: rotateX(20deg);
            transform-style: preserve-3d;
            animation: anima 16s linear infinite;
        }
        
        .box img {
            position: absolute;
            width: 300px;
            height: 200px;
        }
        
        .box img:nth-child(1) {
            transform: rotateY(45deg) translateZ(500px);
        }
        
        .box img:nth-child(2) {
            transform: rotateY(90deg) translateZ(500px);
        }
        
        .box img:nth-child(3) {
            transform: rotateY(135deg) translateZ(500px);
        }
        
        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
        }
        
        .box img:nth-child(5) {
            transform: rotateY(225deg) translateZ(500px);
        }
        
        .box img:nth-child(6) {
            transform: rotateY(270deg) translateZ(500px);
        }
        
        .box img:nth-child(7) {
            transform: rotateY(315deg) translateZ(500px);
        }
        
        .box img:nth-child(8) {
            transform: rotateY(360deg) translateZ(500px);
        }
        
        .box img:nth-child(9) {
            transform: rotateY(0) translateZ(0);
            animation: img9 16s infinite linear;
        }
        
        @keyframes img9 {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="1.jpeg" alt="">
        <img src=".2.jpeg" alt="">
        <img src="3.jpeg" alt="">
        <img src="4.jpeg" alt="">
        <img src="5.jpeg" alt="">
        <img src="6.jpeg" alt="">
        <img src="7.jpeg" alt="">
        <img src="8.jpeg" alt="">
        <img src="9.jpeg" alt="">
    </div>
</body>

这主要就是一个transforms属性的使用，让每个图片绕y轴旋转一定的角度，再通过移动z轴达到3d的静态效果，还得在父级上加上 perspective、 transform-style: preserve-3d;这两个属性，perspective 属性定义 3D 元素距视图的距离，transform–style属性指定嵌套元素是怎样在三维空间中呈现。这样再加上一个动画旋转效果，一个简单的3d动态相册就做好了。

2.用css做一个简单的进度条效果
话不多说，先看代码

<style>
        .jdt {
            width: 300px;
            height: 20px;
            border: 1px solid red;
        }
        
        .jdt-1 {
            width: 0;
            height: 100%;
            background: linear-gradient(to right, #f0f, #0ff);
            transition: all 3s ease-in;
        }
        
        .jdt:hover .jdt-1 {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="jdt">
        <div class="jdt-1"></div>
    </div>
</body>

一个过渡的hover效果。

土豆才不土

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css做一个3d相册

用css做一个简单的3D相册话不多说，先看代码 <style> @keyframes anima { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } body {
复制链接

扫一扫