花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册 这 16 个 CSS 伪类,助你提升布局效率! Mysql系列第八讲 详解排序和分页(order by & limit)及存在的坑 SQL语句的一些应用语句 介绍三个开发技术小知识点 数据库系统概论(1) Mysql备份和恢复的类型,备份恢复的几种方法! --个人整理 MySql数据库基本操作(一) 前八月融合创新提升服务,大数据搭建信息网 长三角税收一体化按下“快进键” 一些建议:给当年刚做程序员的我 谁是物联网江湖明日之星?答案是新CIoT 企业信用有效“变现” 江苏银行物联网金融规模达185亿 2020年中国5G物联网行业:中国通信运营商5G投资达1.23万亿元-可下载 搭建 GFS 分布式文件系统-----实操 排障集锦:九九八十一难之第十五难!-------------史上最全rsync报错详解 docker系列1---docker隔离和限制技术 Linux系统安全及应用加固———最适合新手学,新手都能看懂!超详细的理论+超详细的实验!呕心沥血之作完成! LAMP架构集成ownCloud搭建私有云盘 Shell脚本正则表达式(一) Linux第一人称侵入进程的好地方 Windows DOS常用命令(持续更新完善) 大数据驱动新材料研发 变革从内而发,一站式大数据平台和多模数据库雄起 雕佛像、打棒球、开飞机、去北极,这个90后程序员有点不一样 12项特色功能构建施工现场“物联网” 400亿美元!英伟达收购Arm 软银套现离场物联网梦醒 卫星物联网再次引发热议,原因在这里 信用飞:航旅行业数字化前景可期,大数据预防砍头息乱象 大数据加持自动驾驶产业发展 上海智能网联汽车公共数据中心揭牌 恒久科技(002808.SZ):子公司闽保信息与鸿达兴业签署智能制造及大数据平台综合应用项目战略合作框架协议 工业平板电脑如何在物联网中发挥作用? 400亿美元!英伟达收购Arm 软银套现离场物联网梦醒 “数字心脏”动态解析消费密码——国家级消费市场大数据联合实验 重庆:大数据智能化牵引产业结构调整质效提升 分析物联网技术在智能家居中的应用场景 国家级消费市场大数据联合实验室在上海先行先试 山西吕梁培训搬迁户成为大数据标注员 昔日贫困户,玩转高科技 知乎热议:2020年程序员是否过剩? 柯建东:宁波抢抓工业物联网新机遇,要做好四个平台建设 旷视:城市物联网的实现,是从超级应用到操作系统的沉淀过程 排障集合———忘记原密码,如何重新修改MySQL登入密码 【Redis】主从复制 网易2021批笔试题解 msf工具之木马程序制作以及伪装 【JAVA】滴滴-2021校招在线笔试-DE数据开发试卷-0913 机器学习13 -- 无监督学习之自监督 2020年全国数学建模大赛 B题部分代码和模型的建立 jumpserver安装(centos) Redis 知识点总结 通过RabitMQ实现分布式事务
您的位置:首页 >开发 >

花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册

