论坛

标题: hover和圣诞树结合练习,树根有上移效果,但是三角出不来? [打印本页]

作者: 牛轧糖    时间: 2018-3-26 20:56
标题: hover和圣诞树结合练习,树根有上移效果,但是三角出不来?
hover和圣诞树结合练习,树根和最下面的三角都设置了上移效果,但是树根有效果,三角不能动。
请问老师这是哪里的问题?



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.sanjiao1 {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: green;
    margin: 0px auto;
}
.sanjiao2 {
    width: 0;
    height: 0;
    border: 150px solid transparent;
    border-bottom-color: green;
    margin: -180px auto 0px;
}
.sanjiao3 {
    width: 0;
    height: 0;
    border: 200px solid transparent;
    border-bottom-color: green;
    margin: -230px auto 0px;
}
.sanjiao4 {
    width: 80px;
    height: 150px;
    background: #04331B;
    margin: 0px auto;
    box-shadow: 0 10px 10px;
    transition: 0.3s
}
.sanjiao3:hover {
    width: 0;
    height: 0;
    border: 200px solid transparent;
    border-bottom-color: green;
    margin: -240px auto;
}
.sanjiao4:hover {
    width: 80px;
    height: 150px;
    background: #04331B;
    margin: -10px auto;
    box-shadow: 0 10px 15px;
}
</style>
</head>

<body>
<div class="sanjiao1"></div>
<div class="sanjiao2"></div>
<div class="sanjiao3"></div>
<div class="sanjiao4"></div>
</body>
</html>

[attach]124677[/attach][attach]124676[/attach]





作者: lori棒棒糖    时间: 2018-3-29 17:56
sanjiao3:hover 冒号错了,用了中文的冒号不对。
然后sanjiao3少设置了一个 transition: 0.3s;
sanjiao3:hover 也少设置了一个 margin: -240px auto 0px;
注意细节,马虎不得,少一个或错一个符号都不行,多加练习,加油!

作者: 牛轧糖    时间: 2018-3-30 09:46
lori棒棒糖 发表于 2018-3-29 17:56
sanjiao3:hover 冒号错了,用了中文的冒号不对。
然后sanjiao3少设置了一个 transition: 0.3s;
sanjiao3:h ...

嗯嗯,谢谢!




欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1