css版シームレススクロール
7816 ワード
Examples
<!--
.mar {
width: 363px;
height: 100px;
border: 1px solid red;
overflow: hidden
}
.mar_bd {
width: 712px;
height: 100px;
-webkit-animation: move 10s linear infinite
}
@-webkit-keyframes move {
0% {
-webkit-transform: translate(0, 0px);
}
100% {
-webkit-transform: translate(-363px, 0px);
}
}
-->
<!--
.mar {
width: 363px;
height: 100px;
border: 1px solid red;
overflow: hidden
}
.mar_bd {
width: 712px;
height: 100px;
-webkit-animation: move 10s linear infinite
}
@-webkit-keyframes move {
0% {
-webkit-transform: translate(0, 0px);
}
100% {
-webkit-transform: translate(-363px, 0px);
}
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<style>
.mar {
width: 363px;
height: 100px;
border: 1px solid red;
overflow: hidden
}
.mar_bd {
width: 712px;
height: 100px;
-webkit-animation: move 10s linear infinite
}
@-webkit-keyframes move {
0% {
-webkit-transform: translate(0, 0px);
}
100% {
-webkit-transform: translate(-363px, 0px);
}
}
</style>
<div class="mar">
<div class="mar_bd"><img src="http://457375608.github.io/public/images/test01.jpg" alt=""></div>
</div>
</body>
</html>