zoukankan      html  css  js  c++  java
  • CSS实现运动光环

    css实现运动光环的小Demo
    效果图:

    实现代码:

    代码分析:
    Demo用到知识点:
    1.CSS的常用选择器,transform属性居中
    2.css的动画效果,动画延迟,
    3.filer:模糊
    HTML结构:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>圆形光环</title>
    		<link rel="stylesheet" href="css/style02.css" />
    	</head>
    	<body>
    		<!-- <div class="aura">
    			
    		</div> -->
    		<ul class="aura">
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    		<div class="box">
    		</div>
    	</body>
    </html>
    

    CSS代码:

    *{
    	margin: 0px;
    	padding: 0px;
    }
    body{
    	/* background-color: #050604; */
    	background-image: url('http://pic.netbian.com/uploads/allimg/170904/155001-150451140195fd.jpg');
    	/* background-repeat:repeat-x; */
    	background-size: 100% ;
    }
    ul{
    	list-style: none;
    	}
    ul li{
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    	background-color: yellow;
    	 400px;
    	height: 400px;
    	border-radius: 60% 40% 40% 60% / 60% 40% 60% 40%;
    	animation: ani 30s linear infinite;
    	filter: blur(5px);
    	mix-blend-mode: screen;
    }
    ul li:nth-of-type(2){
    	background-color: purple;
    	animation-delay: -10s;
    }
    ul li:nth-of-type(3){
    	background-color: blue;
    	animation-delay: -20s;
    }
    @keyframes ani{
    	from{
    		transform: translate(-50%,-50%) rotate(0deg);
    	}
    	to{
    		transform: translate(-50%,-50%) rotate(360deg);
    	}
    }
    .box::after{
    	content: '';
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    	background-color: #000000;
    	 400px;
    	height: 400px;
    	border-radius: 50%;
    	z-index: 20;
    	
    }
    
  • 相关阅读:
    python面向对象-3类的静态方法和类方法
    python面向对象-2深入类的属性
    python面向对象-1方法、构造函数
    python小练习--函数调用函数,让对象具有能动性
    python小练习--属性
    python面向对象开发的自我理解
    python入门前的准备
    python类的继承-1
    有关孔隙比的基本概念和计算公式
    一维固结试验过程
  • 原文地址:https://www.cnblogs.com/HelloBytes/p/13095417.html
Copyright © 2011-2022 走看看