神奇的css之ktv字幕效果

 

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

@-webkit-keyframes loop {

0% {

background-position: -800px 0;

}

100% {

background-position: 0 0;

}

}

 

.text2 {

width: 800px;

height: 78px;

line-height: 78px;

font-size: 40px;

font-family: '微軟雅黑';

font-weight: bold;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-color: #000;

background-image: url('./images/iphone.jpg');

background-repeat: no-repeat;

background-position: -800px 0;

-webkit-animation: loop 10s linear infinite;

}

</style>

</head>

 

<body>

<div class="text2">上的這款全新顯示屏,是 iPhone 迄今最先進的 LCD 屏。創新的背光設計,讓顯示屏一直延伸到了機身邊角。因此看上去,整個屏幕都被鮮活生動的色彩鋪滿。</div>

</body>

 

</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章