<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{width:300px;height:100px;position: relative;}
.con .up,.con .down{position:absolute;width:0;height:0;border-radius:50%;border:50px solid darkcyan;border-top:50px solid transparent;}
.con .up{animation: updhua 1s infinite alternate;}
.con .down{border-top:50px solid darkcyan;border-bottom:50px solid transparent;animation: downdhua 1s infinite alternate;}
.con .red{width:20px;height:20px;border-radius: 50%;background:red;position: absolute;left:350px;top:40px;animation: reddhua 2s infinite;}
@keyframes updhua {
from{
transform: rotate(0deg);
}
to{
transform: rotate(90deg);
}
}
@keyframes downdhua {
from{
transform: rotate(0deg);
}
to{
transform: rotate(-90deg);
}
}
@keyframes reddhua {
from{
left:350px;
opacity: 1;
}
to{
left:40px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="con">
<div class="up"></div>
<div class="down"></div>
<div class="red"></div>
</div>
</body>
</html>CSS2D--喫豆子游戲
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
微信端禁止長按保存圖片到本地
添加一行樣式搞定 img{ pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none; }