注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

itoedr的it学苑

记录从IT文盲学到专家的历程

 
 
 

日志

 
 

CSS3实现特效测试--太级炫图(收集)  

2017-01-16 22:01:31|  分类: html5-webapp |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

         相比于CSS2,CSS3增加了很多有关于视觉享受上面的特效,这些特效在平时的页面里面也许只是在一些非常不起眼的出现,但实际上如果运用得当,这些特效将会出现非常酷炫的效果。今天,我们就一起来用CSS3的一些新的样式(渐变、过渡动画、圆角),来实现一个非常漂亮的太极圆盘。

        css3应该是配合js6的设计的,为的是提高html5的实现能力,为下一步的webos打下坚实基础。

        首先,我们先来看一下最后的效果:

几分钟用CSS3实现太极特效

当鼠标放上去之后还会出现旋转的动画:

几分钟用CSS3实现太极特效

         效果看起来非常不错,但实际上用代码实现起来却非常的简单,下面由我一步一步进行解析,一步步将这个太极效果实现。第一步,先将太极的轮廓(圆形)画出来,顺便做一个绝对居中:

几分钟用CSS3实现太极特效

图1

      上面在此定义了一个id号(不是姓名,是它的员工号)为gossip的对象。我们可能通过css3指令改变这个div的表现形式。

样式:

几分钟用CSS3实现太极特效

图2

       此时我们的太极图标是看不见的,不要着急,这是因为我们现在没有给他填充颜色,下面进行第二步,也是最为关键的一步。第二步,使用渐变将太极的内部画出来,:

几分钟用CSS3实现太极特效

图3

      可惜的是,linear-gradient的支持并不统一,不同的浏览器对参数要求和不一样,比如:firfox支持的参数却是:-miz-linear-gradient.

效果:

几分钟用CSS3实现太极特效

通过浏览器,我们会发现这个图像是由浏览器实时产生的,而不是由服务器侧推送出来的图片。

        为什么 保看到一半的图像呢?这是因为太极的上半部分是白色的,所以和我们的背景色重复了,我们只需要再给太极加上一个外阴影,就可以看清太极的轮廓了:

几分钟用CSS3实现太极特效

背景设置不体现对象的位置

效果:

几分钟用CSS3实现太极特效

在背景的提示下,整个对象都 可以看得明白了

           怎么样,是不是看起来炫酷了很多?第三步,使用伪元素将太极内部的两个原点勾勒出来,先使用伪元素画出一个圆圈,然后用边框将圆球内白外黑的效果实现,最后用定位移动到太极的左部居中:

几分钟用CSS3实现太极特效

注意#goosip:before的意义,在一个浏览器中,默认取得操 作焦点的是鼠标。所以它代表的是鼠标相对此焦点对象的状态。

效果:

几分钟用CSS3实现太极特效

怎么样?是不是看出来了一点端倪?第四步,用同样的方法将右面的原点实现出来:

几分钟用CSS3实现太极特效

上图参数设定的是关于鼠标个来干扰对象时,它与此对象的关系。

效果:

几分钟用CSS3实现太极特效

最后一步,为太极加上旋转效果:

几分钟用CSS3实现太极特效

这段代码则控制的是鼠标悬停在对象之上时的行动。

然后给#gossip加上过度动画:

几分钟用CSS3实现太极特效

就这样,一个炫酷的太极效果就这样被我们实现出来了
  评论这张
 
阅读(29)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017