• 当前标签:高级动画

程序开发 CSS时钟、高级动画

CSS时钟: HTML部分: <body> <div id="dot"></div> <div id="second"> <span></span> </div> <div id="minute"> <span></span> </div> <div id="hour"> <span></span> </div> </body> CSS部分: body{ height: 100%; margin: 0; background-image: url(clock.jpg); background-repeat: no-repeat; background-position: center center; } #dot{ width: 30px; height: 30px; border-radius: 50%; background-color: #ccc; position: absolute; top: calc(50% - 30px/2); left: calc(50% - 30px/2); z-index: 1000; } #second{ width: 600px; height: 10px; /*background-color: red;*/ position: absolute; top: calc(50% - 10px / 2); left: calc(50% - 600px / 2); animation: rotate 60s linear infinite; z-index: 900; } #second span{ width: 350px; height: 3px; background-color: yellow; display: block; margin-top: 3.5px; border-radius: 1.5px; } @keyframes rotate{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } } #minute{ width: 500px; height: 10px; /*background-color: red;*/ position: absolute; top: calc(50% - 10px / 2); left: calc(50% - 500px / 2); animation: rotate 3600s linear infinite; z-index: 800; } #minute span{ width: 280px; height: 6px; background-color: blue; display: block; margin-top: 2px; border-radius: 3px; } #hour{ width: 400px; height: 10px; /*background-color: red;*/

2017-05-11 23:13:28 39 0 0
阅读详情
  • 1
前往