css+svg实现一个火热的太阳放大查看烈焰效果代码-html代码-BFW代码库

css+svg实现一个火热的太阳放大查看烈焰效果代码

代码语言：html

代码描述：css+svg实现一个火热的太阳放大查看烈焰效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        body{margin:0 auto;}
        svg{position:absolute;}
    </style>



    <style>
        svg{
        	border-radius:50%;
        }
        .body{
        	position:absolute;
        	z-index:-1;
        	height:100%;
        	width:100%;
        	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='space'%3E%3CfeTurbulence baseFrequency='0.1'%3E%3C/feTurbulence%3E%3CfeColorMatrix values='0.3 -4.8 2.6 -5 -1.5 0.5 3.1 -4.2 1 -4 3.7 -2.4 -0.3 -4 -3.7 -4.4 3.9 -4.9 -0.6 4.7'%3E%3C/feColorMatrix%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23fff'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' filter='url(%23space)'%3E%3C/rect%3E%3C/svg%3E");
        }
        .planet{
        	height:100px;
        	width:100px;
        	box-shadow:0 0 50px rgba(255,255,255,0.9);
        	position:absolute;
        	top:50%;
        	left:50%;
        	transform:translate(-50%,-50%);
        	border-radius:50%;
        	transition:300ms;
        }
        .planet:before{
        	content:'';
        	position:absolute;
        	top:50%;
.........完整代码请登录后点击上方下载按钮下载查看