HTML+CSS實現摩天輪效果
阿新 • • 發佈：2020-09-03
實現效果：小人跟著輪子轉，但小人要一直底部朝下
HTML程式碼：
<body> <div class="bbox"> <div class="box"> <img src="./images/fsw.png" alt=""> <img src="./images/girl.png" alt="" class="pic1" id="yuan1"> <img src="./images/girls.png" alt="" class="pic1" id="yuan2"> <img src="./images/boy.png" alt="" class="pic1" id="yuan3"> <img src="./images/dog.png" alt="" class="pic1" id="yuan4"> <img src="./images/shamegirl.png" alt="" class="pic1" id="yuan5"> <img src="./images/mimi.png" alt="" class="pic1" id="yuan6"> <img src="./images/hairboy.png" alt="" class="pic1" id="yuan7"> <img src="./images/mudog.png" alt="" class="pic1" id="yuan8"> </div> <img src="./images/big-title.png" alt="" class="btit"> <img src="./images/arrow.png"alt="" class="ltit"> <img src="./images/bracket.png" alt="" class="ganzi"> </div> </body>
CSS程式碼：
<style> *{ margin: 0; padding: 0; } body,html{ height:100%; } body{ background: url(./images/2.jpg); width: 100%; } .bbox{ width: 600px; height: 600px; /* border: 1px solid #000; */ margin: 100px auto; position: relative; } .box{ width: 400px; height: 400px; margin: 0 auto; position: relative;; /* border: 1px solid #000; */ animation: one 10s linear infinite; } .box img{ width: 100%; height: 100%; } .box .pic1{ width: 80px; height: 80px; transform-origin:center 20%; position: absolute; animation: one1 10s linear infinite; } .box #yuan1{ top: 0; left: 0; margin: auto; right: 0px; } .box #yuan2{ bottom: -30px; left: 0; margin: auto; right: 0px; } .box #yuan3{ bottom: 0; right: -20px; margin: auto; top: 0px; } .box #yuan4{ bottom: 0; left: -20px; margin: auto; top: 0px; } .box #yuan5{ right: 40px; top: 40px; } .box #yuan6{ left: 40px; top: 40px; } .box #yuan7{ left: 30px; bottom: 40px; } .box #yuan8{ right: 30px; bottom: 40px; } @keyframes one{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} } @keyframes one1{ from{transform: rotate(0deg);} to{transform: rotate(-360deg);} } .bbox .btit{ width: 250px; height: 100px; position: absolute; top: 0; bottom: 240px; left: 0; right: 0; margin: auto; } .bbox .ltit{ width: 50px; height: 50px; position: absolute; top: 100px; bottom: 240px; left: 0; right: 0; margin: auto; } .bbox .ganzi{ width: 200px; position: absolute; top: 320px; bottom: 240px; left: 0; right: 0; margin: auto; } </style>
注意：讓小人向相反的方向轉，就可使其底部一直朝下