情人节请用代码表达你的爱意，女友收到都哭了

以程序员的方式撒狗粮，专业浪漫，值得拥有！

效果演示
代码

//css代码
*{padding:0;margin:0;
}
.all{width:1400px;margin:0 auto;background:#000;
}
.text{font:bolder 45px "华文行楷";color:#f00;width:1400px;text-align:center;height:120px;line-height:120px;transform-style: preserve-3d;animation:color 1s linear infinite;
}
@keyframes color{0% {color:#FF0000}25%{color:#FF6600}50%{color:#FFFF00}75%{color:#FF9900}100%{color:#FF99CC}
}
@-webkit-keyframes color{0% {color:#FF0000}25%{color:#FF6600}50%{color:#FFFF00}75%{color:#FF9900}100%{color:#FF99CC}
}
.up{height:200px
}
.down{width:360px;height:400px;margin:0 auto;
}
.heart{list-style:none;position:absolute;top:95px;width:320px;
}
.heart li div{width:270px;height:360px;border:solid 5px #f00;position:absolute;border-right:0;border-bottom:0;border-radius:180px 120px 0 15px/310px 160px 0 50px;transform:rotate(-50deg);transform-style: preserve-3d;animation:borderColor 1s linear infinite;
}
.cube{list-style:none;transform-style: preserve-3d;animation: rotate 5s linear infinite;-webkit-animation: rotate 5s linear infinite;transform-origin:50% 50% 0;width:150px;height:150px;transform:rotateX(45deg) rotateY(45deg);margin-left:105px
}
@keyframes borderColor{0% {border-color:#FF0000}25%{border-color:#FF6600}50%{border-color:#FFFF00}75%{border-color:#FF9900}100%{border-color:#FF99CC}
}
@-webkit-keyframes borderColor{0% {border-color:#FF0000}25%{border-color:#FF6600}50%{border-color:#FFFF00}75%{border-color:#FF9900}100%{border-color:#FF99CC}
}
.cube li{width:150px;height:150px;position:absolute;opacity:0.5;/*linear,infinite,*/
}/*
@keyframes rotate{0%{transform:rotateX(0deg) rotateY(0deg);}50%{transform:rotateX(0deg) rotateY(90deg);}100%{transform:rotateX(0deg) rotateY(180deg);}}
*/
@keyframes rotate{0%{transform:rotateX(45deg) rotateY(45deg);}25%{transform:rotateX(45deg) rotateY(225deg);}50%{transform:rotateX(225deg) rotateY(225deg);}75%{transform:rotateX(225deg) rotateY(45deg);}100%{transform:rotateX(45deg) rotateY(45deg);}
}
@-webkit-keyframes rotate{0%{transform:rotateX(45deg) rotateY(45deg);}25%{transform:rotateX(45deg) rotateY(225deg);}50%{transform:rotateX(225deg) rotateY(225deg);}75%{transform:rotateX(225deg) rotateY(45deg);}100%{transform:rotateX(45deg) rotateY(45deg);}
}
.cube li:nth-child(1){transform:translateZ(-75px) rotateY(180deg);background-color:#00CC33;
}
.cube li:nth-child(2){transform:translateZ(+75px);background-color:#00CCFF;
}
.cube li:nth-child(3){transform:translateX(+75px) rotateY(90deg);background-color:#99FF33;
}
.cube li:nth-child(4){transform:translateX(-75px) rotateY(-90deg);background-color:#FF3300;
}
.cube li:nth-child(5){transform:translateY(+75px) rotateX(90deg);background-color:#9933FF;
}
.cube li:nth-child(6){transform:translateY(-75px) rotateX(-90deg);background-color:#FFCCCC;
}
img{width:150px;height:150px;
}

//html代码
<div class="all"><div class="up"><div class="text">XXX，我一生的最爱</div></div><div class="down"><ul class="cube"><li><img src="1.png" /></li><li><img src="2.png" /></li><li><img src="3.png" /></li><li><img src="4.png" /></li><li><img src="5.png" /></li><li><img src="6.png" /></li></ul><ul class="heart"><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li><li><div></div></li></ul></div>
</div>

//js代码
var heart = document.getElementsByClassName("heart");
var line = heart[0].getElementsByTagName("li");
var ro = 360 / line.length;
for(var i = 0; i < line.length; i ++){line[i].style.transformOrigin = "180px 0";line[i].style.transform = "rotateY(" + ro * i + "deg)translateX(-15px)";//
}

快乐玩前端：情人节请用代码表达你的爱意，女友收到都哭了相关推荐

快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
面对前端六年历史代码，如何接入并应用ES6解放开发效率
作者/分享人:Lucas http://gitbook.cn/gitchat/author/583f821b87fdee392692ed22 写在最前很荣幸有机会和大家分享自己在前端工作中的一些经验 ...
前端开发者必备的代码开源平台，记得收藏转发！
作为一个前端开发者,写代码处理BUG是日常,我们可以通过去看一些大神的代码来学习大神的思路.今天小千就来给大家介绍几个国内可以访问的开源代码平台,记得收藏转发哦~ 1.GitHub 这个就不用多说了, ...
Blazor带我重玩前端(四)
布局 Blazor中的布局和MVC中的布局是类似的. 创建布局新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
w ndows10玩游戏蓝屏,Win10系统玩游戏蓝屏提示代码0x0000007E的两种解决方法
win10系统已经很多用户升级了,但是还是有不少用户在使用Ghost win10系统电脑的过程中经常遇到蓝屏问题,最近有位朋友在Win10系统玩游戏时出现蓝屏代码0x0000007E,显示一大串英文, ...
前端开发者必备的代码开源平台
作为一个前端开发者,写代码处理BUG是日常,我们可以通过去看一些大神的代码来学习大神的思路,今天小千就来给大家介绍几个国内可以访问的开源代码平台,记得收藏转发哦~ 1.GitHub 这个就不用多说了, ...
情人节c语言程序,情人节c语言代码.doc
情人节c语言代码篇一:一些简单的C语言程序代码由键盘任意输入1个4位数整数,分别输出其中的个位.十位.百位.千位. /* expe 3-10 */ #include #include void m ...
前端常用得CSS代码分享
本文首发于公众号:执行上下文,同步更新个人博客:执行上下文,转载请署名.代码不断更新中!! 前提 2019年11月的最后一篇文章来拉,在日常开发中高频使用的CSS代码分享给大家,其中可能有很多大家经常 ...
前端常用的CSS代码
本文首发于公众号:小夭同学,同步更新个人博客:故事胶片,转载请署名.代码不断更新中!! Demo 代码Demo 补充大家如果有常用的也可以分享出来鸭!!! 前提日常开发中高频使用的CSS代码分享给 ...

快乐玩前端：情人节请用代码表达你的爱意，女友收到都哭了

情人节请用代码表达你的爱意，女友收到都哭了

快乐玩前端：情人节请用代码表达你的爱意，女友收到都哭了相关推荐

最新文章

热门文章