教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）

Transprant

于 2021-04-23 14:16:49 发布

阅读量4.3k

点赞数 21

分类专栏：网页相册 html+css+js 图片布局文章标签： js css3 html 3d

本文链接：https://blog.csdn.net/transprant/article/details/116051777

版权

本文介绍如何用HTML、CSS和JavaScript制作一款具有3D效果和交互功能的网页相册。相册在展开时自动旋转并带有倒影，支持鼠标滚轮缩放和拖动查看图片。同时，提供了HTML、CSS和JS的代码示例，适合初学者和想为女友制作个性化礼物的人学习。

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

一丶相册效果

未展开前
展开后相册会自动旋转，底部还有倒影哦（展开时有个很nice的动画效果~）。
可以滚动鼠标轮盘放大缩小
使用鼠标还可以拖动相册观看图片喔！！（ps:底部可以放上你想说的文字）

二丶代码

html + css + js

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>相册</title>
</head>
<body>
  <div id="darg-container" class="darg">
    <div id="spin-container">
      <img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxuie9j6j30u0140nbw.jpg" alt="">
      <img src="https://wx3.sinaimg.cn/mw690/005O0Eg8ly1gotxtmlxmoj30u00u0am1.jpg" alt="">
      <img src="https://wx1.sinaimg.cn/mw690/005O0Eg8ly1gotxtd5gabj30u0140wr0.jpg" alt="">
      <img src="https://wx3.sinaimg.cn/mw690/005O0Eg8ly1gotxtay26bj30u0140h1u.jpg" alt="">
      &