帝王谷资源网

详解Css3新特性应用之过渡与动画
网页制作 2024/12/22 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

一、缓动效果

学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等

还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点

Css中只支持一条贝塞尔曲的运动，不能连续多段

对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数 水平坐标只能在0~1的范围内，因为水平坐标表示的是时间垂直坐标可以超过此范围，表示为运动距离

示例代码

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes bounce{
            60%, 80%, to{
                transform: translateY(350px);
                animation-timing-function: ease-out; /*加速*/
            }
            70%{ transform: translateY(250px); }
            90%{ transform: translateY(300px) }
        }
        .ball{
            display: inline-block;
            animation: bounce 3s ease-in; /*减速*/
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: red;
        }
        @keyframes bounceEase{
            60%, 80%, to{
                transform: translateY(400px);
                animation-timing-function: ease;
            }
            70% { transform: translateY(300); }
            90% { transform: translateY(350px); }
        }
        .ball02{
            display: inline-block;
            animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/
            margin-left: 60px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="ball">
    </div>
    <div class="ball02"></div>
</body>

详解Css3新特性应用之过渡与动画

利用过渡(transition)实现

但需要注意transition-property默认值为all，所有可以过渡的属性都会被过滤

示例代码:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        input:not(:focus) + .callout{
            transform: scale(0); 
            transition-duration: .25s; /*覆盖默认的.5s时间*/ 
            transition-property: transform; /*只过渡transform属性，不过滤背景等其他属性*/
        } 
        .callout{ 
            transition: .5s cubic-bezier(.25,.1,.3,1.5); /*光标输出input时，有动画*/  
            transition-property: transform;/*只过渡transform属性，不过滤背景等其他属性*/
        }
        input{
            display: block;
        }
        .callout{
            background: #fed; 
            position: absolute;
            max-width: 14em;
            padding: .6em, .8em;
        }
    </style>
</head>
<body>
    <label>
        Your name:
        <input type="text" id="username" />
        <span class="callout">Only letters,number,underscores and hyphens allowed</span>
    </label>
</body>

详解Css3新特性应用之过渡与动画

二、逐帧动画

animation-timing-function中的steps函数，主要用他实现帧动画，他是一个阶跃函数，共两个参数 参数一：一个数字，代表时间函数中的间隔数量（必须为正数） timing-function是作用于每两个关键帧之间，而不是整个动画过程

参数二：接受start和end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认end，step-start和step-end分别是steps(1,start)和steps(1,end)的简写

示例代码：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes loader{
            to{ background-position: -128px 0; }
        }
        .wrap{
            background: url("../img/frameAnimate.png") no-repeat;
            width: 32px;
            height: 50px; 
            background-position: 0px 0px;
            animation: loader 1s infinite steps(4);
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>

三、闪烁效果

实现两种闪烁效果，一是平滑闪烁，另一种是帧闪烁（更接近于现实）

平滑闪烁

主要是利用animation-iteration-count和animation-direction两个属性实现。 

1.animation-iteration-count：表示动画的执行次数 

2.animation-direction：表示动画是否应该轮流反向播放动画，如果值为alternate时，animation-iteration-count必须是一个偶数，因为是奇数正常播放，偶数反向播放

代码如下：

<style>
    @keyframes blink-smooth{
        to{ color: transparent; }
    }
    .wrap{
        animation: 1s blink-smooth;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }
</style>
<div class="wrap">我是平滑的显示和隐藏三次</div>

帧闪烁

利用animation-timing-function属性的steps实现，因steps指定两个关键帧之间分成几个片段执行动画

1.animation-timing-function: steps(1)，然后配合上动画在50%实现一个透明即可

代码如下：

<style>
    @keyframes blink-smooth02{
        50% { color: transparent; }
    }
    .wrap02{
        animation: 1s blink-smooth02;
        animation-iteration-count: 3;
        animation-timing-function: steps(1);
    }
</style>
<div class="wrap">我是逐帧的显示和隐藏三次</div>

详解Css3新特性应用之过渡与动画

四、打字效果（只支持单行英文）

需要利用用下特性：

1.等宽字体，然后加上ch这个单位，ch是表示'0'这个字符的宽度.

2.使用动画让元素宽度从0变到最大宽度。

3.利用steps(1)让每个关键帧的地方产生动画 代码如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes typing {
            from{ width: 0; }
        }
        @keyframes cart{
            50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现*/
        }
        .wrap{
            width: 14ch;
            animation: typing 8s steps(14) , cart 1s steps(1) infinite;
            white-space: nowrap;
            overflow: hidden;
            border-right:1px solid transparent;
            font-family: Courier New, Courier, monospace;
        }
    </style>
</head>
<body>
    <div class="wrap">Css is awesome</div>
</body>

详解Css3新特性应用之过渡与动画

五、状态平滑的动画

利用animation-play-state属性实现动画的暂停和播放功能，以及改变背景的定位。示例代码如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes mic{
            to{ background-position: 100% 0; }    
        }
        .wrap{
            background: url("../img/cat.png");
            background-repeat: no-repeat;
            background-size: auto 100%;
            width: 100px;
            height: 200px;
            animation: mic 5s linear infinite alternate; /*直线运动，永不停止，偶数反向运动*/
            animation-play-state: paused;
        }
        .wrap:hover, .wrap:active{
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>

详解Css3新特性应用之过渡与动画

六、沿环型路径平移的动画

这点很重要，transform中的变形函数（如：rotate，transflate等）都是会影响元素整个坐标系统。也就是说rotate旋转的时候是旋转的整个坐标系统。这是实现用一个元素沿环弄路径平移的基础。原理图如下：

详解Css3新特性应用之过渡与动画

两个元素方案，transform-origin + rotate可以实现，但html结构需要两个元素，如下代码：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes spin{
            to{ transform: rotate(1turn); } /*顺时针旋转360*/
        }
        @keyframes spin-reverse{
            from{ transform: rotate(1turn); } /*逆时针旋转360*/
        }
        .wrap{
            width: 300px;
            height: 300px;
            background: yellow;
            border-radius: 50%;
            overflow: hidden;
            padding: 20px; /*加大窗口的宽和高，利用背景从边框开始的原理，让运动图片与边框有一定的距离*/
        }
        .spin{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0px auto; /*运行元素居中*/
            animation: spin 5s infinite linear;
            transform-origin: 50% 150px; /*定位变换的原点*/
        }
        .spin > img{
            width: inherit;
            height: inherit;
            animation: spin-reverse 5s infinite linear;
            --animation: inherit;
            --animation-direction: reverse; /*由于动画会控制整个元素+元素内部的元素一起动画，所以内部的元素要反向动画*/
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="spin">
            <img src="../img/cat.png" alt="" />
        </div>
    </div>
</body>

说明：

1..spin的transform-origin: 50% 150px;是进行变换原点的定位；

2.由于需要实现spin环形运动，transform本质特性是元素+元素内部子元素都要随着变换，因此需要对img元素进行反向变形

3.实现两种反向变形的方式：A:写一个反向变形动画；B：继承父级的动画，用animation-direction指定位reverse进行反向。

单个元素方案，利用translate和rotate（多次利用），html结构只有一层，代码如下：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*反向旋转必须有，不然位置不对*/
        @keyframes spinc{
            from{
                transform: translate(50%, 150px)
                            rotate(0turn)
                            translate(-50%, -150px) 
                            translate(50%, 50%)
                            rotate(1turn)
                            translate(-50%, -50%); /*前三个第一轮旋转，后三个第二轮旋转*/
            }
            to{
                transform: translate(50%, 150px)
                            rotate(1turn)
                            translate(-50%, -150px)
                            translate(50%, 50%) 
                            rotate(0turn)
                            translate(-50%, -50%);
            }
        }
        .wrap{
            width: 300px;
            height: 300px;
            background: yellow;
            border-radius: 50%;
            overflow: hidden;
            padding: 20px; /*加大窗口的宽和高，利用背景从边框开始的原理，让运动图片与边框有一定的距离*/
        } 
        .avatar{            
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0px auto; /*运行元素居中*/
            display: block;   
            animation: spinc 5s linear infinite; 
        }
    </style>
</head>
<body>
    <div class="wrap"> 
        <img src="../img/cat.png" alt="" class="avatar" /> 
    </div>
</body>

说明：

1.一个img然后即要沿环型路径运动，本身又不能随着旋转，那么就需要两组位移和旋转

2.第一组位移 + 旋转，实现img元素沿环形路径运动

translate(50%, 150px)

rotate(0turn)

translate(-50%, -150px)

3.第二组位移 + 旋转，实现img元素本身定位不动

translate(50%, 50%)

rotate(1turn)

translate(-50%, -50%)

两个元素方案主单个元素方案效果图如下：

详解Css3新特性应用之过渡与动画

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
css3过渡动画效果,css3,过渡动画, css3,过渡动画代码
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接