HTML+CSS实战操作旋转魔方
教程管理员 发布于2023-09-27 18:01 HTML教程 119
实现过程
前期准备:
设置三个文件夹:css、html、images;分别放置文件index.css、index.html、images
1、HTML代码片段
1.1 放置图片肯定需要一个容器,毋庸置疑,最外层的容器为container
<div class="container"></div>
1.2 通过分析,魔方有6个面,但是实现hover的时候有一个分解的效果,总共有12个面
嗯,有点意思,直接在container容器里放置12div元素,div*12 Tab即可
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
1.3 HTML代码解决了,在编写CSS之前先引入CSS样式表,即index.html中引入index.css,引入的index.css一般放置在title标签下面,href文件路径根据自己设置而定。
<title>旋转魔方</title> <link rel="stylesheet" href="../css/index.css">
CSS代码片段
2.1 css编写第一步一般都会写通配符来去除内外边距,来消除某些浏览器固定的网页模板对代码的影响。
*{ margin: 0; padding: 0; }
弹性盒布局设置:
魔方显然放在网页中心才显得好看,如何实现?传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
并且,传统布局代码冗长,出错率高,要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。但是,Flex布局就可以避免这种情况:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
2.2 对body进行设置弹性盒以及自己喜欢的背景颜色
body{ //vw,vh为视口单位,1vw等于视口宽度的1%。 width: 100vw; height: 100vh; display: flex; //弹性盒设置 justify-content:center; //主轴居中对齐 align-items:center; //交叉轴居中对齐 /* 添加一个视距 */ perspective: 1000px; //让旋转效果变得更真实 background: #000; }
2.3 对container容器元素进行相关设置,实现3D风格
.container{ width: 150px; height: 150px; /* border: 1px solid; */ transform-style: preserve-3d; position: relative; transition:5s; /* 之所以设置相对定位,是因为子绝父相 */ animation: rotate 5s infinite linear; }
2.4 container悬停的视觉效果设置
.container:hover{ /* 当鼠标移入时,改变视角 */ transform: rotateY(180deg) rotateX(180deg); }
2.5 container下子元素div进行相关位置背景设置,子元素div相当于父元素container是绝对定位。
.container div{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; transition: 1s; background-color: #fff; }
2.6 现在书写魔方各个面的背景图以及旋转角度等设置
.container div:nth-child(1), .container div:nth-child(7){ background: url('../images/img1.jpg') no-repeat center/cover white; transform: translateZ(75px); } .container:hover div:nth-child(1){ transform: translateZ(200px); } .container div:nth-child(2), .container div:nth-child(8){ background: url('../images/img2.jpg') no-repeat center/cover white; transform: rotateX(-180deg) translateZ(75px); } .container:hover div:nth-child(2){ transform: rotateX(-180deg) translateZ(200px); } .container div:nth-child(3), .container div:nth-child(9){ background: url('../images/img3.jpg') no-repeat center/cover white; transform: rotateX(90deg) translateZ(75px); } .container:hover div:nth-child(3){ transform: rotateX(90deg) translateZ(200px); } .container div:nth-child(4), .container div:nth-child(10){ background: url('../images/img4.jpg') no-repeat center/cover white; transform: rotateX(-90deg) translateZ(75px); } .container:hover div:nth-child(4){ transform: rotateX(-90deg) translateZ(200px); } .container div:nth-child(5), .container div:nth-child(11){ background: url('../images/img5.jpg') no-repeat center/cover white; transform: rotateY(90deg) translateZ(75px); } .container:hover div:nth-child(5){ transform: rotateY(90deg) translateZ(200px); } .container div:nth-child(6), .container div:nth-child(12){ background: url('../images/img6.jpg') no-repeat center/cover white; transform: rotateY(-90deg) translateZ(75px); } .container:hover div:nth-child(6){ transform: rotateY(-90deg) translateZ(200px); }
2.7 CSS里面使用动画分为2步,定义动画和使用动画
@keyframes rotate{ 0%{ transform: rotateY(0deg) rotateX(0deg); } 100%{ transform: rotateY(360deg) rotateX(360deg); } }
HTML和CSS已编写结束,images里面的图片可以设置自己喜欢的图片,自己在网页上展示吧
相关推荐
- 02-27 《超越对手》读书笔记PPT。项目经理必备的四个实战技能。一、文案写作能力。二、讲演能力。三、调研能力。四、团队培养的能力。
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序,Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 10-04 腾讯视频生成的Html代码
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-