CSS3+HTML5网页动画时钟特效

时间：2013-08-28 08:37 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<title>网页时钟特效</title>
<style>
body{background: #575757;}div{position: absolute;}#clock{left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;}#clock-outer{left: 0;top: 0;width: 164px;height: 164px;border: 18px solid #fff;border-radius: 200px;-webkit-animation: outer 1.4s;}#clock-inner{left: 18px;top: 18px;width: 164px;height: 165px;border-radius: 164px;background: #e3e3e3;box-shadow: inset 0 10px 10px #aaa, 0 40px 45px #000;-webkit-transform-origin: center center;-webkit-animation: inner 1.8s;}#clock-center{left: 90px;top: 90px;width: 20px;height: 20px;border-radius: 20px;background: #fff;box-shadow: 0 3px 3px #aaa;-webkit-animation: outer 1.4s;}.pointer{background: #fff;box-shadow: 0 0 5px #ddd;-webkit-transform-origin: top center;top: 100px;}.hour{width: 12px;height: 55px;left: 94px;border-radius: 14px;-webkit-transform: rotate(270deg);}.minute{width: 10px;height: 70px;left: 95px;border-radius: 10px;-webkit-transform: rotate(180deg);}.shadow{opacity: 0;}#pointer-hour-1{-webkit-animation: hour 2.5s;}#pointer-hour-2{-webkit-animation: hour-shadow .5s 1.4s;}#pointer-hour-3{-webkit-animation: hour-shadow .5s 1.6s;}#pointer-hour-4{-webkit-animation: hour-shadow .5s 1.8s;}#pointer-minute-1{-webkit-animation: minute 2.4s;}#pointer-minute-2{-webkit-animation: minute-shadow .5s 1.4s;}#pointer-minute-3{-webkit-animation: minute-shadow .5s 1.6s;}#pointer-minute-4{-webkit-animation: minute-shadow .5s 1.8s;}@-webkit-keyframes inner{0%{-webkit-transform: scale(0);opacity: 0;}70%{-webkit-transform: scale(1.05);}80%{-webkit-transform: scale(0.9);}100%{-webkit-transform: scale(1);opacity: 1;}}@-webkit-keyframes outer{0%{opacity: 0;}50%{opacity: 0;}100%{opacity: 1;}}@-webkit-keyframes center{0%{opacity: 0;}80%{opacity: 0;}100%{opacity: 1;}}@-webkit-keyframes hour{0%{opacity: 0;}70%{opacity: 0;-webkit-transform: rotate(0);}100%{opacity: 1;-webkit-transform: rotate(270deg);}}@-webkit-keyframes minute{0%{opacity: 0;}70%{opacity: 0;-webkit-transform: rotate(0);}100%{opacity: 1;-webkit-transform: rotate(180deg);}}@-webkit-keyframes hour-shadow{0%{opacity: 0;-webkit-transform: rotate(0);}100%{opacity: 1;-webkit-transform: rotate(270deg);}}@-webkit-keyframes minute-shadow{0%{opacity: 0;-webkit-transform: rotate(0);}100%{opacity: 1;-webkit-transform: rotate(180deg);}}
</style>
<div id="clock">
<div id="clock-inner"></div>
<div id="clock-outer"></div>
<div id="pointer-hour-4" class="pointer hour shadow"></div>
<div id="pointer-hour-3" class="pointer hour shadow"></div>
<div id="pointer-hour-2" class="pointer hour shadow"></div>
<div id="pointer-hour-1" class="pointer hour"></div>
<div id="pointer-minute-4" class="pointer minute shadow"></div>
<div id="pointer-minute-3" class="pointer minute shadow"></div>
<div id="pointer-minute-2" class="pointer minute shadow"></div>
<div id="pointer-minute-1" class="pointer minute"></div>
<div id="clock-center"></div>
</div>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

一款运行于HTML5环境的CSS3动画时钟特效，希望大家喜欢这个效果，本效果在网页打开的时候才可以看到，会看到一个时钟伴随动画慢慢出现，不过测试发现，这个CSS3网页时钟并不能随系统时间走动，只是一个动画样式，学习CSS3技术有用。 CSS3+HTML5网页动画时钟特效由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shijian/5509.html

CSS3+HTML5网页动画时钟特效

网页特效