css3+less随机动画总结

Mertens 发布于2019-08-30 14:07 / 2232人阅读

摘要：前言有个动画需求，有几个，需要不同时，不同幅度移动，用了实现重点使用，内可嵌入代码，获得的内容可以做名字，也可以当作数字参与的其他计算，但是获得的内容不能当作名字编译前编译后总结在

前言

有个动画需求，有几个div，需要不同时，不同幅度移动，用了css3+less实现

重点

使用~``，``内可嵌入js代码，获得的内容可以做keyframes 名字，也可以当作数字参与less的其他计算，但是获得的内容不能当作class名字

编译前

.move (@random) {
    @name: ~`"an-div-move-@{random}"`;
    @keyframes @name {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, @random/1000+.3rem);
        }
        100% {
            transform: translate(0, 0);
        }
    }
    @s: ~`Math.random()`;
    animation: @name linear 8s infinite @s*5*1s;
}

.div-1 {
    .move( `~Math.round(Math.random()*1000)`);
}

.div-2 {
    .move(~`Math.round(Math.random()*1000)`);
}

.div-3 {
    .move(~`Math.round(Math.random()*1000)`);
}

编译后

.div-1 {
  animation: an-div-move--611 linear 8s infinite 4.82357906s;
}
@keyframes an-div-move--611 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -0.311rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.div-2 {
  animation: an-div-move-493 linear 8s infinite 1.7538035s;
}
@keyframes an-div-move-493 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0.793rem);
  }
  100% {
    transform: translate(0, 0);
  }
}
.div-3 {
  animation: an-div-move-557 linear 8s infinite 4.65403445s;
}
@keyframes an-div-move-557 {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 0.857rem);
  }
  100% {
    transform: translate(0, 0);
  }
}

总结

在vue-cli中不能使用，直接less编译可以，可以用在webpack自己配置的项目中
但是不知道为什么可以这么写，没找到官方的说明

GPU云服务器云服务器 css3动画高性能css3动画 less less2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115784.html

HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

摘要：年前放假的最后一天，我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固，当回忆定格。这是属于我和的独家记忆。年前放假的最后一天，我们上线了「My Flyme 独家记忆」 H5 活动宣传页。因种种原因，直到放假前几天，才突然要求我们参与并开始项目的前端部分。此时大概的情况是：所有数据已计算完毕；后端接口已完成待联调；交互视觉只出了不到四分之一(一共二十多个页面)；我...

Anonymous1 2019-08-20 14:13 评论0 收藏0
HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

摘要：年前放假的最后一天，我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固，当回忆定格。这是属于我和的独家记忆。年前放假的最后一天，我们上线了「My Flyme 独家记忆」 H5 活动宣传页。因种种原因，直到放假前几天，才突然要求我们参与并开始项目的前端部分。此时大概的情况是：所有数据已计算完毕；后端接口已完成待联调；交互视觉只出了不到四分之一(一共二十多个页面)；我...

harryhappy 2019-08-30 15:52 评论0 收藏0
“蝉原则”与CSS3随机多背景随机圆角等效果

摘要：那蝉原则对我们网页设计有什么启示呢那就是可以以最小成本实现更自然的随机效果。本文就演示两个借助蝉原则和特性实现随机效果的例子。一、什么是蝉原则？蝉原则，英文称作cicada principle，是一种让事物的重复出现符合自然随机性的规则，为什么这么说呢？蝉原则源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7...

crossoverJie 2019-04-23 13:44 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0