yarn add css-doodle 然后在你想要使用<css-doodle />的地方先import,比如在App.vue文件中: import CSSDoodle from 'css-doodle' 然后你就可以在<template>中引用,比如: <css-doodle> :doodle { @grid: 20 / 100vmax; background: #5fa6bf; } @even { :
yarn add css-doodle 然后在你想要使用<css-doodle/>的地方先import,比如在App.vue文件中: importCSSDoodlefrom'css-doodle' 然后你就可以在<template>中引用,比如: <css-doodle>:doodle { @grid: 20 / 100vmax; background: #5fa6bf; } @even { :after { color: #fff3e6; content: '@hex(@rand(...
十分钟实现炫酷透明计算器,CSS3+JavaScript实现3D炫酷计算器 javascripthtml https://micku7zu.github.io/vanilla-tilt.js/ AlbertYang 2020/12/29 5820 用css3实现惊艳面试官的背景即背景动画(高级附源码) vue.jsreactcssjavascriptnode.js 这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收...
:doodle这个选择器选中的是<css-doodle>这个标签。 @grid的使用可以猜得到实质上它是用了CSS3的Grid布局,在控制台中就能看出这个布局,一行分了7个格子: 另外vmax这个单位也是CSS3中的表示尺寸的单位,意思是取宽度和高度大的那个作为标准(手机横放和竖放的时候会造成宽度和高度的改变),1vmax就是这个标准的1/100。
border-left: 1px solid hsl(@rand(137.50deg, 360deg), 80%, 80%); border-style: dashed; } </css-doodle> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 效果如下: