0
点赞
收藏
分享

微信扫一扫

小车

洲行 2022-03-30 阅读 49
htmlcss




<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title></title>


<style type="text/css">


#bg{width: 100%;height: 500px;background: url(img/bg.png);position: relative;}


#bg img{position: absolute;bottom: 0;left: 0;}




@-webkit-keyframes run{




49%{transform: rotateY(0);left: 95%;}


50%{transform: rotateY(180deg);left: 95%;}


99%{transform: rotateY(180deg);left: 0;}


}




#bg:hover img{animation: run 5s linear infinite;}




</style>


</head>


<body>


<div id="bg">


<img src="img/car.png" alt="" />


</div>


</body>


</html>




<!DOCTYPE html>


<html>


<head>


<meta charset="UTF-8">


<title></title>


<style type="text/css">


#bg{width: 100%;height: 500px;background: url(img/bg.png);position: relative;}


#bg img{position: absolute;bottom: 0;left: 0;}




@-webkit-keyframes run{




49%{transform: rotateY(0);left: 95%;}


50%{transform: rotateY(180deg);left: 95%;}


99%{transform: rotateY(180deg);left: 0;}


}




#bg:hover img{animation: run 5s linear infinite;}




</style>


</head>


<body>


<div id="bg">


<img src="img/car.png" alt="" />


</div>


</body>


</html>



举报

相关推荐

0 条评论