用简单的css实现html网页动态电子相册的功能

浅浅的花香味﹌ 2022-06-08 05:37 44阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>相册</title>
            <style type="text/css"> img{ width:420px;height:580px;} div{ width:420px; height:580px; position:absolute; left:0;top:0;right:0;bottom:0; margin:auto; transform-style: preserve-3d; transition: all 12s; background:url(../img/img2.jpg); background-size: 100% 100%; } div img{ position: absolute; } div img:nth-child(1){ transform: translateZ(500px);} div img:nth-child(2){ transform: rotateY(60deg) translateZ(500px) ;} div img:nth-child(3){ transform: rotateY(120deg) translateZ(500px) ;} div img:nth-child(4){ transform: rotateY(180deg) translateZ(500px) ;} div img:nth-child(5){ transform: rotateY(240deg) translateZ(500px) ;} div img:nth-child(6){ transform: rotateY(300deg) translateZ(500px) ;} div:hover{ transform: rotateY(720deg) rotateX(45deg); } </style>
        </head>
        <body bgcolor="#808080">
            <div>
                <img src="../img/img1.jpg" alt="" />
                <img src="../img/xiaohai.jpg" alt="" />
                <img src="../img/img3.jpg" alt="" />
                <img src="../img/img4.jpg" alt="" />
                <img src="../img/img5.jpg" alt="" />
                <img src="../img/img6.jpg" alt="" />
            </div>
            <audio src="../img/gaobaiqiqiu.mp3" autoplay="autoplay" loop="loop"></audio>
        </body>
    </html>

#### 把自己的英文相册照片 和 背景音乐加在相应位置就行了，注意音乐不能以中文开头，最好是英文 ####

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端领域】3D旋转超美相册（HTML+CSS）

【前端领域】3D旋转超美相册（HTML+CSS） 3D旋转相册本文是一篇简单的前端代码，主要内容仅包含 HTML，CSS 等内容主要为 CSS1、HTML代码 2、...

雨点打透心脏的1/2处/ 2024年04月28日 07:54/ 0 赞/ 31 阅读

相关手把手教你基于HTML、CSS搭建我的相册（下）

The sand accumulates to form a pagoda ⭐ 写在前面 ⭐ 相册中心部分 ⭐ 添加照片 ⭐ 图片展示样式

怼烎@/ 2024年03月25日 21:26/ 0 赞/ 15 阅读

相关 html+css制作简单网页界面

一.运行效果如下 ![860e2d7eed2447d59f8984859bcd1191.png][] 二.HTML 2.1关于语义化标签 <section>

╰半夏微凉°/ 2024年02月20日 08:18/ 0 赞/ 68 阅读

相关基于Springboot电子相册、摄影图片管理系统设计与实现

基于Springboot电子相册、摄影图片管理系统设计与实现 > 博主介绍：《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家

超、凢脫俗/ 2024年02月19日 08:59/ 0 赞/ 55 阅读

相关用css和HTML编写一个简单的网页

要用 CSS 和 HTML 编写一个简单的网页，你需要做以下几件事： 1. 创建一个 HTML 文件，在文件中写入 HTML 代码。 2. 在 HTML 代码中，使用标签

妖狐艹你老母/ 2023年10月08日 17:45/ 0 赞/ 11 阅读

相关手把手教你基于HTML、CSS搭建我的相册（上）

The sand accumulates to form a pagoda 写在前面 HTML是什么？ CSS是什么？ demo搭建写在最

傷城~/ 2023年09月24日 23:46/ 0 赞/ 6 阅读

相关【网页设计】HTML+CSS 实现简单宣传网页设计展示

> 网站设计包含。 > 1、图片设计:有背景图片和颜色，同时有一张图片悬浮。 > 2、字体设计:设置字体大小、颜色等内容。 > 3、按钮设计:完成点击按钮后弹出视频

柔情只为你懂/ 2023年09月23日 20:28/ 0 赞/ 151 阅读

相关用简单的css实现html网页动态电子相册的功能

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

浅浅的花香味﹌/ 2022年06月08日 05:37/ 0 赞/ 45 阅读

相关 JavaScript+Css+Html实现网页换皮肤功能

描述：JavaScript+Css+Html实现网页换皮肤功能原理：使用不同网页背景保存在不同CSS里面，当点击切换的时候通过JavaScript将原来的样式表改为新的CS

叁歲伎倆/ 2022年05月28日 10:56/ 0 赞/ 239 阅读

相关 h5（网页）调用相机拍照和相册，实现图片上传功能

情景描述：一个h5或者网页中需要上传图片功能，并且这个功能可以选择本地的图片或者拍照上传；实现方法：

迈不过友情╰/ 2022年02月04日 23:57/ 0 赞/ 2103 阅读