首頁 > 開發者 > 手機程式開發

旋轉 移動 風車效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：20px   圖片   hid   bubuko   yun   sheet   pos   ati   mes   

HTM

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="qwe.css">
</head>
<body>
<div class="ggt">
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="hh"></div>
<div class="yun">
<div class="hun"></div>
<div class="hun1"></div>
<div class="hun2"></div>
<div class="hun3"></div>
<div class="hun4"></div>
</div>
<div class="yun1">
<div class="hun17"></div>
<div class="hun11"></div>
<div class="hun21"></div>
<div class="hun31"></div>
<div class="hun41"></div>
</div>

</body>
</html>

 

CSS

.box{
width: 0;
height: 0;
background-color: white;
/* margin:0 auto; */
/* margin-top:100px; */
border-left: 80px solid black;
/* border-right: 80px solid transparent; */
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
position: absolute;
left: 0px;
top: 82px;

}
.hh{
width: 10px;
height: 150px;
background-color: black;
position: absolute;
right: 200px;
bottom: 40px;
}
.ggt{
width: 180px;
height: 180px;
background-color: white;
margin:0 auto;
/* position: relative; */
animation: img 0.1s linear infinite;
position: absolute;
right: 115px;
bottom: 110px;
}
@keyframes img{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.box1{
width: 0;
height: 0;
background-color: white;
/* margin:0 auto; */
/* margin-left: 300px solid black; */
/* border-left: 300px solid black; */
border-right: 80px solid black;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
position: absolute;
right: 0;
top: 82px;
}
.box2{
width: 0;
height: 0;
background-color: white;
/* margin:0 auto; */
/* margin-left: 300px solid black; */
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 82px solid black;
/* border-top: 300px solid transparent; */
position: absolute;
bottom: 0;
right: 82px;
}
.box3{
width: 0;
height: 0;
background-color: white;
/* margin:0 auto; */
/* margin-left: 300px solid black; */
border-left: 8px solid transparent;
border-right: 8px solid transparent;
/* border-bottom: 300px solid black; */
border-top: 82px solid black;
position: absolute;
top: 0;
right: 82px;
}
.box4{
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 80px;
top: 80px;

}
.yun{
width: 200px;
height: 100px;
background-color: black;
border-radius: 50% 50% 30% 30%;
/* overflow: hidden; */
margin:30px;
position: relative;
transition: all 150s linear;
animation: ll 20s linear infinite;
}
@keyframes ll{
from{
margin-left: 1px;
}
to{
margin-left: 1100px;
}
}
.hun{
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0;
top: -10px;
}
.hun1{
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
position: absolute;
left: -20px;
top: 20px;
}
.hun2{
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 60px;
top: -20px;
}
.hun3{
width: 80px;
height: 80px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 120px;
top: -15px;
}
.hun4{
width:70px;
height:70px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 150px;
top: 10px;
}


.yun1{
width: 200px;
height: 100px;
background-color: black;
border-radius: 50% 50% 30% 30%;
/* overflow: hidden; */
margin-top:30px;
margin-left: 400px;
position: relative;
transition: all 25s linear;
animation: lll 25s linear infinite;
}
@keyframes lll{
from{
margin-left: 1px;
}
to{
margin-left: 1100px;
}
}
.hun17{
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 0;
top: -10px;
}
.hun11{
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
position: absolute;
left: -20px;
top: 20px;
}
.hun21{
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 60px;
top: -20px;
}
.hun31{
width: 80px;
height: 80px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 120px;
top: -15px;
}
.hun41{
width:70px;
height:70px;
background-color: black;
border-radius: 50%;
position: absolute;
left: 150px;
top: 10px;
}

旋轉 移動 風車效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
（十）——WebApp
win10提示“無法設定行動熱點 請開啟WLAN”的解決方案
c#通過app.manifest使程式以管理員身份運行
解決Android 6.0擷取wifi Mac地址為02:00:00:00:00:00問題【轉】
Android TextView加底線的幾種方式
《Android應用效能最佳化》 第8章 圖形

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More