css3+less隨機動畫總結

Mertens 發布于2019-08-30 14:07 / 2155人閱讀

摘要：前言有個動畫需求，有幾個，需要不同時，不同幅度移動，用了實現重點使用，內可嵌入代碼，獲得的內容可以做名字，也可以當作數字參與的其他計算，但是獲得的內容不能當作名字編譯前編譯后總結在

前言

有個動畫需求，有幾個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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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