css实现圆球顺时针滚动
2015-07-17 19:03
741 查看
在懒人之家看到的。。小小实现了一下几乎花掉一下午。。。好醉。。
虽然好像理一理框架,但是电脑上好难说。。。。
虽然好像理一理框架,但是电脑上好难说。。。。
</pre><span style="font-size:14px;"><img src="webkit-fake-url://66ebb73d-e0e8-4814-80da-9f7b73c4e57c/image.tiff" alt="" />效果图大概这样。round是细框,test是小球,inner是实心圆。其实动的不是小球,是细框,但是因为小球在细框里所以带着小球一起动。可以get的技能:margin为负值,定位的方法,css animation的用法, 不同浏览器的兼容(-webkit- ...)</span><pre name="code" class="html"><!doctype html> <html> <head> <meta charset='utf-8'> <title>round</title> <link type='text/css' rel='stylesheet' href='begin.css'> </head> <body> <div id='wrapper'> <div id='round'> <div id='test'></div> </div> <div id='inner'> <p></p> </div> </div> </body> </html>
* { margin:0px;padding:0px; } body { background-color: #f6f6f6; } #wrapper { position: absolute; top:200px; left:500px; } #inner { width: 80px;height:80px; border-radius:40px; border-style: none; background-color: yellow; } #inner p { width:80px; } #test { width:10px; height: 10px; border-radius: 50%; background-color:yellow; position:relative; left:10px;top:10px; } #round { width:100px; height: 100px; border-radius: 50%; border: 1px solid yellow; animation:rond 3s infinite; -webkit-animation:rond 3s infinite; margin-bottom:-80px; position:relative; left:-10px; top:10px; } @keyframes rond { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @-webkit-keyframes rond { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} }
相关文章推荐
- 简介CSS中的各种选择符
- andrioid——checkbox勾选按钮自定义样式
- CSS中值得记住的一些技巧
- ios 改变导航返回按钮的字体样式以及背景图片
- 基于display:table的CSS布局让HTML元素和像table一样
- CSS的一些必记属性整理
- iOS 重新定义cell的分割线样式
- css中background背景属性概述
- 详解 CSS 属性 - 伪类和伪元素的区别
- sass转换为css
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
- 响应式布局框架 Pure-CSS 5.0 示例中文版-中
- 响应式布局框架 Pure-CSS 5.0 示例中文版-下
- 响应式布局框架 Pure-CSS 5.0 示例中文版-上
- CSS3 改变空格作用 -webkit-nbsp-mode 去掉点击框 -webkit-tap-highlight-color
- css在360浏览器的兼容问题
- QTreeWidget样式设置大全(一)
- CSS3实现小黄人动画
- 关于CSS的布局:position属性
- CSS-定位