Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Trucos y efectos de CSS3 - Tutoriales En Linea</title> </head> <body> <style> main { width: 100%; padding: 52px 17px 52px 29px; } .container { display: flex; flex-direction: row; } .item { width: 20%; height: 29px; background: #b4a078; border-radius: 5px; margin: 12px; margin-left: 0; } </style> <main> <span class="radio-wrap" v-for="radio in radios"> <input type="radio" :id="radio.id" :value="radio.value" v-model="flexDirection"> <label :for="radio.id" @click="handleSelected(radio.id)"> {{ radio.value }} </label> </span> <div class="container" :style="{ flexDirection }"> <span class="item" v-for="$ in elements" :style="{ opacity: 1 - $ / 10 }"> </span> </div> </main> <script> export default { data() { return { elements: Array.from({ length: 5 }).map((v, i) => i + 1), radios: [ { id: 'row', value: 'row' }, { id: 'row-reverse', value: 'row-reverse' }, { id: 'column', value: 'column' }, { id: 'column-reverse', value: 'column-reverse' }, ], flexDirection: 'row', } }, methods: { handleSelected(dir) { this.flexDirection = dir; } } } </script> </body> </html>