基于html+css3酷炫动态罗盘时钟特效

1.网页作品简介方面 ：基于css3属性制作酷炫的圆形罗盘时钟，酷炫动态时钟特效，获取当前本地时间设置。

2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

文章目录

基于html+css3酷炫动态罗盘时钟特效
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业(成品下载)
- >>>戳我>>>点击进入200例期末大作业作品

二、代码目录

三、代码实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>动态时钟</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="js/jquery-3.4.1.min.js"></script><script src="js/test.js"></script><script src="js/common.js"></script><script src="js/config.js"></script>
</head><style>*{margin: 0;padding: 0;}body{background-attachment: fixed;color: #F5F4F6;font-size: 12px;font-weight: bold;overflow: hidden;width: 1000px;height: 900px;font-family: "微软雅黑";}audio{position: absolute;right: 0;opacity: 0.1;transition: all 1s;}audio:hover{opacity: 1;}.current{color: #D1A3F7;}video{z-index: -1;/* object-fit: fill; */position: fixed;/* right: 0px;bottom: 0px; */min-width: 100%;min-height: 100%;/* height: auto;width: auto; */}.main-content{position: absolute; top:50%;left: 50%;}.main-content .year{position: relative;top: -13px;left: -38px;text-align: center}.main-content .year span{position: absolute;width: 80px;}.main-content .month{position: relative;top: -13px;left: 40px;}.month span{position: absolute;width: 60px;}.main-content .day{position: relative;top: -13px;left: 85px;}.day span{position: absolute;width: 65px;}.main-content .week{position: relative;top: -13px;left: 145px;}.week span{position: absolute;width: 65px;}.main-content .shichen{position: relative;top: -13px;left: 200px;}.shichen span{position: absolute;width: 125px;}.main-content .hour{position: relative;top: -13px;left: 240px;}.hour span{position: absolute;width: 60px;}.main-content .minute{position: relative;top: -13px;left: 300px;}.minute span{position: absolute;width: 60px;}.main-content .second{position: relative;top: -13px;left: 370px;}.second span{position: absolute;width: 60px;}</style><body><div class="main-content"><div class="year"><!-- <span>2019</span> --></div> <div class="month"></div><div class="day"></div><div class="week"></div><div class="shichen"></div><div class="hour"></div><div class="minute"></div><div class="second"></div></div></body>
</html>

基于html+css3酷炫动态罗盘时钟特效相关推荐

酷炫动态代码时钟向你的女神展示吧
效果图 1. 桌面鼠标右键 - 新建 - 文本文档 2. 打开新建的文档,输入以下内容,保存 <!DOCTYPE html> <html lang="zh"> ...
动态时间罗盘html讲解,基于 JQuery 的动态罗盘时钟
基于 JQuery 的动态罗盘时钟, 惯例,先来效果图 Index.html 动态时钟 * { margin: 0; padding: 0; } body { background-attachmen ...
android n 动态时钟,基于JQuery的动态罗盘时钟
基于JQuery的动态罗盘时钟, 惯例,先来效果图 Index.html 动态时钟 * { margin: 0; padding: 0; } body { background-attachment: ...
css制作炫酷的罗盘时钟特效（附代码）
效果图然后是代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?（代码实例）
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
css svg做动图,用SVG制作酷炫动态图标的方法
用SVG制作酷炫动态图标的方法发布时间:2020-09-14 14:56:39 来源:亿速云阅读:160 作者:小新用SVG制作酷炫动态图标的方法?这个问题可能是我们日常学习或工作经常见到的.希 ...
java实现3D动态效果_js实现3D粒子酷炫动态旋转特效
js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 New Document html,body{ margin:0px ...
HTML5+CSS3小实例：酷炫的ANIPLEX文字特效
HTML5+CSS3实现酷炫的ANIPLEX文字特效,这个案例动画有点多,不过效果是真的酷炫,可以用来做网站的开屏动画,不多废话,直接看效果吧. 效果: 源码: <!DOCTYPE html&g ...
HTML5+CSS3小实例：酷炫的文字裂开特效
HTML5+CSS3实现酷炫的文字裂开特效,鼠标悬停,文字上下裂开,中间显示更多说明,悬停时,其他文字模糊,不说了,看看效果有多酷炫吧! 效果: 源码: <!DOCTYPE html> & ...

基于html+css3酷炫动态罗盘时钟特效

文章目录

基于html+css3酷炫动态罗盘时钟特效相关推荐

最新文章

热门文章