直播软件开发，css预加载旋转动画 与 流光字体

直播软件开发，css预加载旋转动画 与 流光字体

一、预加载旋转动画

 

1

<br>Html<br><view class="concentric_round"></view><br>css<br>body {<br><br>}<br>.concentric_round {<br>width: 200rpx;<br>height: 200rpx;<br>position: relative;<br>position: absolute;<br>top: 50%;<br>left: 50%;<br>transform: translate(-50%, -100%);<br>}<br>.concentric_round::after,<br>.concentric_round::before {<br>content: '';<br>display: block;<br>position: absolute;<br>top: 50%;<br>left: 50%;<br>transform: translate(-50%, -50%);<br>background-color: #fff;<br>opacity: 0.4;<br>border-radius: 100%;<br>}<br> <br>.concentric_round::before {<br>width: 50%;<br>height: 50%;<br>animation: beform_round 0.6s ease-in-out infinite alternate;<br>}<br> <br>.concentric_round::after {<br>width: 100%;<br>height: 100%;<br>animation: after_round 0.6s ease-in-out infinite alternate;<br>}<br>/* 外圆 */<br>@-webkit-keyframes after_round {<br>0% {<br>transform: translate3d(-50%, -50%, 0) scale(1.3);<br>}<br>100% {<br>transform: translate3d(-50%, -50%, 0) scale(1);<br>}<br>}<br>@keyframes after_round {<br>0% {<br>transform: translate3d(-50%, -50%, 0) scale(1.3);<br>}<br>100% {<br>transform: translate3d(-50%, -50%, 0) scale(1);<br>}<br>}<br>/* 内圆 */<br>@-webkit-keyframes beform_round {<br>0% {<br>transform: translate3d(-50%, -50%, 0) scale(0.7);<br>}<br>100% {<br>transform: translate3d(-50%, -50%, 0) scale(1);<br>}<br>}<br>@keyframes beform_round {<br>0% {<br>transform: translate3d(-50%, -50%, 0) scale(0.7);<br>}<br>100% {<br>transform: translate3d(-50%, -50%, 0) scale(1);<br>}<br>}

​

二、流光字体动画

 

1

<br>html<br><view class="preload">F-REWARD</view><br>css <br>.preload {<br>width: 100%;<br>font-weight: bold;<br>font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;<br>font-size: 2.5rem;<br>text-align: center;<br>background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);<br>-webkit-text-fill-color: transparent;<br>-webkit-background-clip: text;<br>-webkit-background-size: 200% 100%;<br>-webkit-animation: masked-animation 2s infinite linear;<br>position: absolute;<br>top: 50%;<br>left: 50%;<br>transform: translate(-50%, -100%);<br>}<br>@-webkit-keyframes masked-animation {<br>0% {<br>background-position: 0 0;<br>}<br>100% {<br>background-position: -100% 0;<br>}<br>}

 

以上就是 直播软件开发，css预加载旋转动画 与 流光字体，更多内容欢迎关注之后的文章