图片预览
图片可能有点不清晰，看左侧便能发现一个旋转的字符！
如下图所示，但我们可以在网页左右两侧实现简洁的动态背景，而又不会显得特别花哨！整体图片如下：
CSS
- @-webkit-keyframes rotate {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg)
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg)
- }
- }
- @keyframes rotate {
- from {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg)
- }
- to {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg)
- }
- }
- .bg-asterisk-1 {
- cursor: default;
- height: 480px;
- width: 480px;
- text-align: center;
- position: absolute;
- opacity: .02;
- left: -17vh;
- margin: 0;
- line-height: 100vh;
- font-size: 95vh;
- font-weight: bold;
- -webkit-animation: rotate 3s infinite;
- animation: rotate 3s infinite;
- }
- .bg-asterisk-2 {
- cursor: default;
- height: 480px;
- width: 480px;
- text-align: center;
- position: absolute;
- opacity: .02;
- rightright: -17vh;
- margin: 0;
- line-height: 95vh;
- font-size: 95vh;
- font-weight: bold;
- -webkit-animation: rotate 3s infinite;
- animation: rotate 3s infinite;
- -webkit-animation-delay: 1s;
- animation-delay: 1s;
- }
HTML
- <p class=“bg-asterisk-1” aria-hidden=“true”>*</p>
- <p class=“bg-asterisk-2” aria-hidden=“true”>*</p>
里面的 * 字符可以换成自己所需要的，比如改 + ，显示如下
网站效果演示：点击这里
文章链接：https://www.sbkko.com/1-64.html
文章标题：纯CSS给网站实现极简的动态字符背景
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：纯CSS给网站实现极简的动态字符背景
文章版权：SBKKO 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
