-
慕仙7127046
2025-10-30
- 了tu d ju
- 0回答·11浏览
-
GIAO01
2024-08-17
- 把图片路径改为这个就可以通过了
- 0回答·256浏览
-
weixin_慕虎9268683
2024-03-12
-
住月亮上的猫
2024-01-05
- 老师，我们家这个课后作业怎么这么难啊？？？？？
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>制作3D旋转导航</title>
<style>
* {
list-style: none;
}
/*任务一：引入本地字体文件*/
body {
background-color: #edecec;
}
/* basic menu styles */
.nav-menu {
display: block;
background: #74adaa;
width: 950px;
margin: 50px auto 150px;
}
.nav-menu>li {
display: inline;
float: left;
border-right: 1px solid #94c0be;
}
.nav-menu>li:last-child {
border-right: none;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*调用本地字体*/
font-family: 'sansationregular';
font-smoothing: antialiased;
text-transform: capitalize;
overflow: visible;
line-height: 20px;
font-size: 20px;
padding: 15px 30px 15px 31px;
}
.three-d {
/* 任务三、设置3D舞台布景 */
perspective: 200px;
/*任务四、设置3D舞台布景过渡效果*/
transition: all 0.7s linear;
position: relative;
}
.three-d:not(.active):hover {
cursor: pointer;
}
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
.three-d:not(.active):hover .three-d-box,
.three-d:not(.active):focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
/*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
transform: translateZ(-25px);
transition: all .3s ease-out;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*任务七、给导航设置3D前，与3D后变形效果*/
.front {
transform: rotateX(0deg) translateZ(25px);
}
.back {
transform: rotateX(-90deg) translateZ(25px);
color: #FFE7C4;
}
.front,
.back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #74adaa;
padding: 15px 30px 15px 31px;
color: white;
pointer-events: none;
box-sizing: border-box;
}
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
background-color: #51938F;
background-size: 5px 5px;
background-position: 0 0, 30px 30px;
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
/*background-image: -webkit-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-ms-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-moz-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),-o-linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238),linear-gradient(45deg,#434238 25%,transparent 25%,transparent 75%,#434238 75%,#434238);*/
}
.nav-menu ul {
position: absolute;
text-align: left;
line-height: 40px;
font-size: 14px;
width: 200px;
transition: all 0.3s ease-in;
transform-origin: 0px 0px;
transform: rotateX(-90deg);
backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu>li:hover ul {
display: block;
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav-menu clearfix unstyled">
<li><a href="#" class="three-d active">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Products
<span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span>
</a></li>
<li><a href="#" class="three-d">
About
<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Contact
<span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
</a></li>
<li><a href="#" class="three-d">
Blog
<span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>
<ul class="clearfix unstyled drop-menu">
<li><a href="#" class="three-d">
Html5
<span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span>
</a></li>
<li><a href="#" class="three-d">
Css3
<span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span>
</a></li>
<li><a href="#" class="three-d">
JavaScript
<span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span>
</a></li>
<li><a href="#" class="three-d">
Videogames
<span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span>
</a></li>
</ul>
</li>
<li><a href="#" class="three-d">
Shop On-line
<span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span>
</a></li>
</ul>
</div>
</body>
</html>
- 1回答·398浏览
-
住月亮上的猫
2023-12-28
- 我怎么看不懂这个表格呢 ？？？
对父元素中所有子元素进行遍历，子元素个数假如有M个，n的值为从0开始，然后计算表达式的值，如果落在1到元素的总数之间有效，其它无效。往下n的值依次增1继续进行计算，直到计算出表达式的值不在1到M之间就不再算了。
- 1回答·405浏览
-
住月亮上的猫
2023-12-26
- 感觉好像白学了
伪元素（pseudo-elements）是 CSS 的一种机制，允许你通过 CSS 选择器向某些元素的特定部分添加样式。它们表示元素的特定部分或状态，并允许你在不改变 HTML 结构的情况下对其进行样式处理。
常见的伪元素包括
::before和::after。它们允许你在元素的内容前后插入虚拟的元素，并对其进行样式设置。例如：cssCopy codep::before { content: "Before text "; color: blue; }p::after { content: " After text"; color: red; }上述示例中，
p::before会在每个<p>元素的内容前插入带有蓝色文字的虚拟元素，而p::after会在内容后插入带有红色文字的虚拟元素。除了
::before和::after之外，还有其他伪元素，如::first-line（选择元素的第一行文本）、::first-letter（选择元素的第一个字母）等，它们允许你更精确地控制元素的特定部分而无需修改 HTML 结构。伪元素可以在页面中创建虚拟元素，并通过 CSS 对其进行样式设置，这样可以为元素添加装饰、修饰或特殊效果，同时保持 HTML 结构的清晰和完整。
- 1回答·504浏览
-
住月亮上的猫
2023-12-23
- 帮我看看我的代码问题，还有20这个取值是自己定的吗？
啊这！！！我没看到border-imagn后面的值被我不小心删掉了，但是我在任务那里没掉，对比好几次也没错，可是提交他显示出错，为什么啊，还有切割图片这个宽度值为什么是20呢
- 1回答·409浏览
-
恭喜发财兔
2023-05-14
- .wrapper>div:后面没填为什么会影响到.wrapper>p:nth-of-type(2n)
而且，即使在div后面补充好了nth-of-type,仍然会被判断成在全部元素里计算奇数的div并为之赋予背景颜色
- 1回答·685浏览
-
qq_慕UI9250496
2022-12-16
- 这里背景可以用渐变色吗？
测了下，不行
- 1回答·643浏览
-
Prette
2022-08-23
- 感觉这种比较难，马一下
嗯嗯，全部css操作还是很麻烦的。
- 1回答·699浏览
-
qq_慕无忌4562556
2022-08-09
- 使用角度改变渐变方向也可以吧
可以，效果是一模一样的
- 1回答·759浏览
-
让我们结伴而行
2022-07-29
- 为何div的第二行没显示出来呢？
因为有个空格。：empty只针对什么都没有的，包括空格
- 2回答·756浏览
-
qq_慕娘2321139
2022-06-22
- word-wrap怎么用
p.test { word-wrap:break-word; /* 换行 */ word-wrap: nowrap; /* 不换行 */ }- 1回答·763浏览
-
weixin_慕函数4443977
2022-06-01
- 如果想规定超过多少个字就出现省略号怎么办呢？
.line-limit-length {
/* 1.文字不换行 */
white-space: nowrap;
/* 2.溢出的部分隐藏 */
overflow: hidden;
/* 3.文字溢出的时候用省略号来显示 */
text-overflow: ellipsis;
}
你可以补充一个width进去，就可以控制超出文字就出现省略号
- 1回答·768浏览
-
慕哥0459333
2022-05-02
- 是默认多少字节换行还是可以设置的
和文本的大小还有容器的大小有关吧
- 1回答·756浏览
-
a8236171
2021-09-21
- 不了解这一行代码的用处
- 1回答·871浏览
-
SwainShao
2021-07-21
- 不太理解哪里错了
11行打错了。。。
- 2回答·775浏览
-
粥可温Ni
2021-04-15
- 两者之间的区别
- 1回答·744浏览
-
这是一个安静的晚上
2021-04-13
- 求大佬解释一下，为什么超出部分不能影藏
- 已采纳 qq_慕标0297594 的回答
因为你是在box1里插入的背景图片，但是把overflow属性写到box2里。但如果把overflow写到box1里，图片高度没有溢出bo1的高度所以也不会隐藏。可以直接把图片插入box2里，如果觉得这样图片不好看，可以试试把图片作为一个单独的元素用定位方式调整位置
- 1回答·680浏览
-
qq_慕标8478427
2021-04-02
- 结构性伪类选择器能用于单标签吗，为什么我的第一个Input是给了值的，第二个是没给值得，为什么都没有改变颜色
:empty伪类选择器匹配没有任何子元素的元素，而input标签里的有没有值和元素内有没有子元素是不同的。
- 1回答·736浏览
-
别喷了我很菜
2021-04-02
- Z轴的方向
- 已采纳 慕梦前来 的回答
是的，就是正对着你的脸的方向
- 1回答·1105浏览
-
星栎
2021-03-25
- 这编程得学多久才能实习？
- 1回答·744浏览
-
入幕三分
2021-03-24
- 我这个为什么没有效果？
- 已采纳 慕先生7352805 的回答
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
第一个去掉center就可以了，第二个由于是默认值，所以把ellipse center去掉就好了
- 3回答·878浏览
-
慕数据3446481
2021-03-19
- 两个并列的class同时用@media只有一个生效，另一个不生效且审查元素找不到相应CSS。
right-contant选择器的两个媒体特性都是max-width: 768px ？这不对吧？
- 1回答·737浏览
-
入幕三分
2021-03-16
- 为什么这个类没有效果？把类换成“div”却可以
- 已采纳 慕田峪8131879 的回答
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.cc:before {
content: "今天";
}
</style>
</head>
<body>
<div class="cc">吃什么呢</div>
</body>
</html>
- 3回答·711浏览
-
weixin_慕九州9449883
2021-02-23
- 矩阵这一节的内容
因为css3在历史浏览器中会有不兼容的情况，所以
-moz- 是兼容firefox火狐浏览器的
-ms代表IE浏览器私有属性;
-webkit代表chrome、safari私有属性;
-o代表Opera
- 1回答·595浏览
-
ieouewpdfij
2021-02-21
- 怎么改变字体颜色
color
- 1回答·685浏览
-
qq_慕莱坞9224316
2021-02-20
- 动画怎么制作？
看看你属性有没有写漏了
- 1回答·581浏览
-
weixin_慕容6229135
2021-01-24
- 最底下的图一直都是第五张图吗？
为什么我的图片不出来
- 1回答·715浏览
-
weixin_慕容6229135
2021-01-22
- href还有跳转页面的效果了吗？
href值是盒子的id，可以形成一个锚点。在一篇文章中，多个这样的锚点组合起来就相当于书的目录，当我点击它时时，就可以跳转到我需要的位置。
- 2回答·689浏览
