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

最新推荐文章于 2024-05-05 06:38:54 发布

原创

最新推荐文章于 2024-05-05 06:38:54 发布 · 4.6k 阅读

99 ·

CC 4.0 BY-SA版权

文章标签：

#js #css3 #html #3d

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

女友的网页相册（一）

一丶相册效果
二丶代码
总结

一丶相册效果

未展开前
展开后相册会自动旋转，底部还有倒影哦（展开时有个很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="">
      <img src=