Second slide

您现在的位置是:网站首页前端技术-CSS3 > 文章内容

个人总结(css3新特性)

admin 2018-11-01 20:07:17 浏览

  1.前言

css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!我之前也写过关于css3的文章,也封装过css3的一些小动画。个人觉得css3不难,但是很难用得好,用得顺手,最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。写这篇文章主要是让大家能了解css3的一些新特性,以及基础的用法,感觉css3的魅力!如果想要用好css3,这个得靠大家继续努力学习,寻找一些讲得更深入的文章或者书籍了!如果大家有什么其他特性推荐的,欢迎补充!大家一起学习,进步!

看这篇文章,代码可以不用看得过于仔细!这里主要是想让大家了解css3的新特性!代码也是很基础的用法。我给出代码主要是让大家在浏览器运行一下,让大家参考和调试。不要只看代码,只看代码的话,不会知道哪个代码有什么作用的,建议边看效果边看代码。

  2.过渡

过渡,是我在项目里面用得最多的一个特性了!也相信是很多人用得最多的一个例子!我平常使用就是想让一些交互效果(主要是hover动画),变得生动一些,不会显得那么生硬!好了,下面进入正文!

引用菜鸟教程的说法:CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续时间。

    2-1语法

transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)复制代码

栗子1

/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/
transition:width,.5s,ease,.2s复制代码

栗子2

/*所有属性从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒*/
transition:all,.5s
复制代码

上面栗子是简写模式,也可以分开写各个属性(这个在下面就不再重复了)

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
复制代码

     2-2实例-hover效果

上面两个按钮,第一个使用了过渡,第二个没有使用过渡,大家可以看到当中的区别,用了过渡之后是不是没有那么生硬,有一个变化的过程,显得比较生动。
当然这只是一个最简单的过渡栗子,两个按钮的样式代码,唯一的区别就是,第一个按钮加了过渡代码transition: all .5s;

2-3实例-下拉菜单

上面两个菜单,第一个没有使用过渡,第二个使用过渡,大家明显看到区别,使用了过渡看起来也是比较舒服!代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名(ul-transition)。利用这个类名,设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

可能大家不知道我在说什么!我贴下代码吧

html
 

 

"demo-hover demo-ul t_c">
   
  • "fllil">
           

    •             "javascript:;">html
                 

      •                
        • "#">div

        •                
          • "#">h1

          •            

                 

        •        

"demo-hover demo-ul ul-transition t_c">
   
  • "fllil">
           

    •             "javascript:;">html
                 

      •                
        • "#">div

        •                
          • "#">h1

          •            

                 

        •        

复制代码

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}
制代码

上面两个可以说是过渡很基础的用法,过渡用法灵活,功能也强大,结合js,可以很轻松实现各种效果(焦点图,手风琴)等,以及很多意想不到的效果。这个靠大家要去挖掘!


 

 

上一篇:第一页

下一篇:最后一页