效果 在这里插入图片描述 代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="JiuMeilove"/><title>一条小团团呀</title><style>* {margin: 0;padding: 0;}body {min-height: 100vh;height: 100vh;min-width: 100%;background-color: #0f0f0f;height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}body>section>div:first-of-type {width: 100%;position: absolute;left: 0;top: 8%;}body>section>div:first-of-type>p {text-align: center;font-size: 7em;margin: 0 auto;text-decoration: none;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;color: #FF1177;font-family: 华文行楷;}body>section:hover p {-webkit-animation: neon1 1.5s ease-in-out infinite alternate;-moz-animation: neon1 1.5s ease-in-out infinite alternate;animation: neon1 1.5s ease-in-out infinite alternate;}@-webkit-keyframes neon1 {from {text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;}to {text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;}}li {list-style: none;}body>section>div:last-of-type {width: 200px;height: 200px;transform-style: preserve-3d;transform: rotateX(13deg);animation: move 30s linear infinite;}body>section>div:last-of-type>ul {width: 200px;height: 200px;position: absolute;left: 50px;top: 30px;transform-style: preserve-3d;}body>section>div:last-of-type>ul>li {width: 100px;height: 100px;position: absolute;left: 0;top: 0;transition: all 2s ease;background: url("images/SDGIF_Rusult_1.gif") no-repeat center center;}body>section>div:last-of-type>ul>li:nth-child(1) {transform: rotateX(0deg) translateZ(50px);}body>section>div:last-of-type>ul>li:nth-child(2) {transform: rotateY(180deg) translateZ(50px);}body>section>div:last-of-type>ul>li:nth-child(3) {transform: rotateX(-90deg) translateZ(50px);}body>section>div:last-of-type>ul>li:nth-child(4) {transform: rotateX(90deg) translateZ(50px);}body>section>div:last-of-type>ul>li:nth-child(5) {transform: rotateY(-90deg) translateZ(50px);}body>section>div:last-of-type>ul>li:nth-child(6) {transform: rotateY(90deg) translateZ(50px);}body>section>div:last-of-type>ol {width: 800px;height: 400px;position: absolute;left: 0;top: -20px;transform-style: preserve-3d;}body>section>div:last-of-type>ol>li {width: 200px;height: 200px;background: #fff;position: absolute;left: 0;top: 0;opacity: 0.3;transition: all 3s ease;}body>section>div:last-of-type>ol>li {background: url("images/SDGIF_Rusult_1.gif") no-repeat center center;}body>section>div:last-of-type>ol>li:nth-child(1) {transform: rotateX(0deg) translateZ(100px);}body>section>div:last-of-type>ol>li:nth-child(2) {transform: rotateY(180deg) translateZ(100px);}body>section>div:last-of-type>ol>li:nth-child(3) {transform: rotateX(-90deg) translateZ(100px);}body>section>div:last-of-type>ol>li:nth-child(4) {transform: rotateX(90deg) translateZ(100px);}body>section>div:last-of-type>ol>li:nth-child(5) {transform: rotateY(-90deg) translateZ(100px);}body>section>div:last-of-type>ol>li:nth-child(6) {transform: rotateY(90deg) translateZ(100px);}body>section>div:last-of-type:hover>ul>li {transform: translateZ(100px);width: 200px;height: 200px;opacity: 0.8;left: -50px;top: -50px;}body>section>div:last-of-type:hover ul li:nth-child(2) {transform: rotateY(180deg) translateZ(100px);}body>section>div:last-of-type:hover ul li:nth-child(3) {transform: rotateX(-90deg) translateZ(100px);}body>section>div:last-of-type:hover ul li:nth-child(4) {transform: rotateX(90deg) translateZ(100px);}body>section>div:last-of-type:hover ul li:nth-child(5) {transform: rotateY(-90deg) translateZ(100px);}body>section>div:last-of-type:hover ul li:nth-child(6) {transform: rotateY(90deg) translateZ(100px);}body>section>div:last-of-type:hover>ol>li {transform: translateZ(300px);width: 400px;height: 400px;opacity: 0.8;left: -100px;top: -100px;}body>section>div:last-of-type:hover ol li:nth-child(2) {transform: rotateY(180deg) translateZ(300px);}body>section>div:last-of-type:hover ol li:nth-child(3) {transform: rotateX(-90deg) translateZ(300px);}body>section>div:last-of-type:hover ol li:nth-child(4) {transform: rotateX(90deg) translateZ(300px);}body>section>div:last-of-type:hover ol li:nth-child(5) {transform: rotateY(-90deg) translateZ(300px);}body>section>div:last-of-type:hover ol li:nth-child(6) {transform: rotateY(90deg) translateZ(300px);}@keyframes move {from {transform: rotateX(13deg) rotateY(360deg) rotateZ(0deg);}to {transform: rotateX(13deg) rotateY(0deg) rotateZ(0deg);}}</style></head><body><section><div><p>团团の比心♥</p></div><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul><ol class="maxbox"><li></li><li></li><li></li><li></li><li></li><li></li></ol></div></section></body></html>

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。