@charset "utf-8"; { margin:0; padding:0; } / 通配符所有元素 html中的标签有一些默认央视，清除掉所有的默认间距/ body{ background: url(../img/bj1.jpg) no-repeat; background-size: cover; } .show{ width:700px; height:400px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; animation:rotate 35s linear infinite; / 3ds属性 */ transform-style:preserve-3d; } @keyframes rotate{ 0%{transform:rotateX(0deg) rotateY(0deg);} 25%{transform:rotateX(5deg) rotateY(90deg);} 50%{transform:rotateX(0deg) rotateY(180deg);} 75%{transform:rotateX(-5deg) rotateY(270deg);} 100%{transform:rotateX(0deg) rotateY(360deg);} } .show img{ width: 100%; height: 100%; position:absolute; border: 50px solid #fff; boeder-radius:30px; top:0; left:0; transition:all 1s; } .show img:nth-child(1) { transform:rotateX(5deg ) rotateY(36deg) translateZ(4000px); } .show img:nth-child(2) { transform: rotateX(5deg )rotateY(72deg) translateZ(3000px); } .show img:nth-child(3) { transform: rotateX(5deg )rotateY(108deg) translateZ(3000px); } .show img:nth-child(4) { transform: rotateX(5deg )rotateY(144deg) translateZ(3000px); } .show img:nth-child(5) { transform:rotateX(5deg ) rotateY(180deg) translateZ(3000px); } .show img:nth-child(6) { transform:rotateX(5deg )rotateY(216deg) translateZ(3000px); } .show img:nth-child(7) { transform: rotateX(5deg )rotateY(252deg) translateZ(3000px); } .show img:nth-child(8) { transform: rotateX(5deg )rotateY(288deg) translateZ(3000px); } .show img:nth-child(9) { transform: rotateX(5deg )rotateY(324deg) translateZ(3000px); } .show img:nth-child(10) { transform:rotateX(5deg ) rotateY(360deg) translateZ(3000px); } .rubbit{ width:250px; height:250px; position:absolute; top:5%; left:5%; } .show img:hover{ position:absolute; top:-700px; width:2200px; height:1400px; background-size: cover; z-index: 1; border: 100px solid #fff; boeder-radius:30px; }修改润色一下

时间: 2024-02-03 08:04:26 浏览: 96

ZIP

HTML-CSS-2_下午

HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两大核心技术。在"HTML-CSS-2_下午"这个主题中，我们可以深入探讨这两个领域的多个知识点。 HTML作为网页内容的结构语言，其核心在于标记。在下午的学习中，你可能接触了以下HTML标签： 1. **基础元素**：`<html>`、`<head>`、`<body>`是HTML文档的基本框架。`<head>`用于包含元数据，如标题（`<title>`）、字符集（`<meta charset>`），而`<body>`则承载网页的可见内容。 2. **文本元素**：`<p>`定义段落，`<h1>`至`<h6>`定义标题，`<strong>`强调文本，`<em>`表示强调或着重，`<a>`创建链接。 3. **列表**：`<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。 4. **图像**：`<img>`引入图片，通过`src`属性指定图片路径，`alt`属性提供替代文本。 5. **链接与导航**：`<nav>`定义导航区域，`<a>`配合`href`属性实现页面间的跳转。 6. **表格**：`<table>`、`<tr>`、`<th>`、`<td>`用于创建和布局表格。 7. **表单**：`<form>`、`<input>`、`<textarea>`、`<select>`、`<button>`用于创建用户交互的表单元素。接下来，CSS是用于表现HTML或XML（包括SVG、MathML等各种XML方言）文档的样式语言。在下午的课程中，你可能学习了： 1. **选择器**：基础选择器如类（`.class`）、ID（`#id`）、元素（`element`）和通配符（`*`）选择器用于定位HTML元素。 2. **属性和值**：颜色（`color`）、字体（`font`）、尺寸（`width`、`height`）、位置（`position`、`top`、`right`、`bottom`、`left`）等属性及其对应的值，用于定制元素的外观。 3. **盒模型**：理解内容（content）、内边距（padding）、边框（border）和外边距（margin）对元素大小和位置的影响。 4. **布局技术**：流体布局、网格系统（`display: grid`）、Flexbox（`display: flex`）和CSS Grid为响应式设计提供了强大的工具。 5. **响应式设计**：使用`@media`查询适应不同设备屏幕尺寸，实现自适应布局。 6. **CSS预处理器**：如Sass、Less可以预编译CSS，提供变量、嵌套规则、混合等高级功能。 7. **CSS3新特性**：动画（`animation`）、过渡（`transition`）、阴影（`box-shadow`、`text-shadow`）、渐变（linear-gradient、radial-gradient）等增强了视觉效果。 8. **伪类和伪元素**：`:hover`、`:active`、`:focus`等伪类用于改变元素在特定状态下的样式，`::before`和`::after`伪元素在元素前后插入内容。通过这些HTML和CSS的知识，你可以构建出具有丰富样式和动态交互的网页。持续学习和实践，将使你在Web开发领域更加熟练和自信。在"HTML-CSS-2_Afternoon-master"这个项目中，你有机会把这些理论知识转化为实际的网页设计作品。

这段代码是一个简单的 HTML 和 CSS 页面，实现了一个旋转的立方体展示图片。其中用到了 3D 变换属性，包括 transform-style 和 transform，通过不同的角度和距离实现图片的立体效果。同时，也设置了动画效果和 hover 事件，使得页面更加生动有趣。如果需要进一步了解这些属性的用法，可以查看相关的 CSS 文档和教程。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通