css

关注

发布于: 2021 年 04 月 11 日

直接上代码这个程序贼有趣像打字机把一个字一个字打出来不通过 js 也能完成动态效果，这也是 css 的好处哈

    div {        margin: 0 auto;        overflow: hidden;        font-size: 100px;        width: 0;        height: 120px;        white-space: nowrap;        background-color: purple;        /* animation: name duration timing-function delay iteration-count direction fill-mode; */        animation: w 2s steps(9) forwards;    }</style>

复制代码

12345678910111213141516171819202122<body><div>程序猿是一个大帅比</div></body>123 其中我们运用到了 steps()属性程序设计思路：我们发现"程序猿是一个大帅比"是九个字，我们想一次出现一个，所以填 9。我们想让所有汉字在一行上显示所以要用 white-space: nowrap;多余部分要省略 overflow: hidden;然后找一个好看的布局，本人是把它放在正中间如果在网页设计中可以根据网页进行定位我们为了美观，就要设置汉字大小，汉字个数乘以大小就等于宽度，盒子高度要大于汉字高度，这是我们设计中必须要调试和计算的内容。这个小窍门学废了么= =宁外，博主也是个大帅币。