css3++js钟表

【css3++js钟表】的更多相关文章

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width:200px; height:200px; border-radius: %; border:1px solid #; position: relative; margin:5…

有一天看到css3旋转这个属性,突发奇想的写了一个钟表(没做浏览器兼容),来一起看看是怎么写的吧! 先给个成品图,最终结果是个样子的(动态的). 首先,思考了一下页面的布局,大致需要4层div,最底层是一个表盘的背景图,然后其余3层分别是时针,分针,秒针的图层. html代码如下 ↓ <div class="dial"> </div> <div class="bigdiv bigdiv1" id="secondHand&quo…

js css3实现钟表效果

原理: 利用transform-origin改变旋转的圆心,实现秒数和分钟数的刻度线,利用transfrom translate实现钟表小时刻度的显示 html: <div class="time"> <div class="line"></div> <div class="hour-line"></div> <div class="second-line"&g…

用CSS3实现钟表效果

背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来. 效果图实现过程 1.首先我们需要在页面中写出一个静态的钟表效果.首先我们需要一个表盘div wrap 对其进行简单的样式设置,用border-radius属性将其设置成圆形. <div id="wrap"></div> #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;b…

css3+js打造炫酷图片展示

<!DOCTYPE html> <html onselectstart="return false">  <head lang="en"> /*onselectstart="return false"*/ <meta charset="UTF-8"> <ti…

CSS3+Js制作的一款响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 1 2 3 4 5 6 7 8 9…

css3+js 实现砸金蛋效果

最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写. 本来想弄个视频给你们看看效果的,但是不知道怎么上传视频,就只有给你们看看效果的图片,还有就是图片是我自己弄得不怎么会p图,不要见笑啊! 好了,为了不让我们成为键盘侠,我就不贴代码了,大部分地方我都写注释了,所以就不多介绍了,有点基础的都可以看懂. 首先建立index.html 然后建立css文件最后是核心部分js 好了大致就是这…

CSS3+JS 实现的便签应用

概述利用HTML5新增的 locationStorage 实现的便签应用,没有使用 JQuery,主要是为了练习原生JS的使用,采用响应式开发,在手机端和桌面端都有良好的体验,而且使用CSS3添加了大量的动画效果,使各操作之间的连接更加流畅. 详细代码下载:http://www.demodashi.com/demo/10440.html 一.准备工作 1.开发工具Sublime+一个能打开网页的现代浏览器 3.使用 localStorage 存储便签二.程序实现 1.首先,我们创建三个目录…

用CSS3/JS绘制自己想要的按钮

我认为按钮的绘制分以下三个步骤第一步,绘制按钮的轮廓选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="button off"></a> body{ background-color: #E6C9B6; } /* CSS样式 */ /* 按钮轮廓 */ .button{ display: block; margin:100px auto; position: relative; wid…

简单的JS钟表计时

思路:先写出简单的数字计时,根据时分秒的数值转换成度数,使用CSS3的transform进行div倾斜. 知识点:transform可以对div进行倾斜或旋转等效果.但是根据浏览器不同代码也不同,本代码只能根据chorme浏览器或safari使用 div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transf…