程序员撩妹专用~~~好看的H5立方体创意相册,资源免费!!!程序员送给女孩子的礼物,非常适合送给小姐姐!

最新推荐文章于 2022-03-03 07:51:35 发布
置顶 最新推荐文章于 2022-03-03 07:51:35 发布
阅读量491 收藏 1
点赞数 4
分类专栏： 撩妹 ＨＴＭＬ ＪＳ 文章标签： html css css3 vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/White_i/article/details/109238635
版权
撩妹 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
ＨＴＭＬ
2 篇文章 0 订阅
订阅专栏
ＪＳ
2 篇文章 0 订阅
订阅专栏

H5立方体程序员送给女孩子的礼物,非常适合送给小姐姐!程序员撩妹专用~~~

预览GIF:

在这里插入图片描述

代码详情

<html>
    <head>
        <title>H5立方</title>
        <meta charset="utf-8">
        <style>
            html{
                /* height: 100%;   */
                background: radial-gradient(circle, #333, #000, #000);  
            }  
            body{
                /* height: 100%; */
                /* margin: 0; */
                display: flex;
                justify-content: center;
                align-items: center;
                /* perspective: 1500px; */
            }
            main{  
                width: 300px;  
                height: 300px;  
				/**
				 * transform--style属性指定嵌套元素是怎样在三维空间中呈现。
				 * 使用此属性必须域transform 属性一起使用.
				 * transform-style: flat|preserve-3d;
				 * 					flat	表示所有子元素在2D平面呈现。
				 *					preserve-3d	表示所有子元素在3D空间中呈现。
				 */
                transform-style: preserve-3d;
                animation: 10s spin linear infinite;
            } 
            main div 
            {  
                position: absolute;
                width: 100%; 
                height: 100%;
                background-size: 100%;  
                /* border: 1px solid black; */
            }  
            .font  
            {  
                background-image: url(1.jpg);
                transform: translateZ(150px);  
            }  
            .back  
            {  
                background-image: url(2.jpg);
                transform: translateZ(-150px);  
            }  
        
            .left  
            {  
                background-image: url(3.jpg);
                transform: rotateY(90deg) translateZ(-150px);  
            }  
            .right  
            {  
                background-image: url(4.jpg);
                transform: rotateY(90deg) translateZ(150px);  
            }  
        
            .top  
            {  
                background-image: url(5.jpg);
                transform: rotateX(90deg) translateZ(-150px);  
            }  
            .bottom  
            {  
                background-image: url(6.jpg);
                transform: rotateX(90deg) translateZ(150px);  
            } 
            
            @keyframes spin  
            {  
                0%  
                {    
                    transform: rotateX(0) rotateY(0) rotateZ(0deg);  
                }  
                100%  
                {  
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  
                }  
            } 
        </style>
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html><html>
    <head>
        <title>H5立方</title>
        <meta charset="utf-8">
        <style>
            html{
                /* height: 100%;   */
                background: radial-gradient(circle, #333, #000, #000);  
            }  
            body{
                /* height: 100%; */
                /* margin: 0; */
                display: flex;
                justify-content: center;
                align-items: center;
                /* perspective: 1500px; */
            }
            main{  
                width: 300px;  
                height: 300px;  
				/**
				 * transform--style属性指定嵌套元素是怎样在三维空间中呈现。
				 * 使用此属性必须域transform 属性一起使用.
				 * transform-style: flat|preserve-3d;
				 * 					flat	表示所有子元素在2D平面呈现。
				 *					preserve-3d	表示所有子元素在3D空间中呈现。
				 */
                transform-style: preserve-3d;
                animation: 10s spin linear infinite;
            } 
            main div 
            {  
                position: absolute;
                width: 100%; 
                height: 100%;
                background-size: 100%;  
                /* border: 1px solid black; */
            }  
            .font  
            {  
                background-image: url(1.jpg);
                transform: translateZ(150px);  
            }  
            .back  
            {  
                background-image: url(2.jpg);
                transform: translateZ(-150px);  
            }  
        
            .left  
            {  
                background-image: url(3.jpg);
                transform: rotateY(90deg) translateZ(-150px);  
            }  
            .right  
            {  
                background-image: url(4.jpg);
                transform: rotateY(90deg) translateZ(150px);  
            }  
        
            .top  
            {  
                background-image: url(5.jpg);
                transform: rotateX(90deg) translateZ(-150px);  
            }  
            .bottom  
            {  
                background-image: url(6.jpg);
                transform: rotateX(90deg) translateZ(150px);  
            } 
            
            @keyframes spin  
            {  
                0%  
                {    
                    transform: rotateX(0) rotateY(0) rotateZ(0deg);  
                }  
                100%  
                {   
                    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);  
                }  
            } 
        </style>
    </head>
    <body>
        <main>
            <div class="font"></div>
            <div class="back"></div>
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>
            <div class="bottom"></div>
        </main>
    </body>
</html>

HTML文件下载地址:

https://download.csdn.net/download/White_i/13023138

注意:

资源是免费的!资源是免费的!资源是免费的!重要的事情说三遍!

使用的时候只需要将代码中的.jpg文件改为自己的就行啦
有问题请在下方留言,看见会回复的

咻的一下飞过去
关注
专栏目录
表白撩妹撩汉的html，很简单的网页
10-03
一个简单撩妹的html,用于分享和提供其他人的下载，网页有稍微改动
程序员送给女孩子的精美礼物,H5立方体,唯美,精致,高清
White_i的博客
11-19 412
预览图: 预览图有一点儿模糊,是因为CSDN限制了上传大小,点击链接可以更加直观的看噢: 点击查看网页版高清画面 ================================================ 最后附上下载地址: https://download.csdn.net/download/White_i/13023138 要源码也可以私聊小主噢~~ ...
撩妹代码html,火热的程序员表白方式，调皮弹窗表白代码，赶紧拿去试试吧
weixin_28778341的博客
06-09 5889
七夕快到了，在抖音看那些大手子用代码撩自己喜欢的小姐姐是不是心痒难耐，愤恨不已，是不是也想撩一撩自己喜欢的小姐姐，那就来试试吧！其实这用的只是很基础的VB脚本代码就能做出来了，而这次小编专门收集了一些很有意思的代码分享给大家。有各种代码哦，表白，恶搞的都有，具体操作很简单，接下来小编就来教大家一下。(超简单的，学不会你可以打死我，学会了你就点个赞评论666咯，哈哈)将代码复制到txt文本首先在桌面...
HTML编写的撩妹小程序系列 ~ 表白主题
07-03
该程序是简单的HTML语言编写的撩妹小程序！希望大家喜欢！
html撩妹小技巧，小白友好
qq_39197781的博客
02-29 4336
本文是之前做的一个简单使用html编写的一个视觉效果很不错的撩妹程序，现在找出来给大家分享一下。文章结尾附上代码链接。 首先创建一个文件夹里面放一些图片和音乐，图片就是你要的撩的女神和用的背景啦。 然后我们新建一个txt文本，将代码复制进去，修改成你们想说的话和想换的背景音乐，再把txt文本的后缀名改成html就行啦。 然后点击这html文件就能看见效果了。 先上图看看效果，如果觉得还行，再看下...
H5立方体程序员送给女孩子的礼物
10-23
H5立方体程序员送给女孩子的礼物,非常适合送给小姐姐!程序员撩妹专用~~~ 使用的时候只需要将代码中的.jpg文件改为自己的就行啦 预览地址如下: http://101.200.74.34:8080/H5Cubic/H5Cubic.html
程序员专用送给女朋友表白网页源代码
04-29
标题中的“程序员专用送给女朋友表白网页源代码”表明这是一个专为程序员设计的浪漫方式，用于向他们的另一半表达情感。这个项目可能包含一个精心制作的网页，利用编程技术展现了程序员的独特创意和心意。这类表白...
js实现3D自转相册效果，送给女朋友的惊喜页面，程序员必备！
最新发布
02-17
js实现3D自转相册效果，送给女朋友的惊喜页面，程序员必备！ js实现3D自转相册效果，送给女朋友的惊喜页面，程序员必备！ js实现3D自转相册效果，送给女朋友的惊喜页面，程序员必备！ js实现3D自转相册效果，送给女...
程序员送给女友的基于JavaScript的高端3D相册源码.zip
06-22
程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的基于JavaScript的高端3D相册源码程序员送给女友的...
程序员给女朋友做的精美3D相册
04-29
这个“程序员给女朋友做的精美3D相册”项目是一个典型的HTML5技术应用案例，展示了Web开发中的创新和个性化设计。让我们深入探讨一下其中涉及到的技术和知识点。 首先，HTML5是现代网页开发的基础，它提供了更丰富...
泡妹子的代码
08-05
程序员表白专用，这是之前在网上看到一个大神对喜欢的妹子表白用的代码！！！
程序员给女朋友用HTML5制作的3D相册
04-21
程序员给女朋友用HTML5制作的3D相册 感觉挺漂亮，自己分析了一下。 整理里一个自己可以换相片
Html告白专用代码
09-02
告白专用Htm+css+js代码 大家可以下载 后观看
专用作于追女神 html代码
11-14
程序员平时忙于写代码，太辛苦了，直接打开就可以使用。页面可以把内容该为自己想写的,可以看看参考下！！很有创意，属于程序员的浪漫！！
程序员爱情表白专用html5动画网页的代码
09-23
程序猿表白专用的html5动画特效网页，真的挺羡慕创作者的水平，有这水平可以把爱表白给想表白的人，不要以为那些鲜花是用的图片，你会发现在资源文件中没有一个图片资源，但HTML5强大的功能不能不让你惊叹，左侧的文字是类似打字效果的动画形式，因IE9以前的浏览器不支持HTML5,所以你在查看本效果的时候，最后使用火狐浏览器或Chrome浏览器或Google浏览器。
用html制作3d旋转正方形相册
Mr_jianghanlin的博客
04-02 5099
用html制作3d旋转正方体相册 首先给大家看看效果图：动态效果，就接了几张图片给大家看 做这个实验最主要的就是用到了HTML5的动画的 animation 属性 和@keyframes规则 说先看看keyframers的规则语法定义： @ keyframes animationname{ kkeyframes-selector{} } animation的属性书写语法如下： anim...
html里撩人的代码特效,html特效代码大全
weixin_28778005的博客
06-04 382
该楼层疑似违规已被系统折叠隐藏此楼查看此楼23. 永远都会带着框架24. 防止被人frame25. 网页将不能被另存为26. 查看网页源代码27.删除时确认删除28.屏蔽功能键Shift,Alt,Ctrlfunction look(){if(event.shiftKey)alert("禁止按Shift键!"); //可以换成ALT　CTRL}document.onkeydown=look;29....
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
HTML——表白（效果+代码）
热门推荐
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
03-03 2万+
目录效果代码说明 效果 代码 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
程序员打造浪漫抖音旋转立方体表白照片墙
"本文档分享了一个浪漫程序员如何利用编程技能在抖音上创造出独特的表白方式——旋转立方体照片墙。作者首先提到了一个背景，即在完成了时钟屏保的个性化改造后，受到读者鼓励，决定探索另一种创意表达，即淘宝上...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咻的一下飞过去

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值