精华内容
下载资源
问答
  • Android代码-Keyframes

    2019-08-07 02:59:55
    Keyframes Keyframes is a combination of (1) an ExtendScript script that extracts image animation data from an After Effects file and (2) a corresponding rendering library for Android and iOS. ...
  • 语法@keyframes animationname {keyframes-selector {css-styles;}}animationname 必需。定义动画的名称。keyframes-selector必需。动画时长的百分比。合法的值:0-100%from(与 0% 相同)to(与 100% 相同)css-styles ...

    语法

    @keyframes animationname {keyframes-selector {css-styles;}}

    animationname 必需。定义动画的名称。

    keyframes-selector

    必需。动画时长的百分比。

    合法的值:

    0-100%

    from(与 0% 相同)

    to(与 100% 相同)

    css-styles 必需。一个或多个合法的 CSS 样式属性。

    定义和用法

    通过 @keyframes 规则,您能够创建动画。

    创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

    在动画过程中,您能够多次改变这套 CSS 样式。

    以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

    0% 是动画的开始时间,100% 动画的结束时间。

    为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

    注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

    目前浏览器都不支持 @keyframes 规则。

    Firefox 支持替代的 @-moz-keyframes 规则。

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

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

    例:

    复制代码代码如下:

    div

    {

    width:100px;

    height:100px;

    background:red;

    position:relative;

    animation:mymove 5s infinite;

    -moz-animation:mymove 5s infinite; /* Firefox */

    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */

    -o-animation:mymove 5s infinite; /* Opera */

    }

    @keyframes mymove

    {

    0% {top:0px; left:0px; background:red;}

    25% {top:0px; left:100px; background:blue;}

    50% {top:100px; left:100px; background:yellow;}

    75% {top:100px; left:0px; background:green;}

    100% {top:0px; left:0px; background:red;}

    }

    @-moz-keyframes mymove /* Firefox */

    {

    0% {top:0px; left:0px; background:red;}

    25% {top:0px; left:100px; background:blue;}

    50% {top:100px; left:100px; background:yellow;}

    75% {top:100px; left:0px; background:green;}

    100% {top:0px; left:0px; background:red;}

    }

    @-webkit-keyframes mymove /* Safari and Chrome */

    {

    0% {top:0px; left:0px; background:red;}

    25% {top:0px; left:100px; background:blue;}

    50% {top:100px; left:100px; background:yellow;}

    75% {top:100px; left:0px; background:green;}

    100% {top:0px; left:0px; background:red;}

    }

    @-o-keyframes mymove /* Opera */

    {

    0% {top:0px; left:0px; background:red;}

    25% {top:0px; left:100px; background:blue;}

    50% {top:100px; left:100px; background:yellow;}

    75% {top:100px; left:0px; background:green;}

    100% {top:0px; left:0px; background:red;}

    }

    注释:本例在 Internet Explorer 中无效。

    展开全文
  • 现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图(主要涉及到动画效果,中间部分左右两边不说): ### 主要思路 使用animation配合@keyframes来使用上下移动动画 **...

    最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图(主要涉及到动画效果,中间部分左右两边不说):

    主要思路

    使用animation配合@keyframes来使用上下移动动画

    问题1:如何将不同柱子的top值传递给@keyframes中?用 document.styleSheets[0].insertRule

    在请求后端成功后进行的操作:

    document.styleSheets[0].insertRule(
        "@keyframes tbMove" + index + "" +
        "{" +
        "0%{top: " + topValue + "px;}" +
        "50%{top: " + (topValue + 15) + "px;}" +
        "100%{top: " + topValue + "px;}" +
        "}"
    )
    document.styleSheets[0].insertRule(".tbmovestyle" + index + "{" +
        "animation: tbMove"+index+" 4s infinite;" +
        "}"
    )

    以上代码相当于在页面中插入了 .tbmovestyle 和 @keyframes tbMove + index 样式.可以通过以下代码查看页面样式

    console.log("document", document.styleSheets[0])

    随后在使用的地方动态绑定即可,参考例子:

    <div v-for="(item,index) in centerMsg" :style="{'left':item.LEFT,'top':item.TOP}"
               :class="{
               'tbmovestyle0':index==0,
               'tbmovestyle1':index==1,
               'tbmovestyle2':index==2,
               'tbmovestyle3':index==3,
               'tbmovestyle4':index==4,
               'tbmovestyle5':index==5,
               'tbmovestyle6':index==6,
               'tbmovestyle7':index==7,
               'tbmovestyle8':index==8,
               'tbmovestyle9':index==9,
               'tbmovestyle10':index==10,
               'tbmovestyle11':index==11,
               }"></div>

    以上就是我对Vue中@keyframes动态参数的认识,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

    展开全文
  • 操作 主要使用的是document.styleSheets[0] ...下面是演示代码: <template> <div> <div class="toupiao" v-if="showTest"> <div class="yes btns" @click="changes('1')">赞同<

    使用一个简单的投票系统来做演示。
    在这里插入图片描述
    在这里插入图片描述

    操作

    主要使用的是document.styleSheets[0]
    通过插入规则 insertRule 来添加动画
    最后通过style进行样式修改

    代码

    下面是演示代码:

    <template>
        <div>
            <div class="toupiao" v-if="showTest">
                <div class="yes btns" @click="changes('1')">赞同</div>
                <div class="no btns" @click="changes('0')">不赞同</div>
            </div>
            <div class="showToupiaoMsg" v-show="!showTest">
                <div class="yes btns" ref="yes">
                    <div>
                        <span v-show="touVal == '1'">您选择了:</span>
                        赞同
                    </div>
                    <div>
                        {{ yesPeople }}
                    </div>
                </div>
                <div class="no btns" ref="no">
                    <div><span v-show="touVal == '0'">您选择了:</span>不赞同</div>
                    <div>
                        {{ noPeople }}
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                yesPeople: 6781, //同意人数
                noPeople: 3361, //不同意人数
                showTest: true, //显示
                touVal: "" //选择的选项
            }
        },
        methods: {
            // 显示投票数据
            changes(val) {
                this.showTest = false
                this.touVal = val
            }
        },
        mounted() {
            // 百分比
            var isTrue = (this.yesPeople / (this.yesPeople + this.noPeople)) * 100
            var isFalse = (this.noPeople / (this.yesPeople + this.noPeople)) * 100
            // 规则
            var ruleTrue = ` @keyframes changeWidth3 {
                        to {
                            background-size: ${isTrue}% 100%;
                        }
                }`
            var rulesFalse = `
                         @keyframes changeWidth4 {
                        to {
                            background-size: ${isFalse}% 100%;
                        }
                }`
            // 获取规则并进行改变
            var sheet = document.styleSheets[0]
            sheet.insertRule(ruleTrue, 0)
            sheet.insertRule(rulesFalse, 0)
            this.$refs.yes.style.animation = "changeWidth3  1s  forwards"
            this.$refs.no.style.animation = "changeWidth4  1s  forwards"
        }
    }
    </script>
    
    <style lang="less" scoped>
    .toupiao {
        width: 100vw;
        height: 100px;
        overflow: hidden;
        background: pink;
        .btns {
            width: 94%;
            height: 2rem;
            margin: 10px;
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btns:active {
            background: orangered;
            border: 1px solid orangered;
            opacity: 0.6;
        }
    }
    .showToupiaoMsg {
        width: 100vw;
        height: 120px;
        overflow: hidden;
        background: pink;
        margin-top: 1px;
        .btns {
            width: 92%;
            height: 2rem;
            margin: 10px;
            border: 1px solid #fff;
            border-radius: 5px;
            color: #fff;
            display: flex;
            justify-content: space-between;
            padding: 0.2rem;
            align-items: center;
        }
        .yes {
            background-image: linear-gradient(#73ffa0, #73ffa0);
            background-repeat: no-repeat;
            background-size: 0 100%;
            background-position: 0 70%;
            animation: changeWidth 1s forwards;
        }
        .no {
            background-image: linear-gradient(#ccc, #ccc);
            background-repeat: no-repeat;
            background-size: 0 100%;
            background-position: 0 70%;
            animation: changeWidth2 1s forwards;
        }
    }
    </style>
    
    展开全文
  • keyframes选择器

    2021-03-03 16:23:02
    这是一个box(红色圆球)在一个边框里利用keyframes在页面刷新时进行从左到右的运动布局代码为 然后红球相对于蓝框相对运动; 然后设置keyframes,move(名称可自己设置); 开始由0%到100%,改变...

    keyframes选择器可做“过渡”类效果

    用做测试可自己创一个;这是一个box(红色圆球)在一个边框里利用keyframes在页面刷新时进行从左到右的运动布局代码为

     

     

    然后红球相对于蓝框相对运动;

    然后设置keyframes,move(名称可自己设置);

    开始由0%到100%,改变left的值;设置完keyframes后通过animation动画来引用,即

     

    move为前面keyframes设置的名称,2s为两秒钟完成由0%到100%;1为进行1次便结束;上面数据可根据自己需求设置;

    完整代码为

     

     

     

     

     

     

     

     

    展开全文
  • keyframes在不同浏览器的表现性

    千次阅读 2018-03-23 16:41:00
    一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selector{ animation: name duration timing-function delay iteration-count ...
  • @keyframes shake-data-v-e732b878 { 0% { -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotate(0deg); ...
  • @-webkit-keyframes change{0%{ transform:rotate(0deg);}10%{ transform:rotate(3deg);}20%{ transform:rotate(-3deg);}30%{ transform:rotate(2deg);}40%{ transform:rotate(-2deg);}50%{ transform:rotate(1deg);...
  • Document 需要注意的是实现轮播图的图片像素大小需要一致不然效果不好,可以使用ps或者pr来剪辑图片 代码是本人亲自敲打,可以直接复制粘贴使用。
  • @keyframes动画

    2020-03-17 11:12:14
    代码示范 <style> @keyframes righthrough{ 0%{ left: 0; } 100%{ left:64px; } } .passRight{ width: 96px; height: 32px; overflow: hidden; position: relative; } ....
  • 在写基于网页的2048时,想让一个元素出现时已经通过translate属性固定在指定位置,同时...CSS代码为 @-webkit-keyframes mymove_failed { 0% {-webkit-transform:translate(50px,50px) scale(0);} 100% {-w
  • jquery @keyframes 动态添加

    千次阅读 2018-11-08 10:03:00
    需要写一个css3的动画效果,且需要按着写的事件同事进行需控制样式 css代码 @keyframes spin1 { 0% { transform: rotate(225deg); } 50% { ...
  • css 动画 keyframes

    2020-08-14 21:03:33
    动画是CSS3最具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果. 相比较过渡效果,动画可以实现更多变化,更多控制, 连续播放等效果. 动画的基本使用: 步骤分为两步: 1....
  • CSS3动画——Keyframes

    2017-01-10 09:51:47
    在CSS3其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green;
  • css3 keyframes日全食动画特效是一款基于css3 keyframes属性绘制的太阳被月亮遮住日食动画特效。
  • 简单的@keyframes效果

    2019-01-19 16:48:15
    开发工具与关键技术:DW的@keyframes规则效果 作者:冉冉 撰写时间:2019年1月18日 @keyframes是animation的一个规则,可以实现一些动画效果的图片切换 一小段简单的HTML代码: 然后写一些基本的样式: 其中...
  • 主要介绍了@keyframes规则实现多重背景的CSS动画,代码中使用的是效果图显示的素材,仅作为脚本示例在此便不提供下载了,需要的朋友可以参考下
  • CSS3 动画关键帧 @keyframes

    千次阅读 2018-02-23 22:07:36
    动画在CSS3,通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果,但它只能控制...CSS3,animation 实现的动画由两个部分组成:首先,使用关键帧 @keyframes 来声明...
  • Keyframes-crx插件

    2021-04-01 20:20:36
    语言:English 浏览器内CSS动画创建者。 关键帧是非常简单且极其有用的工具,可用于直接在浏览器创建CSS动画,而无需在浏览器和编辑器之间切换。...完成后,您将获得可用的代码以添加到您的项目
  • 在css3,我们可以通过@keyframes创建关键帧动画效果。我们需要将@keyframes绑定到选择器,否则不会有效果出现。同时,我们还需定义动画时长和动画名称语法@keyframes animationname {keyframes-selector {css-...
  • 关于firefox下@keyframes的兼容问题。
  • CSS3 @keyframes 规则

    千次阅读 2016-04-15 21:17:58
    dreamwear不提供@keyframes 规则   div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -
  • keyframes 放大缩小动画

    2016-05-17 15:33:00
    本次项目动画放大缩小代码小结 .fix .phone{ -moz-animation: myfirst 1s infinite; -webkit-animation: myfirst 1s infinite; -o-animation: myfirst 1s infinite; animation: myfirst 1s infinite;} @...
  • (代码不考虑兼容性)运行的时候不是按我想的步骤来的,而是:转30度和向右走同时进行,转330度和往回走同时进行。请问为什么?怎么写正确的代码完成我的要求?回复讨论(解决方案)@keyframes donghua{0% {width:120px;...
  • CSS3 @keyframes动画规则

    千次阅读 2017-03-12 16:10:25
    W3CSchool标准CSS使用语法 *@keyframes 针对不同浏览器兼容 @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-...
  • 定义动画的格式: @keyframes 动画名称{  阶段1{css样式}  阶段2{css样式}  阶段3{css样式} ...每个阶段用百分比表示,即从0%到100% ...下列代码中的图片plane在屏幕,呈W型运动 i
  • CSS: transition和@keyframes动画

    千次阅读 2018-10-17 11:49:04
    前言 为了更好的用户体验,在开发时我们使用了适当的动画,实现一些切换的效果。在使用@keyframes时遇到一点问题,于是开始找...一开始是使用了@keyframes,看下小程序的代码 <view class="arrow"> &l...
  • @keyframes写js

    2018-10-22 17:31:00
    var tt=document.styleSheets[0];//获取所有样式tt.deleteRule(6);...tt.insertRule("@-webkit-keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}",6);//写入样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,060
精华内容 8,424
关键字:

代码中keyframes