CSS3的自定义动画帧

最新推荐文章于 2022-09-01 21:17:02 发布
最新推荐文章于 2022-09-01 21:17:02 发布
阅读量476 收藏
点赞数
原文链接：http://www.cnblogs.com/-walker/p/5425925.html
版权

CSS3新增的动画帧非常绚丽，可以简单实现一些动画效果，目前除IE外各大主流浏览器都支持

本文演示三个：transform: scale3d(x, y, z)-缩放;、transform: translate3d(x, y, z)-位移;、transform:rotateX/Y(?deg)-旋转;

演示地址:http://wjf444128852.github.io/demo02/css3/index.html

@keyframes 动画名{}
@-处理兼容性-keyframes
animation: expand 0.6s ease-out infinite;[动画名 动画执行时间 动画速度 动画次数]
-处理兼容-animation:
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>CSS3</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="parent">
        <div class="main"></div>
        <div class="d2"></div>
        <div class="d3">A</div>
    </div>

</body></html>
html,body{
            width: 98%;
            height: 98%;
        }
        /*方法二*/
        body{
            display: flex;
            align-items: center;/****水平居中****/
            justify-content: center;/*垂直居中*/
        }
        .parent{
            overflow: hidden;
            width: 500px;
            height: 400px;
            background: orange;
            /*方法一*/
            /*margin: 0 auto;*/
            position: relative;
            /*top: 50%;*/
            /*margin-top: -200px;*//***此行等于transform:translateY(-50%)******/
        }
        .parent div{
            width: 100px;
            height:100px;
            margin: 0 auto;
            margin-top: 20px;
        }
        .main{
            position: relative;
            /*top:150px;*/
            background: pink;
            -webkit-animation: expand 0.6s ease-out infinite;
            -moz-animation: expand 0.6s ease-out infinite;
            -o-animation: expand 0.6s ease-out infinite;
            -ms-animation: expand 0.6s ease-out infinite;
            animation: expand 0.6s ease-out infinite;
        }
        .d2{
            background: green;
            -webkit-animation: bounce 3s ease-out infinite;
            -moz-animation: bounce 3s ease-out infinite;
            -o-animation: bounce 3s ease-out infinite;
            -ms-animation: bounce 3s ease-out infinite;
            animation: bounce 3s ease-out infinite;

        }
        @keyframes bounce {
            0% {
                transform: translate3d(0, -25px, 0);
                opacity: 0;
            }
            25% {
                transform: translate3d(0, 10px, 0);
            }
            50% {
                transform: translate3d(0, -6px, 0);
            }
            75% {
                transform: translate3d(0, 2px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
        @-webkit-keyframes bounce {
            0% {
                transform: translate3d(0, -25px, 0);
                opacity: 0;
            }
            25% {
                transform: translate3d(0, 10px, 0);
            }
            50% {
                transform: translate3d(0, -6px, 0);
            }
            75% {
                transform: translate3d(0, 2px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
        @-moz-keyframes bounce {
            0% {
                transform: translate3d(0, -25px, 0);
                opacity: 0;
            }
            25% {
                transform: translate3d(0, 10px, 0);
            }
            50% {
                transform: translate3d(0, -6px, 0);
            }
            75% {
                transform: translate3d(0, 2px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
        @-o-keyframes bounce {
            0% {
                transform: translate3d(0, -25px, 0);
                opacity: 0;
            }
            25% {
                transform: translate3d(0, 10px, 0);
            }
            50% {
                transform: translate3d(0, -6px, 0);
            }
            75% {
                transform: translate3d(0, 2px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
        @keyframes expand {
            0% {
                transform: scale3d(1, 0, 1);
            }
            25% {
                transform: scale3d(1, 1.2, 1);
            }
            50% {
                transform: scale3d(1, 0.85, 1);
            }
            75% {
                transform: scale3d(1, 1.05, 1);
            }
            100% {
                transform: scale3d(1, 1, 1);
            }
        }
        @-webkit-keyframes expand {
            0% {
                transform: scale3d(1, 0, 1);
            }
            25% {
                transform: scale3d(1, 1.2, 1);
            }
            50% {
                transform: scale3d(1, 0.85, 1);
            }
            75% {
                transform: scale3d(1, 1.05, 1);
            }
            100% {
                transform: scale3d(1, 1, 1);
            }
        }
        @-moz-keyframes expand {
            0% {
                transform: scale3d(1, 0, 1);
            }
            25% {
                transform: scale3d(1, 1.2, 1);
            }
            50% {
                transform: scale3d(1, 0.85, 1);
            }
            75% {
                transform: scale3d(1, 1.05, 1);
            }
            100% {
                transform: scale3d(1, 1, 1);
            }
        }
        @-o-keyframes expand {
            0% {
                transform: scale3d(1, 0, 1);
            }
            25% {
                transform: scale3d(1, 1.2, 1);
            }
            50% {
                transform: scale3d(1, 0.85, 1);
            }
            75% {
                transform: scale3d(1, 1.05, 1);
            }
            100% {
                transform: scale3d(1, 1, 1);
            }
        }
        /*transform:rotate3d(x,y,z,deg);*/
        /*transform:rotate3d(1，1,0,45deg);*/
        .d3{
            background: #e4393c;
            -webkit-animation: move 3s linear infinite;
            -moz-animation: move 3s linear infinite;
            -ms-animation: move 3s linear infinite;
            -o-animation: move 3s linear infinite;
            animation: move 3s linear infinite;
        }
        @-o-keyframes move{
            25%{
                transform:rotateY(45deg);
            }
            50%{
                transform:rotateY(360deg);
            }
            75%{
                transform:rotateX(45deg);
            }
            100%{
                transform:rotateX(180deg);
            }
        }
        @-moz-keyframes move{
            25%{
                transform:rotateY(45deg);
            }
            50%{
                transform:rotateY(360deg);
            }
            75%{
                transform:rotateX(45deg);
            }
            100%{
                transform:rotateX(180deg);
            }
        }
        @-webkit-keyframes move{
            25%{
                transform:rotateY(45deg);
            }
            50%{
                transform:rotateY(360deg);
            }
            75%{
                transform:rotateX(45deg);
            }
            100%{
                transform:rotateX(180deg);
            }
        }
        @keyframes move{
            25%{
                transform:rotateY(45deg);
            }
            50%{
                transform:rotateY(360deg);
            }
            75%{
                transform:rotateX(45deg);
            }
            100%{
                transform:rotateX(180deg);
            }
        }

 

转载于:https://www.cnblogs.com/-walker/p/5425925.html

weixin_30642561
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS关键帧动画
A0940的博客
03-17 994
首次打开HTML文档，在body部分添加一个div标签，并取上类名为box，再给box添加三个子元素标签 在HTML文档的头部部分给box添加样式，要在style标签里才能设置标签的样式。使用类选择器选择到父元素box，给它设置宽，高各200像素；设置圆角效果10像素；设置内阴影，模糊距离30像素 设置子元素样式，用元素选择器选择到子元素，设置宽，高各50像素，设置背景颜色黑色，设置圆角50%，设置阴影，垂直阴影5像素，模糊距离5像素；阴影颜色#636363 将父.
关键帧动画
w8666999的博客
03-06 539
关键帧动画简介
自定义帧--不同模块间使用串口进行数据交互
A3366_225的博客
04-01 1230
笔者的实验平台为STM32和AIR724UG，这两款芯片一种是常用的使用C语言开发的单片机一种是基于luat os的lua开发方式的通讯模块。算是可以比较本文所论述的使用自定义帧通过串口在不同平台进行数据交互的形式，算是抛砖引玉。 STM32与AIR724UG 概述 对于AIR724UG而言一般使用串口进行通讯，以下将介绍两种通讯协议的制订与实现方式，包含关于通讯协议通用性与帧长度之间的取舍。其中STM32使用C语言库函数编写、AIR724UG使用Lua脚本编写。 一般一个数据帧包含帧头、帧长度（包个数）、
CSS3实现自定义Checkbox动画.zip
11-17
本压缩包“CSS3实现自定义Checkbox动画.zip”聚焦于如何利用CSS3来实现自定义的Checkbox动画效果，这在提升用户体验方面具有重要意义。Checkbox作为HTML中的一个重要元素，常常用于用户的选择交互，而通过CSS3的动画...
css3卡通风扇动画特效
06-11
在本文中，我们将深入探讨如何使用CSS3的关键帧（keyframes）属性来创建一个卡通风扇的动画特效，以及如何添加一个控制风速的开关按钮。这个特效利用了CSS3的强大功能，包括变换（transform）、过渡（transition）...
CSS3的动画按钮泡泡
11-05
CSS3动画通过`@keyframes`规则定义一组关键帧，指定元素在不同时间点的样式。例如： ``` @keyframes bubble { 0% {transform: scale(1); opacity: 0;} 50% {transform: scale(1.2); opacity: 1;} 100% {...
CSS3动画下载按钮特效特效代码
03-20
CSS3的动画特性包括但不限于过渡（transition）、旋转（rotate）、缩放（scale）、平移（translate）以及关键帧动画（@keyframes），这些都可以被巧妙地应用于下载按钮的设计中，创造出丰富的视觉效果。 压缩包中的...
30种CSS3加载动画
03-03
首先，CSS3动画是通过关键帧（@keyframes）规则来定义的，它允许开发者精确控制元素在一段时间内的变化过程。例如，一个简单的旋转加载动画可以通过设定从0%到100%的关键帧，让元素从初始位置逐渐旋转到一个完整圆周...
定义关键帧动画
RE_SuXianSheng的博客
08-18 262
帧动画
@keyframes—定义动画关键帧
桃花扇的博客
04-06 637
@keyframes用来定义动画名和关键帧，其语法规则如下 @keyframes run { 0% { //有动画性质的属性的改变情况 } 25% { } 50% { } 75% { } 100% { } } 即将动画执行的过程分为若干段，在每一段中定义该段中最后一帧的元素的状态 【注】 1....
设置背景动画 (快速生成关键帧)
a36267862的博客
05-22 582
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8" /&gt;  &lt;title&gt;生成背景动画&lt;/title&gt;&lt;/head&gt;&lt;body&gt;  &lt;script type=&qu
C3 自定义动画
weixin_46146313的博客
02-05 385
自定义动画： 又叫关键帧动画：其中制作和绑定缺一不可 备注： 衣服可以制作和多件 同时一件衣服也可以给很多人穿（也就是说可以绑定给很多个元素） animation属性是一个简写，用于设置六个动画属性 animation-name：动画名称（必填） animation-duration：动画执行时间 animation-timing-function：动画执行的速度曲线（linear匀速、ease...
自定义css动画参考
qq_45723057的博客
10-23 318
/* 写属于自己的动画样式(参考 animate.css 动画库) */ /* 默认基础类作用：为默认情况 其他情况，可以[按需]修改默认情况(重新赋值) */ /* 定义基础类 */ .zc-animation { /* 执行所有动画名字 */ animation: all; /* 默认每个动画执行时间 */ animation-duratio...
css动画效果（关键帧）
comegoing_xin_lv的博客
09-01 2665
基本动画效果，基本参数和属性
CSS中动画——如何设置关键帧，8个动画属性及简写方式
王春燕的博客
04-13 4101
动画和过渡类似，都是可以实现一些动态效果，不同的是过渡需要在某个属性发生变化时才能触发，动画可以自动触发动画 一、设置关键帧 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画每一个步骤 语法：@keyframes 动画名 {} 代码演示： @keyframes text { /* from表示动画开始位置 也可以使用0%*/ from {margin-left: 0;} /* to动画的结束位置 也可以使用100%*/ ...
自定义帧数据输入，任意组数据输出
qq_38984928的博客
10-11 956
菜鸟学习2 1、传入数据data.txt如下： AAAAF110 0003E5F0 0003E22C 0003E794 0003FFFC BA AAAAF110 0003E688 0003E238 0003E788 0003FFFC 53 AAAAF110 0003E764 0003E22C 0003E77C 0003FFFC 18 AAAAF110 0003E7E8 0003E210 ...
Tailwindcss.js实现自定义动画
最新发布
07-14
要在Tailwind CSS中实现自定义动画，你需要使用`@keyframes`规则和`animation`类。下面是一个简单的示例，展示了如何使用Tailwind CSS来创建一个自定义动画： 首先，在你的CSS文件中定义动画的关键帧。例如，你可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值