zoukankan      html  css  js  c++  java
  • 模拟摩天轮的效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>纯CSS3模拟摩天轮效果</title>
    <style>
    	
    .sunline{
    	position:relative;
    	height: 400px;
    	 400px;
    	border: 2px solid transparent;
    	border-radius: 50%;
    	margin: 50px 0 0 50px;
    	display: flex;
    	animation: rotate 10s infinite linear;
    
    }
    .sun{
    	height: 100px;
    	 100px;
    	margin: auto;
    	background-color: red;
    	border-radius: 50%;
    	box-shadow: 5px 5px 10px red,-5px -5px 10px red,5px -5px 10px red,-5px 5px 10px red;
    
    }
    
    .earth{
    	margin: auto;
    	height: 50px;
    	 50px;
    	background-color: blue;
    	/*border-radius: 50%;*/
    	animation: -rotate 10s infinite linear;
    }
    
    @keyframes rotate{
    	100%{transform:rotate(360deg);}
    }
    @keyframes -rotate{
    	100%{transform:rotate(-360deg);}
    }
    </style>
    </head>
    <body>
    
    <div class="box">
    	<div class="sunline">
    		<div class="sun"></div>
    		<div class="">
    			<div class="earth"></div>
    		</div>
    	</div>
    </div>
    </body>
    

      

  • 相关阅读:
    CF321B Solution
    CF722D Solution
    CF729E Solution
    CF1447E Solution
    CF962F Solution
    DropDownList绑定数据
    连接数据库
    jqm随记的东西
    正则表达式过滤超链接内容(.net)
    linq lambda操作list的例子
  • 原文地址:https://www.cnblogs.com/adouwt/p/7390550.html
Copyright © 2011-2022 走看看