CSS3自定义音频Loading动画
  • 3年前
  • CSS3自定义音频Loading动画495
  • 这个代码我个人觉得还是比较有意思的,如果你也需要过渡动画或者跳转页面的话,那么可以尝试使用这个代码作为效果,下面是效果图: [video link="https://www.wpxsxy.com/wp-content/uploads/2021/07/Video_20210727180038.mp4" unique_number="video_d0b9dba27e40401aa500ead93b3fa798"]

    效果整体来看还是不错的,代码方面直接将下面的内容添加到CSS中:

     * {
    	margin:0px;
    	padding:0px;
    	border:0px;
    }
    html,body {
    	min-height:100%;
    }
    body {
    	background:#f8f8f8;
    }
    .loader {
    	position:absolute;
    	top:0px;
    	bottom:0px;
    	left:0px;
    	right:0px;
    	margin:auto;
    	width:175px;
    	height:100px;
    }
    .loader span {
    	display:block;
    	background:#fcb34f;
    	width:7px;
    	height:10%;
    	border-radius:14px;
    	margin-right:5px;
    	float:left;
    	margin-top:25%;
    }
    .loader span:last-child {
    	margin-right:0px;
    }
    .loader span:nth-child(1) {
    	animation:load 2.5s 1.4s infinite linear;
    }
    .loader span:nth-child(2) {
    	animation:load 2.5s 1.2s infinite linear;
    }
    .loader span:nth-child(3) {
    	animation:load 2.5s 1s infinite linear;
    }
    .loader span:nth-child(4) {
    	animation:load 2.5s 0.8s infinite linear;
    }
    .loader span:nth-child(5) {
    	animation:load 2.5s 0.6s infinite linear;
    }
    .loader span:nth-child(6) {
    	animation:load 2.5s 0.4s infinite linear;
    }
    .loader span:nth-child(7) {
    	animation:load 2.5s 0.2s infinite linear;
    }
    .loader span:nth-child(8) {
    	animation:load 2.5s 0s infinite linear;
    }
    .loader span:nth-child(9) {
    	animation:load 2.5s 0.2s infinite linear;
    }
    .loader span:nth-child(10) {
    	animation:load 2.5s 0.4s infinite linear;
    }
    .loader span:nth-child(11) {
    	animation:load 2.5s 0.6s infinite linear;
    }
    .loader span:nth-child(12) {
    	animation:load 2.5s 0.8s infinite linear;
    }
    .loader span:nth-child(13) {
    	animation:load 2.5s 1s infinite linear;
    }
    .loader span:nth-child(14) {
    	animation:load 2.5s 1.2s infinite linear;
    }
    .loader span:nth-child(15) {
    	animation:load 2.5s 1.4s infinite linear;
    }
    @keyframes load {
    	0% {
    	background:#fcb34f;
    	margin-top:25%;
    	height:10%;
    }
    50% {
    	background:#ff840b;
    	height:100%;
    	margin-top:0%;
    }
    100% {
    	background:#ff840b;
    	height:10%;
    	margin-top:25%;
    }
    }
    

    同样的,需要配合HTML内容来进行展现:

    有兴趣的可以自己去实践一下,操作起来应该不会很难。

  • 联系我们
  • 有任何疑问欢迎联系我们
  • WP新手学园
  • CSS3自定义音频Loading动画
  • 邮箱:2830776172#qq.com(#换成@)
  • 回复时间:9:00-19:00
  • 如果提问.请图文并茂,详细描述问题
  • CSS3自定义音频Loading动画
  • 微信号:wpxsxy_official
  • 仅支持付费解决问题
  • *并非所有问题都会被回复
  • CSS3自定义音频Loading动画
  • QQ:2830776172
  • 回复时间:9:00-19:00
  • QQ仅支持付费提问,时间有限,尽情谅解
  • CSS3自定义音频Loading动画
  • QQ群:198768181
  • 有问题可以进去提问,寻求群友帮助
  • *并非所有问题都会被回复
  • CSS3自定义音频Loading动画
  • 咸鱼:WP新手学园
  • 如果对于直接交易不放心,可以走闲鱼
  • *咸鱼价格不作为最终交易价格
  • 备案号:鄂ICP备2021011647号-1