zoukankan      html  css  js  c++  java
  • CSS3简单学习

      面对C3以及H5的火热,作为一名前端开发人员的我,必须得张开双手全力拥抱啊!

    虽然目前的工作用到的这些非常少,但是,咱也还是有必要多熟悉熟悉。

    那么就是今天了,今天我们来简单看看CSS3的美妙之处。

      说到CSS3,想必大家的第一反应就是动画了。确实,不用JS光靠CSS就能实现动

    画效果,这对于广大前端开发人员来说还是很具有吸引力,查阅相关资料,发现,CSS3

    中一个关于创建动画的核新:@keyframes规则。

      目前浏览器都不支持@keyframe规则,但是,相应的有替代的规则;

      Firefox 支持 @-moz-keyframes规则。

      Opera 支持替代的@-o-keyframes规则。

      Safari和Chrome支持替代的@-webkit-keyframes规则。

    知道@keyframes的重要后,那么我们关注的是用法了。

    原理:在此之前我们要理解,创建动画的原理是,将一套CSS样式逐渐变化为另一套样式。

    用法:还是直接拿例子说更直观

    @keyframes myStyle{
    
       0% {100px}
    
      50%{50px}
    
     100%{200px}
    
    }
    
    div{
    
    20px;
    
    height:100px;
    
    background:#000;
    
    animation:myStyle 5s infinite(表示无限次循环效果);
    
    }
    
    <div></div>

    展示的效果是:DIV从100PX(0%设置了宽度变为100px),逐渐变为50px,再变为200px

    说明:上例中,myStyle就是定义的动画名,其中的百分比表示到指定时间百分比时的CSS效果,比如50%{50}就表示这个动画从0到动画的一半的时候,宽度是50px.

    还有一种简单的从开始到结尾的定义动画,可这样设置

    @keyframes myStyle{
    
    
       frome {100px}
    
    
       to{200px}
    
    
    }

    其中frome == 0%,to == 100%

    以这个小例子为参考,其它的复杂点的动画,基本都是按这个套路来,好了,刚入门的前端猴们,我们一起用起来

  • 相关阅读:
    从0开始搭建Element项目
    Git的上传步骤
    从JVM的角度解析String
    两个字符串相加究竟发生了什么
    简单工厂搭配策略模式
    java返回集合为null还是空集合
    idea常用快捷键
    (7)Stream简介
    (6)函数式接口的简单使用
    (4)函数式接口
  • 原文地址:https://www.cnblogs.com/lr-blog/p/5758121.html
Copyright © 2011-2022 走看看