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

最新推荐文章于 2022-10-18 12:10:00 发布
Transprant 最新推荐文章于 2022-10-18 12:10:00 发布
阅读量4.2k 收藏 99
点赞数 21
分类专栏： 网页相册 html+css+js 图片布局 文章标签： js css3 html 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/Transprant/article/details/116051777
版权

女友的网页相册（一）

一丶相册效果

  1. 未展开前
    在这里插入图片描述
  2. 展开后相册会自动旋转，底部还有倒影哦（展开时有个很nice的动画效果~）。
    在这里插入图片描述
  3. 可以滚动鼠标轮盘放大缩小
    在这里插入图片描述
  4. 使用鼠标还可以拖动相册观看图片喔！！（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=
最低0.47元/天 解锁文章
酷炫【HTML+CSS+JavaScript】前端特效（附源代码）——动态3D立体旋转女友相册 | 基于前端技术的动态3D立体旋转女友相册 | 快为你的女朋友制作一个吧！（源代码获取）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
04-12 75
酷炫【HTML+CSS+JavaScript】前端特效（附完整源代码）——动态3D立体旋转女友相册 | 基于前端技术的动态3D立体旋转女友相册 | 快为你的女朋友制作一个吧！（源代码获取）
程序员给女朋友用HTML5制作的3D相册
04-23
很多人看到之后都在找源码，这里为大家找到，程序员给女朋友用HTML5制作的3D相册
精美送女友的3D相册（HTML制作）
12-27
一个程序员给女朋友用HTML5制作的精美的3D相册，制作很用心，女朋友很开心，想要使用的话下载下来，然后直接替换照片就可以了。
程序员给女朋友用HTML5制作的3D相册免费(附源码)
04-28
一个高大上的HTML5作品,是利用HTML5 canvas制作的3D图片展示。据说是程序员给自己女朋友做的。谁说程序员不懂浪漫!源码下载:CSDN下载频道或来自ypxyangyangyang的整理。...
七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
06-16 4159
❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备❉ 3D相册演示
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
Web前端：HTML+CSS+JS实现美女照片3D立方体旋转
热门推荐
chengyang_java的博客
01-04 2万+
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大..
情人节程序员用HTML网页表白【520爱心背景3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
qq_365392777
10-18 8646
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 三、精彩专栏 看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
html+css+js精美页面，送女友
01-14
本资源内含多个页面，有精美的动态页面、暗藏多个小游戏，富含情感音乐，一定会感动到女友。(建议用谷歌浏览器打开)
生日祝福,送女友(html5+css，jq，移动端)
11-19
生日祝福,送女友(html5+css，jq，移动端)
❤ HTML+css3+js 抖音3d旋转相册 (撩妹,送女友都可以)
12-07
❤ (撩妹神器) HTML+css3+js 抖音3d旋转相册(生日送女友)，动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能...
html相册（自己改写可送女友哦^_^）
10-10
页面相册，可以把里面的图片换成自己的，并用里面图片的名字命名，可看到相同的效果，也可当作礼物送人
程序员送给女朋友最好的3D相册
01-01
此资源是基于HTML5编写的3D相册。如果你是程序员，你还是单身dog，那么这个3D相册可能是你告别单身的福音，这个资源既可以让你追到妹子又可以让你学到WEB前端H5的开发技术，何乐而不为呢？
抖音程序员女朋友相册源代码
03-08
抖音程序员女朋友相册源代码，实现鼠标移动放大，双层正方形旋转展示图片。可以更换img文件夹内图片，但是大小需要自行修改，外层图片大小为400*400px，内层为100*100px
程序员给女朋友用HTML5制作的3D相册 源码 下载
04-23
程序员给女朋友用HTML5制作的3D相册 源码 下载 那个人竟然要10分, 太欺负人了, 哈哈, 我只要6分
HTML+css+js网页相册大全
03-15
里面有七个女朋友相册效果，每个效果都是不同的，十分漂亮。里面的照片可以更换，也可以加背景音乐。不会使用的可以私信我。
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧!
12-10
❤表白神器❤ ( html5+CSS3) 制作一个[流星3D旋转相册]送女朋友吧! (生日送女友)，动态生成效果,抖音很火的旋转相册,原来是这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,...
2021年送女友❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转(情人节/生日/表白)必备)
12-30
2021年送女友❤雪花飘落❤ html+css3+js 实现3D相册开关闭合旋转(情人节/生日/表白)必备) 博客地址: https://blog.csdn.net/qq316148300/article/details/111946836
做一个购物商城网页.包含 html+css+js,带网页跳转
最新发布
05-29
好的，我可以为您提供一个简单的购物商城网页示例，包含 HTML、CSS 和 JS，并带有网页跳转功能。 HTML 代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物商城</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>购物商城</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品分类</a></li> <li><a href="#">购物车</a></li> <li><a href="#">登录</a></li> </ul> </nav> </header> <main> <h2>最新商品</h2> <div class="product-list"> <div class="product"> <img src="product1.jpg" alt="Product 1"> <h3>商品名称1</h3> <p>商品描述1</p> <button>加入购物车</button> </div> <div class="product"> <img src="product2.jpg" alt="Product 2"> <h3>商品名称2</h3> <p>商品描述2</p> <button>加入购物车</button> </div> <div class="product"> <img src="product3.jpg" alt="Product 3"> <h3>商品名称3</h3> <p>商品描述3</p> <button>加入购物车</button> </div> </div> </main> <footer> <p>© 2021 购物商城</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS 代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 10px; } header h1 { margin: 0; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 10px; } header nav ul li:last-child { margin-right: 0; } header nav ul li a { color: #fff; text-decoration: none; } main { padding: 10px; } .product-list { display: flex; flex-wrap: wrap; } .product { flex-basis: calc(33.33% - 20px); margin: 10px; padding: 10px; background-color: #f9f9f9; text-align: center; } .product img { width: 100%; height: auto; margin-bottom: 10px; } .product h3 { margin: 0; } .product button { background-color: #333; color: #fff; border: none; padding: 5px 10px; margin-top: 10px; cursor: pointer; } footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` JS 代码： ```javascript // 在商品按钮上添加点击事件 var buttons = document.querySelectorAll('.product button'); for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { alert('已加入购物车！'); }); } ``` 这是一个简单的购物商城网页，包含了一个导航栏、一个商品列表和一个页脚，以及一个简单的 JS 功能，点击商品按钮会弹出提示框。 您可以根据需要修改代码和样式，添加更多功能和交互，实现一个完整的购物商城网站。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现） 4242
  • HTML+CSS+JS实现图片的瀑布流布局 4182
  • 大厂面试必考题：三行布局之圣杯布局和双飞翼布局的区别 637

分类专栏

  • html+css+js 2篇
  • 网页相册 1篇
  • 图片布局 2篇

最新评论

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

    小卡拉儿米: 太溜了

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

    AshDDD946: 动画效果还是实现不了

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

    想做鹊山祝余的舅舅: 把这条语句<a target="_blank" href=""> <img src="https://wx3.sinaimg.cn/mw690/005O0Eg8gy1gpdup8vs01j30u00u0n50.jpg" alt=""> </a> 删掉 就好了

  • HTML+CSS+JS实现图片的瀑布流布局

    痞爺: 提问：运行后显示offsetLeft 没找到定义，咋整

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

    m0_66075431: 我的也一样

大家在看

  • OPPOR9S无人六键刷机包，有魅族版本硬改相机直播版 103
  • 【C++】AVL树/红黑树实现及map与set的封装
  • 计算机组成原理历年考研真题对应知识点（计算机的性能指标）
  • 计算机组成原理历年考研真题对应知识点（计算机系统层次结构）

最新文章

  • 大厂面试必考题：三行布局之圣杯布局和双飞翼布局的区别
  • HTML+CSS+JS实现图片的瀑布流布局
2021年3篇

目录

目录

评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

聚圣源五行起名打分测试宝宝起名的小助手根据八字公司起名字雀圣1电影定字起名字大全集上海杉德卡证件照换背景毛姓起名字大全免费德国主帅关于植物的现代诗宠妾免费店铺测名起名打分upwork官网国防生演员表天堂花园用睿起名子杨氏孩子起名11月22游戏起名神器农产品商标起名的食品饮料公司起名大全起名字技巧属猪的起名给电商公司起名怎么起宝起名小窝图片家有儿女3中央8崔起的男孩名字大全带明字的起名淀粉肠小王子日销售额涨超10倍罗斯否认插足凯特王妃婚姻让美丽中国“从细节出发”清明节放假3天调休1天男孩疑遭霸凌 家长讨说法被踢出群国产伟哥去年销售近13亿网友建议重庆地铁不准乘客携带菜筐雅江山火三名扑火人员牺牲系谣言代拍被何赛飞拿着魔杖追着打月嫂回应掌掴婴儿是在赶虫子山西高速一大巴发生事故 已致13死高中生被打伤下体休学 邯郸通报李梦为奥运任务婉拒WNBA邀请19岁小伙救下5人后溺亡 多方发声王树国3次鞠躬告别西交大师生单亲妈妈陷入热恋 14岁儿子报警315晚会后胖东来又人满为患了倪萍分享减重40斤方法王楚钦登顶三项第一今日春分两大学生合买彩票中奖一人不认账张家界的山上“长”满了韩国人？周杰伦一审败诉网易房客欠租失踪 房东直发愁男子持台球杆殴打2名女店员被抓男子被猫抓伤后确诊“猫抓病”“重生之我在北大当嫡校长”槽头肉企业被曝光前生意红火男孩8年未见母亲被告知被遗忘恒大被罚41.75亿到底怎么缴网友洛杉矶偶遇贾玲杨倩无缘巴黎奥运张立群任西安交通大学校长黑马情侣提车了西双版纳热带植物园回应蜉蝣大爆发妈妈回应孩子在校撞护栏坠楼考生莫言也上北大硕士复试名单了韩国首次吊销离岗医生执照奥巴马现身唐宁街 黑色着装引猜测沈阳一轿车冲入人行道致3死2伤阿根廷将发行1万与2万面值的纸币外国人感慨凌晨的中国很安全男子被流浪猫绊倒 投喂者赔24万手机成瘾是影响睡眠质量重要因素春分“立蛋”成功率更高？胖东来员工每周单休无小长假“开封王婆”爆火：促成四五十对专家建议不必谈骨泥色变浙江一高校内汽车冲撞行人 多人受伤许家印被限制高消费

聚圣源 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化