CSS进阶-盒子与动画

东海若知意

已于 2023-03-24 19:17:51 修改

阅读量444

点赞数

分类专栏： Web 文章标签： css3

于 2022-10-30 10:10:45 首次发布

极正君

本文链接：https://blog.csdn.net/qq_44098341/article/details/127595072

版权

CSS进阶-盒子与动画

文章目录

CSS进阶-盒子与动画
前言
Chapter04 CSS3动画
1. Animation动画
2. Transition动画
3. 浏览器兼容性
- 3.1 兼容性
- 3.2 浏览器内核
总结

前言

CSS3动画美轮美奂，在特效上提供了比JS更为流畅的体验，搭配网页千姿百态的颜色，为网页的鲜活提供了更为动人的美感，无论是个人开发还是商业性网站，有效组合CSS3动画的使用，会让用户获得更为有科技感的动效体验。
本文介绍CSS3动效关键帧的使用以及类似jQuery提供的过渡效果概念

Chapter04 CSS3动画

1. Animation动画

1.1 关键帧

关键帧：是通过CSS的@keyframes属性，预先定义出的每个阶段的动画特征

1.2 定义关键帧

1.2.1 定义示例

/* 示例1 */
@keyframes myfirst
{
    
    from {
   background: red;}
    to{
   background: yellow;} 
}

/* 示例2 */
@keyframes mymove
{
   
    0%{
   background:olive; left:0px;   top:100px;}
    50%{
   background:teal; left:350px; top:100px;transform:rotate(-180deg);}
    100% {
   background: aqua; left:600px; top:100px;}
}

1.2.2 效果

示例1变换效果	示例2变换效果

1.2.3 完整案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6-1 Animation 动画</title>
    <link rel="stylesheet" href="./css/common.css">
    <style type="text/css">
        .backgroundchange{
     
            width: 600px;
            height: 180px;
            margin: 20px;
            border: 2px solid #c9deec;
            border-radius: 20px;
        }
        .areaheight{
     height: 355px;}
        .colorbox-1,.colorbox-2,.colorbox-3{
     
            width: 100px;
            height: 100px;
            font:900 16px/100px Cmabria,'楷书';
            color: #FFF;
            text-align: center;
            margin: 40px;
            position: relative;
            background: transparent;
            border-radius: 10px;
        }

        .colorbox-1{
     
            animation: boxbackchange 3s infinite;
            -o-animation: boxbackchange 3s infinite;        /*Opera*/
            -moz-animation: boxbackchange 3s infinite;      /*Firefox*/
            -webkit-animation: boxbackchange 3s infinite;   /*safari and Chrome*/
        }
        @keyframes boxbackchange{
     
            from{
     background: #FB8B05; left: 0px;top: 0px;}
            to{
     background: #00ffff; left: 400px; top: 0px;}
        }
        /* 示例1 */
        @keyframes myfirst
        {
      
            from {
     background: red;}
            to{
     background: yellow;} 
        }

        .colorbox-2{
     
            animation: boxrotate 3s infinite;
            -o-animation: boxrotate 3s infinite;        /*Opera*/
            -moz-animation: boxrotate 3s infinite;      /*Firefox*/
            -webkit-animation: boxrotate 3s infinite;   /*safari and Chrome*/
        }
        @keyframes boxrotate{
     
            0% {
     background: #808000; left: 0px; top:0px}
            50% {
     background: #008080; left: 200px; top:0px;transform: rotate(-180deg);}
            100% {
     background: #00ffff; left: 400px; top:0px}
        }
        /* 示例2 */
        @keyframes mymove
        {
     
            0%{
     background:olive; left:0px;   top:100px;}
            50%{
     background:teal; left:350px; top:100px;transform:rotate(-180deg);}
            100% {
     background: aqua; left:600px; top:100px;}
        }

        .colorbox-3{
     
            animation: boxroundruning 10s infinite;
            -o-animation