富豪刑警富豪刑警修斯库界面效果实现

前端时间富豪刑警看完了就像做个其中的ai 修斯库但是实力不够啊
只能先整个类似的页面效果玩玩了

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;height: 300px;border: 1px solid red;margin-top: 49px;margin-left: 40px;display: flex;justify-content: center;align-items: center;background-color: #ECEAE4;}.yuan{background-color: #43E7D3;width: 200px;height:200px;display: flex;align-items: center;justify-content: center;border-radius: 50%;position: relative;}.yuan .left{height:50%;width: 5%;background-color: #FFFFFF;left: 20%;top: 25%;}@keyframes  mylinleft{25%{height: 20%;}50%{height:calc(50% - 40px);transform: translateY(10px);}75%{height:5%;}100%{height:40%;transform: translateY(-10px);}}@keyframes  mylinright{25%{height: 30%;}50%{height:calc(40% - 40px);transform: translateY(-10px);}75%{height:10%;}100%{height:30%;}}@keyframes  mylin1{25%{height: 75%;}50%{height:50%;}75%{height:25%;}100%{height: 80%;}}@keyframes  mylin3{25%{height: 80%;}50%{height:50%;}75%{height:85%;}100%{height: 30%;}}.yuan .left{animation: mylinleft 1s infinite linear;}.yuan .right{animation: mylinright 1s infinite linear;}.yuan .right{height:50%;width: 5%;background-color: #FFFFFF;}.yuan .center{width: 40%;height: 50%;margin: 0 5%;display: flex;flex-direction: column;justify-content: space-between;}.yuan .center .item{height: 45%;position:relative;}.yuan .center .item>div{position: absolute;}.lin1{width:calc( 13% - 0.4px);height: 100%;background-color: #FFFFFF;left: 0;bottom: 0px;animation: mylin1 1s infinite linear;}.lin2{width: 100%;height:calc(20% + 1px);background-color: #FFFFFF;bottom: 0;}.lin3{width:calc( 13% - 0.4px);height: 100%;background-color: #FFFFFF;right: 0;bottom: 0px;animation: mylin3 1s infinite linear;}.item2{transform: rotateZ(180deg);}</style>
</head>
<body><div class="wrap"><div class="yuan"><div class="left"></div><div class="center"><div class="item item1"><div class="lin1"></div><div class="lin2"></div><div class="lin3"></div></div><div class="item item2"><div class="lin1"></div><div class="lin2"></div><div class="lin3"></div></div></div><div class="right"></div></div></div>
</body>
</html>在这里插入代码片

富豪刑警富豪刑警修斯库界面效果实现相关推荐

普罗米修斯监控linux,Prometheus（普罗米修斯）搭建监控
Prometheus(普罗米修斯) 实验环境:(各个主机,ip,所需服务) docker01 docker02 docker03 1.10 1.20 1.30 NodeEXporter NodeEXp ...
搭建普罗米修斯Prometheus监控系统
一.普罗米修斯监控概述 1.什么是普罗米修斯监控 Prometheus(由go语言(golang)开发)是一套开源的监控&报警&时间序列数据库的组合.适合监控docker容器.因为K8 ...
普罗米修斯监控docker 服务
环境 192.168.254.127 (监控服务器) 192.168.254.128 (被监控机器) 首先在监控服务器安装: 1.安装Node Exporter 来收集硬件信息所有节点运行以下命令安 ...
Prometheus（普罗米修斯）
Prometheus(普罗米修斯) 是一个系统和服务的监控平台.它可以自定义时间间隔从已配置的目标收集指标,评估规则表达式,显示结果,并在发现某些情况时触发警报与其他监视系统相比,Prometheu ...
机器学习朴素贝叶斯算法+tkinter库界面实现好瓜坏西瓜分类
机器学习朴素贝叶斯算法+tkinter库界面实现好瓜坏西瓜分类一.界面实现 from tkinter import * from tkinter import ttk import NBdef ma ...
普罗米修斯Prometheus+Grafana，监控搭建与界面基础配置
一.Prometheus 简介 gitlab官方地址:https://github.com/prometheus/prometheus Prometheus(普罗米修斯)是一套开源的监控&报警 ...
福布斯发布2019年度全球亿万富豪榜：贝佐斯蝉联首富马化腾马云上榜
[TechWeb]3月6日消息,据国外媒体报道,著名财经网站<福布斯>当地时间周二公布了2019年度的全球亿万富豪榜,亚马逊创始人贝佐斯蝉联榜首,国内包括马化腾.马云在内的一众富豪也均上榜 ...
普罗米修斯java_springboot集成普罗米修斯(Prometheus)的方法
Prometheus 是一套开源的系统监控报警框架.它由工作在 SoundCloud 的员工创建,并在 2015 年正式发布的开源项目.2016 年,Prometheus 正式加入 Cloud Na ...
springboot 接口404_资深架构带你学习Springboot集成普罗米修斯
这篇文章主要介绍了springboot集成普罗米修斯(Prometheus)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 ...

富豪刑警富豪刑警修斯库界面效果实现

富豪刑警富豪刑警修斯库界面效果实现相关推荐

最新文章

热门文章

富豪刑警 富豪刑警修斯库界面效果实现

富豪刑警 富豪刑警修斯库界面效果实现相关推荐

最新文章

热门文章

富豪刑警富豪刑警修斯库界面效果实现

富豪刑警富豪刑警修斯库界面效果实现相关推荐