作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在为我的主页使用 CSS 动画。由于没有 onHover I 的对立面试过that :
但它对我来说真的不起作用。
看到那个:
fiddle
https://jsfiddle.net/mus8sdL0/ `
感谢帮助
最佳答案
试试这个..
HTML
<section class="half">
<div id="containertop">
<div class="titletextup">
UP
<br>
<div id="triangle-facing-top"></div>
</div>
</div>
</section>
<section class="half">
<div class="titletextdown">
<div id="triangle-facing-bottom"></div>
<br>
DOWN
</div>
</section>
CSS
@charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
color:white;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
border-bottom:10px;
border-left:0px;
border-right:0px;
border-top:0px;
border-bottom-color:white;
border-style:solid;
}
#containertop {
background: blue;
height: 100%;
}
.half:first-child > #containertop{
position:absolute;
z-index:1;
width:100%;
top:0px;
transition: 2s all ease;
}
.half:first-child:hover > #containertop{
top: -100%;
}
.half:last-child {
background: green;
border-top:10px;
border-bottom:0px;
border-left:0px;
border-right:0px;
border-top-color:white;
border-style:solid;
}
.titletextup{
text-align:center;
}
.titletextdown{
text-align:center;
}
#triangle-facing-top {
display: inline-block;
margin: 72px;
border-right: 24px solid; border-bottom: 24px solid;
width: 120px; height: 120px;
transform: rotate(-135deg);
display: inline-block;
-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-o-transform:rotate(-135deg);
color: white;
}
#triangle-facing-bottom {
display: inline-block;
margin: 72px;
border-right: 24px solid; border-bottom: 24px solid;
width: 120px; height: 120px;
transform: rotate(45deg);
display: inline-block;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
color:white;
}
看看这个 Fiddle
底部和顶部动画
Check out this fiddle
关于css - onHover 的反转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31450960/
如何将“off”指令应用于指定处理程序? 例如 var $btn = $("#theBtn"); var namedHandler = $btn.on("click", function() { //
我正在尝试使用以下标记设计一个 Breadcrumb 组件; Home Home Users 我正在分离 使用 ::pseu
我在使用以下代码时遇到问题。 import urllib2 import csv from bs4 import BeautifulSoup soup = BeautifulSoup(urllib2.
我是一名优秀的程序员,十分优秀!