使用css3的選取框效果

我想使用css3獲得選取框效果。它沿X軸工作，但我希望它沿Y軸工作，即從下到上。這裏是我的代碼使用css3的選取框效果

的Index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="main.css"> 
</head> 
<body> 
<h1 class="marquee"> 
    <span>Hi I m ur marquee!!</span> 
</h1> 
</body> 
</html>

的CSS

@keyframes marquee { 
0% { -webkit-transform: translate(0,0); } 
100% { -webkit-transform:translate(-100%,0); } 
} 

@-webkit-keyframes marquee { 
0% { -webkit-transform: translate(0,0); } 
100% { -webkit-transform:translate(-100%,0); } 
} 

.marquee { 
width: 100%; 
overflow: hidden; 
white-space: nowrap; 
animation: marquee 17s linear infinite; 
-webkit-animation: marquee 17s linear infinite; 
    } 

     .marquee:hover { 
-webkit-animation-play-state: paused; 
animation-play-state: paused; 
}`

來源

2014-12-28 kdr

如果我理解正確的話，你就需要改變持續性效應-webkit-transform:translate(x,y);y值我已經改變100%至50%並將高度設置爲100％

html, 
 
body, 
 
h1 { 
 
    height: 100% 
 
} 
 

 
@-webkit-keyframes marquee { 
 
    0% { 
 
    -webkit-transform: translate(0, 0%); 
 
    } 
 
    25% { 
 
    -webkit-transform: translate(0, -30%); 
 
    } 
 
    26% { 
 
    opacity:0; 
 
    -webkit-transform: translate(0, 110%); 
 
    } 
 
    27% { 
 
    opacity:1; 
 
    -webkit-transform: translate(0, 110%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(0, 0%); 
 
    } 
 
    
 
} 
 
.marquee { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    -webkit-animation: marquee 5s linear infinite; 
 
} 
 
.marquee:hover { 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
`

<h1 class="marquee"> 
 
    <span>Hi I m ur marquee!!</span> 
 
</h1>

來源

2014-12-28 15:56:47

嗨@Vitorino謝謝你這麼多的響應。效果幾乎可以，但仍需要2次修改。這裏的文本是從底部到頂部移動，在達到頂部後移回底部。我希望它從屏幕移出，當它達到頂部並從底部出現時。Like this http://codepen.io/aamirafridi/pen/GgoXyy – kdr

我編輯了我的答案，請檢查@kdr –

非常感謝您的支持時間和精力:) – kdr

使用css3的選取框效果

回答

相關問題