[css3]圆盘旋转动画
2015-08-12 11:07
609 查看
效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来
知识点:
[html+css]
1.logo水平垂直居中于圆盘内,用到的样式
position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin:auto;
2.放大旋转用transform的scale和rotate,渐显用opacity,动画过度自然用transition
3.背景用rgba的好处:opacity会作用于整个元素和他的子元素,rgba的透明度不会影响他的子元素
[js]
1.每个小图标的位置用数学方法里的sin和cos来计算,注:每个小图标的margin-top和margin-left应为自身宽高一半的负值,才能正确定位
知识点:
[html+css]
1.logo水平垂直居中于圆盘内,用到的样式
position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin:auto;
2.放大旋转用transform的scale和rotate,渐显用opacity,动画过度自然用transition
3.背景用rgba的好处:opacity会作用于整个元素和他的子元素,rgba的透明度不会影响他的子元素
[js]
1.每个小图标的位置用数学方法里的sin和cos来计算,注:每个小图标的margin-top和margin-left应为自身宽高一半的负值,才能正确定位
<nav> <a href="" class="logo"></a> <div class="ring"> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> <a href="" class="icon"></a> </div> </nav>
<style type="text/css"> nav{ position: relative; width: 256px; height: 256px; border-radius: 50%; margin: 100px auto;} .ring{ position: relative; width: 256px; height: 256px; border-radius: 50%; margin: 0 auto; background: rgba(0,0,0,.4); transform: scale(0.1) rotate(-270deg); opacity: 0; transition: all 500ms;} .ring:hover{ transform: scale(1.1) rotate(0); opacity: 1;} .logo{ position: absolute; display: block; width: 80px; height: 80px; margin: auto; border: 2px solid #fff; border-radius: 50%; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,.5) url(img/logo.png) no-repeat center;} .ring a{ position: absolute; display: block; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 50%;} .ring a:nth-child(1){ background: url(img/1_28.png) no-repeat top #fff;} //:nth-child()是css3选择器,background-color不能直接写到a里,会被:nth-child()覆盖 .ring a:nth-child(2){ background: url(img/1_29.png) no-repeat top #fff;} .ring a:nth-child(3){ background: url(img/1_30.png) no-repeat top #fff;} .ring a:nth-child(4){ background: url(img/1_31.png) no-repeat top #fff;} .ring a:nth-child(5){ background: url(img/1_32.png) no-repeat top #fff;} .ring a:nth-child(6){ background: url(img/1_33.png) no-repeat top #fff;} .ring a:nth-child(7){ background: url(img/1_34.png) no-repeat top #fff;} .ring a:nth-child(8){ background: url(img/1_35.png) no-repeat top #fff;} </style>
<script type="text/javascript"> var $icon=$(".icon"); for(var i=0,l=$icon.length;i<l;i++){ var _left=(50-35*Math.cos(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%"; var _top=(50+35*Math.sin(-0.5*Math.PI-2*(1/l)*i*Math.PI)).toFixed(4)+"%"; $icon.eq(i).css({"left":_left,"top":_top}); } </script>
相关文章推荐
- css各属性顺序
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
- css盒模型和块级、行内元素深入理解display:in
- 几个CSS的黑科技
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),NB么?
- WPF 样式引用及样式存放地点--新手试炼
- css清除浮动float的三种方法总结
- CSS3常用功能的写法
- css前缀含义
- CSS hack
- 纯CSS实现的气泡提示框
- css进阶学习
- CSS中那些不太常见的样式
- CSS3媒体查询入门,制作自己的响应式导航
- CSS浮动相关解决办法
- css3 选择器(三)
- 30-CSS-02-CSS(和html结合的方式三四)
- 30-CSS-03-CSS(基本选择器&优先级)
- 30-CSS-01-CSS(概述&和html结合的方式一二)
- AspNetPager实现真分页+多种样式