css3制作小时钟

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{      padding:0;      margin:0;    }    #hd{      width:700px;      height:700px;      background: url("zhong2.jpg") no-repeat;      -webkit-background-size: 100% 100%;      background-size: 100% 100%;      /*设置模糊背景*/      box-shadow: 10px 10px 10px rgba(0,0,0,0.4);      /*box-shadow: 10px 10px 10px black;*/      position: relative;      margin:0  auto;      border-radius: 50%;    }    #hd img{      width:35px;      position: absolute;      left:335px;      top:113px;      animation: run 60s linear infinite;      /*设置旋转基准点*/      transform-origin: 50% 67%;

    }    @keyframes run {      from{        transform: rotate(0deg);      }      to{        transform: rotate(360deg);      }    }  </style></head><body><div id="hd">  <img src="zhizhen3.jpg" ></div></body></html>

---恢复内容结束---

时间： 2024-08-24 12:46:31

css3制作小时钟的相关文章

自做的小时钟css3+js

原理参考http://www.yyyweb.com/demo/colorful-clock/index.html 一个挺漂亮的小时钟,虽然挺简陋的. 源代码是自己写. 实现起来不怎么难,大家学习学习吧. 其中用的css3的flex弹性盒子,个人觉得有了这个弹性盒子之后,水平的布局都简单了,不过flex兼容性比较低,所以一些小demo可以用上! 效果如图: 以上纯属个人观点,有误请大家指点出来. 源码附上:https://github.com/ScauZhang/time

一款CSS3制作个性网页时钟

<!DOCTYPE html> <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>一款CSS3制作个性网页时钟丨电影院椅子|kiddy安全座椅</titl

css3制作旋转立方体相册

css3制作旋转立方体相册首先让我们来看一下最终效果图: 当鼠标放在图片上是介个样子滴: 是不是觉得很好看?那接下来就一起制作吧! 我个人觉得编程,首先是思路,然后是代码,一起分析一下这个效果的思路. 1.背景颜色,它属于一种渐变的背景色(当然这不是重点,可以根据自己的爱好进行设置): 2.我们可以观察一下他是有两个旋转的立方体,大立方体套小立方体: 3.点击图片的时候,外部大立方体向外延伸. 有了这个大体的思路我们就可以开始敲代码了. 1.新建文件夹将各个不同类型的代码进行归类是很有必要的

纯CSS3制作卡通场景汽车动画效果

前言今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越来越多.今天这个分享是PC端的案例,因为我做的是大场景来的,起因还是我无意间看到一张卡通图片.于是我突发灵感,就趁热打铁使用CSS3动画把它按照自己的想法实现了出来.接下来,就让我们一起进入这个好玩的分享吧! 预览学习一个案例要有热情,就应该先看一下案例的效果,所以,下图为我录的gif图片,大家先

3D Grid Effect – 使用 CSS3 制作网格动画效果

今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的??.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此创建了两个演示,分别演示垂直和水平旋转网格项. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 您可能感兴趣的相关文章创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果你见过吗?9款超炫的

js+css3实现动态时钟-------Day66

昨天搬家一天,宽带到最后也没有安装上,颇为恼火,但是收拾了一天新租的房屋,倒有了颇多的想法,这里先来实现一个--动态时钟(已经上传到资源里了,图片整的有些粗糙了,汗...) 这里来记录下,这个看起来简单好实现的功能,我在实现的过程中碰到了哪些问题,因为这时还没查看网上的代码,只是根据自己现阶段的学习来做的,可能会有些麻烦,有些粗糙,但是终归是实现了这个效果,心里还是小开心了下. 先来张最终实现的效果图(静态图片); 首先准备素材,我从网上搜到了一个时钟的素材,谁让我的ps还菜的菜呢,然后我有了表

css3-手把手 transform 小时钟

学习css3ing,正在学习transfomr,突发奇想用此做个小时钟,开始吧: 准备前期工作,把时钟的表盘,时分秒针,实时时间标签的大概样子做好,效果如图: html代码如下: <div class="main"> <div id="timeLabel"></div> <div id="hour"></div> <div id="minute"><

10.14 CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title> <style type="text/css"> html{ background:linear-gradient(#ff0 0%,#F00 80%); height: 100%; } .wrap{

利用html5制作一个时钟动画

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function dra