CSS3动画 - 地球 - 指南针旋转

工作之余，休息那一下，闲来无事，用CSS3属性animation做了两个插件：

指南针-地球
体质指数速查卡

1. 效果图

2. 部分代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>指南针 - 地球</title><style type="text/css">.bg-earth{position: relative;width: 500px;height: 500px;margin: 0 auto;background: url(images/earth.png) no-repeat center;background-size: 100%;}.pos-abl{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.bg-zhizhen{display: block;width: 262px;height:262px;margin: 119px auto;background: url(images/zhizhen.png) no-repeat center;background-size: 100%;-webkit-animation: rotating 3s linear infinite;animation: rotating 3s linear infinite;}@-webkit-keyframes rotating {from{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}to{-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}}@keyframes rotating {from{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}to{-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}}</style>
</head>
<body><div class="bg-earth"> <div class="pos-abl"><div class="bg-zhizhen"></div></div></div></body>
</html>

以上就是关于“ CSS3动画 - 地球 - 指南针旋转 ” 的全部内容。

CSS3动画 - 地球 - 指南针旋转相关推荐

CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
Css3动画—扭曲、旋转
* Css3动画-扭曲.旋转开发工具与关键技术:DW / Html Css3 作者:冯海金撰写时间:2019年2月03日星期日利用css3动画实现模型和文本扭曲 1扭曲前## 标题![在这里插入 ...
css3 动画之 2D旋转 3D旋转放大
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...
css3动画炫酷旋转带你进入高端世界！！！
1.透视:perspective ** 电脑显示屏是一个 2D 平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的. 透视可以将一个2D平面,在转换的过程当中,呈现3 ...
css3动画效果（旋转，帧动画）
一.css动画属性 animation是css3的动画属性,也是简写,其中包含以下几种值可配置默认值:none 0 ease 0 1 normal 值描述 animation-name 需要绑定到 ...
CSS3动画正方体3D旋转
为什么80%的码农都做不了架构师?>>> 感谢万老师的讲课,无意中连接进入听了一下,感觉效果还不错,学习了一下. 先看效果: 代码如下: <!DocType html& ...
CSS3动画之3D旋转
今天分享一下一个用3d效果写出来的小demo 效果展示这个做出来的效果没有预想中的那么好看,不过还是勉勉强强可以看吧嘤嘤嘤. 实现前想说一下在做一个项目或者是小demo之前一定要好好构思,哪个盒子 ...
css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

CSS3动画 - 地球 - 指南针旋转

CSS3动画 - 地球 - 指南针旋转

1. 效果图

2. 部分代码如下：

CSS3动画 - 地球 - 指南针旋转相关推荐

最新文章

热门文章