css实现鼠标按钮悬浮边框月球沿轨道运动效果代码-html代码-BFW代码库

css实现鼠标按钮悬浮边框月球沿轨道运动效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标按钮悬浮边框月球沿轨道运动效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        :root {
    	--bg:#3C465C;
    	--primary:#78FFCD;
    	--solid:#fff;
    	--btn-w:10em;
    	--dot-w:calc(var(--btn-w)*.2);
    	--tr-X:calc(var(--btn-w) - var(--dot-w))
    }
    * {
    	box-sizing:border-box
    }
    *:before,*:after {
    	box-sizing:border-box
    }
    body {
    	height:100vh;
    	display:-webkit-box;
    	display:flex;
    	-webkit-box-pack:center;
    	justify-content:center;
    	-webkit-box-align:center;
    	align-items:center;
    	flex-flow:wrap;
    	background:var(--bg);
    	font-size:20px;
    	font-family:'Titillium Web',sans-serif
    }
    h1 {
    	color:var(--solid);
    	font-size:2.5rem;
    	margin-top:6rem
    }
    .btn {
    	position:relative;
    	margin:0 auto;
    	width:var(--btn-w);
    	color:var(--primary);
    	border:.15em solid var(--primary);
    	border-radius:5em;
    	text-transform:uppercase;
    	text-align:center;
    	font-size:1.3em;
    	line-height:2em;
    	cursor:pointer
    }
    .dot {
    	content:'';
    	position:absolute;
    	top:0;
    	width:var(--dot-w);
    	height:100%;
    	border-radius:100%;
    	-webkit-transition:all 300ms ease;
    	transition:all 300ms ease;
    	display:none
    }
    .dot:after {
    	content:'';
    	position:absolute;
    	left:calc(50% - .4em);
    	top:-.4em;
    	height:.8em;
    	width:.8em;
    	background:var(--primary);
    	border-radius:1em;
    	border:.25em solid var(--solid);
    	box-shadow:0 0 .7em var(--solid),0 0 2em var(--primary)
    }
    .btn:hover.........完整代码请登录后点击上方下载按钮下载查看