html+Css3炫酷动态魔方代码
2024-05-16 11:01:31
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>动态魔方</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>ul {list-style-type: none;margin: 0;padding: 0;}.box {width: 300px;height: 300px;margin: 150px auto;position: relative;font-size: 50px;transform-style: preserve-3d;animation: rotate 15s ease infinite;animation-direction: alternate;}.box2 {width: 200px;height: 200px;margin-left: 63px;margin-top: 310px;position: relative;font-size: 25px;transform-style: preserve-3d;animation: rotate 10s ease infinite;animation-direction: alternate-reverse;}.box>div {width: 300px;height: 300px;position: absolute;}.box2>div {width: 200px;height: 200px;position: absolute;}.dv1 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #aaaa00;transform: skewZ(60deg);}.dv21 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #ffaaff;transform: skewZ(30deg);}.dv2 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #aaaa7f;}.dv22 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #ffaa7f;}.dv3 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #aaaaff;}.dv23 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #55aa7f;}.dv4 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #55aa7f;}.dv24 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #aaaaff;}.dv5 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #ffaa7f;}.dv25 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #aaaa7f;}.dv6 li {float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;background-color: #ffaaff;}.dv26 li {float: left;width: 45px;height: 45px;margin: 5px;border-radius: 10px;line-height: 45px;text-align: center;background-color: #aaaa00;}.dv1 {background-color: transparent;transform: rotateY(90deg) translateZ(150px);}.dv2 {background-color: transparent;transform: rotateY(-90deg) translateZ(150px);}.dv3 {background-color: transparent;transform: rotateX(90deg) translateZ(150px);}.dv4 {background-color: transparent;transform: rotateX(-90deg) translateZ(150px);}.dv5 {background-color: transparent;transform: translateZ(150px);}.dv6 {background-color: transparent;transform: translateZ(-150px);}.dv21 {background-color: transparent;transform: rotateY(90deg) translateZ(68px) translateX(30px);}.dv22 {background-color: transparent;transform: rotateY(-90deg) translateZ(100px);}.dv23 {background-color: transparent;transform: rotateX(90deg) translateZ(100px);}.dv24 {background-color: transparent;transform: rotateX(-90deg) translateZ(68px) translateY(30px);}.dv25 {background-color: transparent;transform: translateZ(70px);}.dv26 {background-color: transparent;transform: translateZ(-100px);}@keyframes rotate {0% {transform:rotateY(0deg) rotateX(-90deg);}25%{transform:rotateY(-90deg) rotateX(180deg);}50%{transform:rotateY(180deg) rotateX(-90deg);}75%{transform:rotateY(-270deg) rotateX(540deg);}100% {transform: rotateY(360deg) rotateX(720deg);}}</style></head><body><div class="box"><div class="dv1"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv21"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div><div class="dv2"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv22"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div><div class="dv3"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv23"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div><div class="dv4"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv24"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div><div class="dv5"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv25"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div><div class="dv6"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="box2"><div class="dv26"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div></div></body>
</html>html+Css3炫酷动态魔方代码相关推荐
- 前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
- html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
- html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
- html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效.该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错. 制作方法 H ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- Excel VBA实现超炫酷动态可视化图表
Excel VBA实现超宣炫酷动态图表 数据来源于:国家统计局官网. 制作过程: ①数据准备 原图表的数据来源是:http://www.ifs.du.edu,是各国的历史GDP数据,我也去找了这个数据 ...
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- jQuery和CSS3炫酷滚动页面内容元素动画特效
jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...
- 纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
最新文章
- Mysql高级调优篇——第五章：Sql调优在面试中深度剖析
- python使用sklearn的PrecisionRecallDisplay来可视化PR曲线
- Mysql-cobar集群安装部署手册
- java 取绝对值_Java实现一致性哈希算法，并搭建环境测试其负载均衡特性
- 虚拟主机创建虚拟lan_创建虚拟背景应用
- 教给孩子的10句“保命金言”(图)
- 扎实的基础知识、高质量的代码
- 腾讯内测全新 Tim 3.0，支持微信登录；滴滴顺风车上线夜间服务；Angular 9.1 发布 | 极客头条...
- 转贴：Josephus问题
- 一机三屏台式计算机,三屏系统重现江湖：背后一台完整主机
- CYQ.Data 正式支持 DotNET Core 版本发布
- android 背景逐渐变暗,UI:使View背景逐渐变暗的方法
- 图书管理系统c语言报告调试分析,图书管理系统C语言程序设计实验分析报告.doc...
- matlab在机器视觉的应用实例,十个基于机器视觉的实用案例介绍
- linux进入根目录的代码,Linux根目录+源代码目录
- python安装pyaudio
- Apache ShenYu 网关正式支持 Dubbo3 服务代理
- 股指期货真是个好东西
- mysql workbench 安全模式_MySQL Workbench解决安全模式
- Python中的立方根