【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）

功能需求

实现地球旋转，本质是一张图片，在网页中图片都是矩形没有直接提供圆形，CSS3提供了圆角样式，非常方便的解决了这个问题。
先准备一个正方形的图片，然后设置其当圆角超过图片半径时，自然就成为一个圆。
CSS3增加了强大的动画功能，可以让图片进行旋转。

界面原型

实现代码

<!DOCTYPE html>
<html>
<head>     <meta charset="UTF-8">     <title>旋转地球</title><style type="text/css">body{margin-top: 50px}#rotation-earth{margin: 0 auto;width: 310px;height: 310px;background: url(img/earth.png); /* 背景图 */border-radius: 300px;      /* 超过半径形成圆形 *//* 动画run 调用的动画函数名称6s 动画执行的耗时linear 动画路径线性0s 不延迟infinite 反复播放动画*/-webkit-animation: run 6s linear 0s infinite;}/*keyframes 动画的关键帧，动画由几个关键帧组成，中间的过程，动画引擎自动构建完成transform 变形rotate 旋转角度 0deg 零度，360 度*/@-webkit-keyframes run{from{ -webkit-transform: rotate(0deg);}to{ -webkit-transform: rotate(360deg);}}</style>
</head>
<body>     <div id="rotation-earth"></div>
</body>
</html>

【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）相关推荐

【小白学前端】化腐朽为神奇-HTML+CSS3实现电影票（day01-3）
界面原型利用div和table布局实现电影票的布局小技巧包括:圆角样式.横向合并单元格.纵向合并单元格代码实现 <!DOCTYPE html> <html><hea ...
小白学前端——让新手头疼的num++和++num问题
不知道大家刚开始学js的时候,有没有为num++和++num的问题头疼过,反正我是一遇到这个问题就会错,但是今天仔细看了一下,其实真的很简单,真是怪自己之前不用心. 首先,先看一下下面的代码: 这个就 ...
跟着pink老师学前端之HTML5和CSS3的新特性
文章目录 1. HTML5新特性 1.1 HTML5新增的语义化标签 1.2 HTML5新增的多媒体标签 1. 视频< video> 2. 音频< audio> 1.3 HTM ...
【小白学前端】JS案例：表单全选取消全选
要求: 1.点击全选按钮,可以选中所有产品前的选择框: 2.再点击一次,取消全选 3.每个产品可以单独选中取消 4.每个产品都选中时,全选框自动选中 5.取消一个产品的选择时,全选框自动取消 HTML ...
小白学前端——关于html,css,js分号使用问题
这个是也是我不是很清楚,但其实很简单,很基础的问题. 我在听<JavaScript高级程序设计>这本书的时候,那个讲书的老师提到了这个问题. html:html里面分号不是必须有的,但是写 ...
从0到1，小白的前端摸索之路，属于你的成功之道！
0基础,一年自学经验,8个offer,包括头条.去哪儿.猫眼.斗鱼.趣店.趣头条等,总价值180W 朋友们,大家好! 我是白小白,目前是一名电子科技大学信通学院的大四学生.回想起自己正式涉足前端的学习 ...
从0到1，小白的前端摸索之路
0基础,一年自学经验,8个offer,包括头条.去哪儿.猫眼.斗鱼.趣店.趣头条等,总价值180W 掘金的朋友们,大家好! 我是白小白,目前是一名电子科技大学信通学院的大四学生.回想起自己正式涉足前端 ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
c++局部对象是什么_小白学Web前端难点是什么 JS进阶知识点有哪些
小白学Web前端难点是什么?JS进阶知识点有哪些?JavaScript是前端小白学习的难点,但又是前端工程师必须要掌握的技能.很多同学反映JavaScript知识点多而杂,不知道如何下手,下面就给大家 ...

【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）

功能需求

界面原型

实现代码

【小白学前端】化腐朽为神奇-HTML+CSS3实现旋转地球（day02-4）相关推荐

最新文章

热门文章