css+div实现爬虫人的眼睛眨眼动画效果代码-html代码-BFW代码库

css+div实现爬虫人的眼睛眨眼动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现爬虫人的眼睛眨眼动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
        	--c0: #000000;
        	--c1: #8bc34a;
        }
        	
        body {
            background: 
        		radial-gradient(circle at 50% 50%, #fff0 35vmin, #140000cc 50vmin 100%), 
        		radial-gradient(circle at calc(50% + 2.5vmin) calc(50% - 2.5vmin), var(--c1) 1vmin, #fff0 calc(1vmin + 1px)),
        		radial-gradient(circle at 50% 50%, var(--c0) 0 5vmin, var(--c1) calc(5vmin + 1px) 6.25vmin, var(--c0) calc(6.25vmin + 1px) 7vmin, var(--c1) calc(7vmin + 1px) 7.75vmin, var(--c0) calc(7.75vmin + 1px) 8.5vmin, var(--c1) calc(8.5vmin + 1px) 9.25vmin, var(--c0) calc(9.25vmin + 1px) 10vmin, var(--c1) calc(10vmin + 1px) 10.75vmin, var(--c0) calc(10.75vmin + 1px) 11.5vmin, var(--c1) calc(11.5vmin + 1px) 12.25vmin, var(--c0) calc(12.25vmin + 1px) 13vmin, var(--c1) calc(13vmin + 1px) 13.75vmin, var(--c0) calc(13.75vmin + 1px) 14.5vmin, var(--c1) calc(14.5vmin + 1px) 15.25vmin, var(--c0) calc(15.25vmin + 1px) 16vmin, var(--c1) calc(16vmin + 1px) 16.75vmin, var(--c0) calc(16.75vmin + 1px) 17.5vmin, var(--c1) calc(17.5vmin + 1px) 18vmin, #fff0 calc(18vmin + 1px)),
        		repeating-radial-gradient(circle at 50% 50%, var(--c0) 0 0.75vmin, var(--c1) calc(0.75vmin + 1px) 1.5vmin, var(--c0) calc(1.5vmin + 1px));
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        	box-shadow: 0 0 50vmin 15vmin #160101 inset;
        }
        	
        div {
            height: 50vh;
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: absolute;
            width: 100vw;
        }
        
        .bot {
            top: 50vh;
        }
        
        @property --pos{
          syntax: &#.........完整代码请登录后点击上方下载按钮下载查看