8年网站建设、推广经验!服务客户2000+
微信关注
扫一扫,享优惠!
咨询电话:400-888-2014;座机:029-81627176;手机/微信:153 5370 4270
心海资讯

您现在的位置:主页 > 心海资讯 >

  • 推荐文章
  • 西安网站制作公司分享网
    西安网站制作公司分享网站制作详细流程有哪些 西安网站建设流程,其实很简单,找西安心海网络,按资料表提供所需资料,说明制作要求,其他的就交给心海网络完成就好了。企......
    201304/26
  • 网站开发微电影产业微电
    网站开发微电影产业微电影内容成竞争优势 近两年来,微电影热潮悄然兴起,各大视频网站也纷纷发力微电影产业,希望通过自制内容来缓解版权压力,形成差异化内容。 据了解,首届......
    201205/20
  • ps真的超乎常人想象的神
    让学习ps的好好学学,真的好强大!......
    201412/01
  • q0015
    客户名称:西安某某光电子有限公司 网址:http://www.XXX.com/ 建设周期:二十五天 客户信息:西安某某光电子有限公司 公司介绍:西安市某某光电子有限公司是国内大型综合......
    201203/21
  • 西安婚纱摄影网站建设,
    西安婚纱摄影网站建设,西安婚纱摄影网站制作 关键词: 西安做一个婚纱摄影类的网站多少钱,西安婚纱摄影类的网站建设,西安做婚纱摄影类的网站 西安心海网站建设作品:红......
    201201/01
  • 网站优化其实很简单
    网站优化其实很简单 网站优化按天收费是一种新型模式,比以前的点击收费要实惠很多,在南方那一带地区用这种方式的人很多,西安做网站的公司心海推出网站优化套餐特惠活动 ......
    201409/01
  • 相关文章
  • ps真的超乎常人想象的神奇
    让学习ps的好好学学,真的好强大!......
    201412/01
  • 塑料瓶的神奇!
    大胆的奇想,赶快来试试吧! 这些环保的小工艺品希望你能喜欢!赶快支持一下我们吧!西安网站设计公司感谢您的支持!......
    201409/13
  • 西安做网站的公司归纳CSS3文本效果属性
    文字特效之前在网页中一直用到的投影之类的特效必须用图片来实现,现在的css3却可以实 现文字有投影的强大功能,真的是让我很长见识啊,话不多说看看实例吧 css3......
    201308/23

CSS3 神奇的过渡特效

心海网络:2013-08-23 10:29     阅读数:
西安做网站公司叫大家如何实现css3的网页特效,之前导航变色拉伸都是比较死板的一种特效,今天看到这种特效感觉自己脑海中又有了新的东西,也想到了网页的一种新的形势。下面就简单的宽度和高度进行特效改变。

CSS3 过渡

通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

原理:

它如何工作?

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

1.规定您希望把效果添加到哪个 CSS 属性上
2.规定效果的时长
实例介绍:

<div class="dd"></div>

.dd{
    width:50px;
    height:20px;
    background:#F0F;
    transition: width 2s;
    -moz-transition: width 2s;    /* Firefox 4 */
    -webkit-transition: width 2s;    /* Safari 和 Chrome */
    -o-transition: width 2s;    /* Opera */
    }
.dd:hover{
    width:150px;
    background:#F00;
    }
只需两步即可实现宽度缓慢变长的神奇特效。
  >>>>>

没有办法给大家展示出来,大家亲自试一下看看效果就知道了。

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。

注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

西安建网站的公司提供总结发布,希望对大家能有帮助。

在线客服
热线电话
400-888-2014
029-81627176
153 5370 4270

扫一扫微信咨询