Question

以下代码

[
  {
    "sku": "d1cd71a8-9dc5-4724-b269-473ede28a1d7",
    "selectedQtyOptions": [],
    "selectedSize": "",
    "description": "foolish interpolates trumpet monographs ferried inboards Forster tike grammatically sunroof vaporizing Sweden demure retouching completely robbing readies unloose guiltless tatty unobservant cuffs fortieth wither rigorously paradoxically snowmobiling charts clenching planning dealing lesions bicameral pertly chaffinches grumpiness private purled insanely attainment proposal Fatima execrates pshaws chars actuators turboprop soughed kicking majors conquistadores Cynthia septuagenarians kneecaps titans attractions larvas invigorating trunking Shevat recluse Trina slenderness kinking falsified logistically hogged skyrocketing ordinal avoiding trademarked underfoot garter sacrificial pricey nosedive bachelors deiced heave dictatorial muffing prayed rewinding recopied limpidly Crichton conversion chitterlings signets Aiken Froissart turnoff snowshoe forded spiralled underwriters flourishes Sade splicer transfusions cesspools lifelike ruckus showering paean voguish Buck copings Russell watchdog magneto pored height zodiac motherland backings Venus obeys scooters nonintervention dinosaur unashamedly anathema hibernate consumerism portended worked mystically existentialist dissatisfies badgers unanimously triplicated Jenny sagacity Windex snoopier nonplusing shovelling Assam putty darn Sulawesi Italians gunnery codify develops rhinos upwards Louise welled experiences socks pinky mewed Camille claimants swirl squattest ware parenthetic bonitoes hydrangeas decolonizing omit skyjacks Gorky financiers province flywheel southeastward Bayeux updated yowl Tulsidas macintosh sprees pralines systolic uncommoner cilium tromping Asimov heinous cordoned combated camerawomen syndrome identified prizefights heavyweight vertically reflector integrity Hebrides sepulchral loner parrot smooths candidness",
    "selectedQty": "1",
    "title": "viragoes",
    "brand": "Brand0",
    "images": [
        {
            "image0": "/media/products/f791a316ced7b3b774bd61e138197224.jpg"
        }
    ],
    "sizeQtyPrice": [
        {
            "discountAttributes": "chinos theosophy misdemeanor irrigates school Pullman sombrely suspect vortex baddest",
            "measureUnit": "ltr",
            "discountPercent": 4,
            "mrp": 3102,
            "qty": 7,
            "size": 66
        },
        {
            "discountAttributes": "Molotov absurd traces pounces contracts clarions thighbone Hesse parricide constrains",
            "measureUnit": "m",
            "discountPercent": 16,
            "mrp": 2773,
            "qty": 7,
            "size": 18
        },
        {
            "discountAttributes": "detainment gunnysack vied expropriation unobtrusive collectables embracing poster hexing governess",
            "measureUnit": "m",
            "discountPercent": 6,
            "mrp": 9920,
            "qty": 6,
            "size": 69
        }
    ],
    "id": 9
},
{
    "sku": "838660bb-7ab9-4f2a-8be7-9602a5801756",
    "selectedQtyOptions": [],
    "selectedSize": "",
    "description": "agreeing vizier bleariest trig appliquéing copulating commissariats Balzac lunchtimes glittery quacking Leoncavallo heehawing Tampax lizards pegged nanosecond centigrade subplots tumbrils give jawed skits nickel discontinues impinged evangelized Platonist waterlines dams symposiums intercessor cognition heavier softener dromedaries bravos immobilize consciously Clemons patch klutzier Kirkpatrick caddying designs Dulles twelfths undemocratic isolationists infected ma homering soliciting minibus pluralism fraternity catalyzed Scorpio pandemonium waxwing starter infuses rebuttals spirals rerunning interrogatories Manuel whomsoever tenderized conjoint baronesses callower parenthetic plusses extend cockier Fokker dewlap Cowper Swammerdam secs hock relaxations Judas Canadian presidency lo wildness Philippe picture beekeeper lull manuals transnational yaw chloroformed perennials distinctive Nottingham antiquaries underneath parted nervously basemen observatories scrubbed encoder egalitarians winnow caddish Hawaiians brownstones robbing exhaustible antagonist benefactresses Plasticine Peace platypi Guzman stippled shuts peacemakers butterfly Bolton grout McCain Lebanon bounce oleander Balkans endearments snowfall spoonerisms furnaces inequities billowy jutting guffaw beautifully penis newtons snuffboxes j Angelita tinkles literature depicts insouciant scribblers blinker disobediently devotees primordial sixties Kalamazoo shear contest classes cripple edging exactest cheat invocation thrived drunkenness Fuller architectures sprite Lillian constricts tucking chastisements walruses guzzlers rejoinder apprenticeships pillory spendthrift omens spoonful contortions precociously intensely motorway guts cahoot sculptor paralytics reminisce meltdown trusts lady pronghorn scurried Campbell micron flawing foals nigher",
    "selectedQty": "1",
    "title": "smokier",
    "brand": "Brand2",
    "images": [
        {
            "image0": "/media/products/f51a649e72694d23962ee77a97872f0e.jpg"
        }
    ],
    "sizeQtyPrice": [
        {
            "discountAttributes": "Beerbohm earldom Stanley seconding hypertension Sayers miserly epitome retires ditching",
            "measureUnit": "m",
            "discountPercent": 15,
            "mrp": 5065,
            "qty": 6,
            "size": 83
        },
        {
            "discountAttributes": "confine Newman bagel cornflower rears generator goaded midweeks drain cigarillo",
            "measureUnit": "Kg",
            "discountPercent": 12,
            "mrp": 2284,
            "qty": 9,
            "size": 13
        },
        {
            "discountAttributes": "eerier fizzes lessened rotisserie developer Gray industrial callused convergences ampoule",
            "measureUnit": "gms",
            "discountPercent": 4,
            "mrp": 6816,
            "qty": 8,
            "size": 18
        }
    ],
    "id": 14
  }
]

创建此输出：

@keyframes example {
   100% {background-color: grey;}
}
<?php
$code = 1432;
$arr1 = str_split($code);
$css = '';
foreach ($arr1 as $value) {
    $css .= '#btn' . $value . ' {';
    $css .= 'animation-name:example;';
    $css .= 'animation-duration:1s;';
    $css .= 'animation-delay:0.5s;';
    $css .= '}'; 
}

echo $css; // output variable
?>

我的问题是四个动画同时开始。我应该在foreach循环中添加什么，每个动画延迟1秒。在此示例中，#btn1 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} #btn4 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} #btn3 {animation-name:example;animation-duration:1s;animation-delay:0.5s;} #btn2 {animation-name:example;animation-duration:1s;animation-delay:0.5s;}在一秒#btn1之后变为动画，依此类推？我知道我需要每次更改动画延迟加1秒，但我不知道如何。：/

Answer 1

foreach ($arr1 as $index => $value) {
    $css .= '#btn' . $value . ' {';
    $css .= 'animation-name:example;';
    $css .= 'animation-duration:1s;';
    $css .= 'animation-delay:' . $index . 's;';
    $css .= '}'; 
}

foreach循环动画延迟+ 1s

1 个答案: