CSS3 HTML5网页动画时钟特效

2024-09-05 12:18:51

字体：大中小

来源：转载

供稿：网友

一款运行于HTML5环境的CSS3动画时钟特效，希望大家喜欢这个效果，本效果在网页打开的时候才可以看到，会看到一个时钟伴随动画慢慢出现，不过测试发现，这个CSS3网页时钟并不能随系统时间走动，只是一个动画样式，学习CSS3技术有用。

<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>

上一篇：css3 html5文字霓虹灯交替闪烁效果

下一篇：圆角带阴影的HTML5 Facebook登录表单