最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • CSS动画效果初学笔记

    正文概述 掘金(HiSiri)   2021-02-02   551

    浏览器的渲染原理

    • 解析:

    1.根据HTML构建DOM:

    处理HTML标记并构造DOM树。HTML解析涉及到 tokenization 和树的构造。HTML标记包括开始和结束标记,以及属性名和值。 如果文档格式良好,则解析它会简单而快速。解析器将标记化的输入解析到文档中,构建文档树。

    2.根据CSS构建CSSOM:

    处理HTML标记并构造DOM树。HTML解析涉及到 tokenization 和树的构造。HTML标记包括开始和结束标记,以及属性名和值。 如果文档格式良好,则解析它会简单而快速。解析器将标记化的输入解析到文档中,构建文档树。

    • 渲染:

    1.将DOM和CSSOM组合成一个Render树:

    计算样式树或渲染树从DOM树的根开始构建,遍历每个可见节点。

    2.Layout布局:

    通俗的解释为确定文档流,盒模型,计算大小和位置。

    3.Paint绘制:

    通俗的解释为把边框颜色,文字颜色,阴影等计算渲染出来。

    4.Compositing:

    当文档的各个部分以不同的层绘制,相互重叠时,必须进行合成,以确保它们以正确的顺序绘制到屏幕上,并正确显示内容。

    简单的平面CSS过渡效果制作

    • Transition(过渡):

    过渡是css3中的重要特性,可以让我们在不使用flash动画和JavaScript的情况下,使当前元素从一种样式变为另一种样式时为元素添加效果。 经常和:hover一起使用,实现鼠标悬浮时效果的变化。

    transition的取值: 1.属性:想要变化的css属性,例如长,宽,高。 2.花费时间:单位是秒 如:0.5s (单位必须表达)。 3.运动曲线:默认是ease(可以不写)。 4.开始时间:单位是秒,可以设置延迟触发时间,默认是0s。

    如果想要多个属性一起变化需要加 , 分隔。通常用all,例如:

    <style>
           div {
               width: 200px;
               height: 200px;
               color: snow;
               font-size: 50px;
               background-color: rgb(136, 209, 238);
               transition: all 0.5s;
           }
    
           div:hover {
               width: 400px;
               height: 400px;
               background-color: rgb(219, 134, 134);
           }
       </style>
    
    <body>
       <div>
           content
       </div>
    </body>
    

    实现的效果:

    CSS动画效果初学笔记

    需要注意的是:transitinon代码需要写在作用对象本身。 实际生活中我们可以遇到很多需要靠过渡属性实现的动画效果, 例如:

    1.进度条:

    <style>
            .progress {
                <!-- 进度条外框 -->
                width: 150px;
                height: 15px;
                border: 1px solid red;
                border-radius: 7px;
    
            }
    
            .bar {
                <!-- 进度条 -->
                width: 60%;
                height: 100%;
                background-color: red;
                border-radius: 6px;
                <!-- 过渡效果 -->
                transition: all 0.6s;
            }
    
            .progress:hover .bar {
                width: 100%;
                <!-- 需要实现的过渡 -->
            }
        </style>
    
    
    
    <body>
        <div class="progress">
            <div class="bar"></div>
        </div>
    </body>
    

    实现的效果:

    CSS动画效果初学笔记

    2.小米logo:

    <style>
            .box {
                width: 55px;
                height: 55px;
                margin: 100px auto;
                overflow: hidden;
            }
    
            .box .logo {
                display: block;
                position: relative;
                width: 100%;
                height: 100%;
                background-color: #ff6700;
            }
    
            .box .logo::before,
            .box .logo::after {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                content: "";
                transition: all 0.2s;
            }
    
            .box .logo::before {
                background: url(images/mi-logo.png) no-repeat 50% 50%;
    
            }
    
            .box .logo::after {
                background: url(images/mi-home.png) no-repeat 50% 50%;
                margin-left: -55px;
            }
    
            .box .logo:hover::before {
                margin-left: 55px;
            }
    
            .box .logo:hover::after {
                margin-left: 0px;
            }
        </style>
    
    
    <body>
        <div class="box">
            <a class="logo" ></a>
        </div>
    </body>
    

    实现的效果:

    CSS动画效果初学笔记

    通常情况下transfrom要配合过渡效果,实现动画效果。

    • Transform(使改变形态):

    四个常用的功能

    rotate(旋转):旋转45度:transform: rotate(45deg),deg为单位度。

    scale(缩放): transform: scale(x, y),xy为宽高,等比缩放时可以写一个值。优点:不会影响其他盒子,可以设置中心点。

    translate(位移): transform: translate(x,y),位移如果配合其他属性需要放在最前面。

    skew(倾斜):transform: skew(x,y)xy单位是deg

    简单的平面CSS动画效果制作

    动画(animation):相较于过渡,动画可以实现更多变化,连续自动播放等效果。

    动画的基本使用:

    • 1.定义动画
    • 2.调用动画

    使用keyframes定义动画(类似伪类选择器)

    动画序列:规定,0%是动画的开始,100%是动画的完成。(也可以用 from,to;可以做多个状态【keyframes 关键帧】的动画序列,例如:0% 25% 50% 75% 100%。 这个% 就是总时间的划分。),

    @keyframes xxx {
                /*动画初始的状态*/
                0% {
                    transform: xxxxxx;
                }
    
                100% {
                 /*动画结束的状态*/
                    transform: xxxxxx;
                }
            }
    

    调用动画:

         div {
                /*盒子的样式属性*/
                width: xx;
                height: xx;
                background-color: xx;
               /*调用动画,名称就是自己定义的动画名称。动画的持续时间*/
                animation-name: xxx;
                animation-duration: 2s;
             }
    

    常用的 animation 的属性

    • 动画的名称: animation-name
    • 动画完成一个周期的时间: animation-duration
    • 动画的运动曲线: animation-timing-function
    • 动画的开始时间: animation-delay
    • 动画的重复次数: animation-iteration-count(可以取数字1,2,3... infinite循环)
    • 动画是否反方向播放: animation-direction (默认 normal,alternate逆向播放)
    • 动画结束时的状态: animation-fill-mode(默认backwards回到起始状态, forwards停在结束状态)
    • 动画是否运行: animation-play-state(默认running运行,paused停止,通常配合鼠标经过使用)

    常见的简写形式: animation: 名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

    tips:通常如果我们记不住所有的属性顺序时,在有emmet的编辑器中,直接输入animation 按下tab,在进行注释,比对着写出代码。

    animation: name duration timing-function delay iteration-count direction fill-mode;
    
    animation: demo-1 2s linear .5s infinite alternate forward; 
    

    起源地 » CSS动画效果初学笔记

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元