3d相册 html 代码_女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）...
女朋友生日，我送她网页相册，她感动的哭了(文中有惊喜)
导语：
女朋友最近生日，我作为浪漫(搞事)专家，怎么能不弄点惊喜呢？于是我的这一件礼物，直接把女朋友感动哭了。
我和女朋友的甜蜜聊天对话！！
那么我是怎么把女朋友感动哭的呢？我们来看看网页相册效果图。
这里我把女朋友的照片换成了她最喜欢的偶像的照片(保命操作，当时我用的是她的照片)，是不是很炫酷呢？
瞬间让女生感动哭了。
那么是怎么实现的呢，很简单，只需要html和css就行了，代码直接给你们，换一下图片就行了。
<html> <head> <meta charset="utf-8" /> <title>把女朋友感动哭的相册title> <style type="text/css"> html{ width: 100%; height: 100%; } .bigbox{ width: 10px; height: 10px; margin: 200px 400px; position: relative; } .box{ width:500px; height:300px; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); -webkit-animation: mystyle 15s infinite; animation-timing-function: linear; } @-webkit-keyframes mystyle{ from{transform: rotateX(-180deg) rotateY(-180deg);} to{transform: rotateX(180deg) rotateY(180deg);} } .box div{ position: absolute; width: 200px; height: 200px; opacity: 0.8; transition: all .4s; } .bigpic{ width: 200px; height: 200px; } .box .bigfront{ transform: rotateY(0deg) translateZ(100px); } .box .bigback{ transform: translateZ(-100px) rotateY(180deg); } .box .bigleft{ transform: rotateY(90deg) translateZ(100px); } .box .bigright{ transform: rotateY(-90deg) translateZ(100px); } .box .bigtop{ transform: rotateX(90deg) translateZ(100px); } .box .bigbottom{ transform: rotateX(-90deg) translateZ(100px); } .box span{ display: block; position: absolute; width: 140px; height: 140px; top: 25px; left: 25px; } .box .smallpic{ width: 140px; height: 140px; } .box .smallleft{ transform: rotateY(90deg) translateZ(70px); } .box .smallright{ transform: rotateY(-90deg) translateZ(70px); } .box .smalltop{ transform: rotateX(90deg) translateZ(70px); } .box .smallbottom{ transform: rotateX(-90deg) translateZ(70px); } .box .smallfront{ transform: rotateY(0deg) translateZ(70px); } .box .smallback{ transform: translateZ(-70px) rotateY(180deg); } /*:hover 我们之前说过的一个css选择器，能够让鼠标指向的时候触发*/ .box:hover .bigleft{ transform: rotateY(90deg) translateZ(300px); } .box:hover .bigright{ transform: rotateY(-90deg) translateZ(300px); } .box:hover .bigtop{ transform: rotateX(90deg) translateZ(300px); } .box:hover .bigbottom{ transform: rotateX(-90deg) translateZ(300px); } .box:hover .bigfront{ transform: rotateY(0deg) translateZ(300px); } .box:hover .bigback{ transform: translateZ(-300px) rotateY(180deg); }style> head> <body> <div class="bigbox"> <div class="box"> <div class="bigfront"> <img src="data:image/1.jpg" class="bigpic" > div> <div class="bigback"> <img src="data:image/2.jpg" class="bigpic"> div> <div class="bigleft"> <img src="data:image/3.jpg" class="bigpic"> div> <div class="bigright"> <img src="data:image/4.jpg" class="bigpic"> div> <div class="bigtop"> <img src="data:image/5.jpg" class="bigpic"> div> <div class="bigbottom"> <img src="data:image/6.jpg" class="bigpic"> div> <span class="smallfront"> <img src="data:image/7.jpg" class="smallpic" /> span> <span class="smallback"> <img src="data:image/8.jpg" class="smallpic" /> span> <span class="smallleft"> <img src="data:image/9.jpg" class="smallpic" /> span> <span class="smallright"> <img src="data:image/10.jpg" class="smallpic" /> span> <span class="smalltop"> <img src="data:image/11.jpg" class="smallpic" /> span> <span class="smallbottom"> <img src="data:image/12.jpg" class="smallpic" /> span> div> div> body>html>文件夹结构内容如下
▼
好了，你们也快去把女朋友感动哭吧！！
没有女朋友怎么办？点个赞，明天我给你分配一个。
不说了，我要去买榴莲了，晚了可能连进去跪榴莲的机会也没有了，大家保重，注意膝盖。
补充：
微信搜索公众号【小暴技术团队】
回复 【相册】，即可获取 本文相册源码。
3d相册 html 代码_女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）...相关推荐
- html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果 互联网 发布时间:2008-10-17 19:25:02 作者:佚名 我要评论 英文原文:Sliding Photograph Galleries ...
- 女朋友生日，我送她网页相册，她感动的哭了（文中有惊喜）
那么是怎么实现的呢,很简单,只需要html和css就行了,代码直接给你们,换一下图片就行了. <!DOCTYPE html> <html><head><met ...
- 语言生日创意代码_你生日那天的宇宙什么样子知道？我全部给你吧！
的确不好意思,这段时间弄了不少其他事儿,写论文,拍视频,文章更新很慢.这段时间保证一周至少一篇,请大家监督. 今天作为福利,整理了宇宙大人给我们的照片送给大家.在你生日那天,哈勃望远镜看到了什么.哈勃 ...
- 完整html生日祝福代码_孩子生日发朋友圈祝福语（一）！
孩子生日发朋友圈的句子,你是不是在为孩子生日怎么发朋友圈而发愁,现在越来越多的家长,在孩子生日当天会发发朋友圈表示祝福,看着动态下面亲朋好友的留言和祝福,心里会觉得非常的开心幸福.下面,为大家推荐一些 ...
- 查生日代码_让库克亲自送上生日祝福的10后小学生，还在B站教人学编程？
"别人家的孩子"从小到大都是父母口中夸赞的对象,但有时候人与人的差距比想象中的还要大. 前几天苹果CEO库克在微博上分享由苹果公司组织的"人人能编程"项目线下交 ...
- 4月30日世界表白日_世界表白日10月27日,一段感动到哭的表白
爱一个人就要大声说出来,但是还要选一个特殊的日子,世界表白日10月27日,就是一个不错的选择.千万不要等到它是别人的才知道自身有多后悔.抓住机会,拿一句话去感动她吧! 1.你对我来说是如此珍贵,以至于 ...
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备...
一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧! ...
- 抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
最新文章
- 【转】python包导入细节
- Linux strace 跟踪进程信息
- android控件ems,Android登录等待效果
- 网络营销第一课：市场营销基础(2)
- 小白开学Asp.Net Core 《九》
- 【每日学习】Apache重写未开启，导致The requested URL /xxxx.html was not found on this server...
- python turtle绘制七段数码管日期时间（注释）
- Kubernetes入门——k8s概念和架构
- Asp.Net alert弹出提示信息的若干种方法
- sklearn svm 调参_用 Grid Search 对 SVM 进行调参
- Songs ever sing
- Oracle 创建普通用户，并赋予权限
- linux下svn安装与版本控制
- Poker Ⅱ 机械键盘使用说明书 自备
- C++之 Eigen-3.4.0 全方位教程：Chapter02-矩阵篇
- LimeSDR实验教程(3) GSM基站
- 基本面量化与美林时钟模型
- 计算机组老师颁奖词,教研组颁奖词5篇
- 进制转换的算法及进制在线转换器
- 幼儿园计算机基础知识培训总结,幼儿园园本培训工作总结