女朋友生日,我送她网页相册,她感动的哭了(文中有惊喜)
程序员文章站
2022-04-10 09:09:00
导语:女朋友最近生日,我作为浪漫(搞事)专家,怎么能不弄点惊喜呢?于是我的这一件礼物,直接把女朋友感动哭了。我和女朋友的甜蜜聊天对话!!那么我是怎么把女朋友感动哭的呢?我们来看看网页相册效果图。这里我把女朋友的照片换成了她最喜欢的偶像的照片(保命操作,当时我用的是她的照片),是不是很炫酷呢?瞬间让女生感动哭了。那么是怎么实现的呢,很简单,只需要html和css就行了,代码直接给你们,换一下图片就行了。
导语:
女朋友最近生日,我作为浪漫(搞事)专家,怎么能不弄点惊喜呢?于是我的这一件礼物,直接把女朋友感动哭了。
我和女朋友的甜蜜聊天对话!!
那么我是怎么把女朋友感动哭的呢?我们来看看网页相册效果图。
这里我把女朋友的照片换成了她最喜欢的偶像的照片(保命操作,当时我用的是她的照片),是不是很炫酷呢?
瞬间让女生感动哭了。
那么是怎么实现的呢,很简单,只需要html和css就行了,代码直接给你们,换一下图片就行了。
<!DOCTYPE html> <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="image/1.jpg" class="bigpic" > </div> <div class="bigback"> <img src="image/2.jpg" class="bigpic"> </div> <div class="bigleft"> <img src="image/3.jpg" class="bigpic"> </div> <div class="bigright"> <img src="image/4.jpg" class="bigpic"> </div> <div class="bigtop"> <img src="image/5.jpg" class="bigpic"> </div> <div class="bigbottom"> <img src="image/6.jpg" class="bigpic"> </div> <span class="smallfront"> <img src="image/7.jpg" class="smallpic" /> </span> <span class="smallback"> <img src="image/8.jpg" class="smallpic" /> </span> <span class="smallleft"> <img src="image/9.jpg" class="smallpic" /> </span> <span class="smallright"> <img src="image/10.jpg" class="smallpic" /> </span> <span class="smalltop"> <img src="image/11.jpg" class="smallpic" /> </span> <span class="smallbottom"> <img src="image/12.jpg" class="smallpic" /> </span> </div> </div> </body> </html>
好了,你们也快去把女朋友感动哭吧!!
没有女朋友怎么办?点个赞,明天我给你分配一个。
本文地址:https://blog.csdn.net/gitchatxiaomi/article/details/108474015
上一篇: 支付宝蚂蚁庄园登山赛最高分是多少