css

body {

    background:#333333;

}

.login-card {

    text-align:center;

    width:430px;

    height:430px;

    margin:auto;

    margin-top:15vh;

    padding:30px 20px;

    border:none;

    border-radius:10px;

    background-color:hsla(0,0%,100%,.1);

    box-shadow:inset 0 0 15px 0 #fff;

}

}

html代码

<div class="login-card"></div>

css 透明气泡效果的更多相关文章

  1. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  2. css实现聊天气泡效果

      --------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...

  3. CSS三角形/气泡的实现原理及应用

    记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂

  4. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  5. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  6. CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...

  7. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  8. HTML5实现微信聊天气泡效果

    最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...

  9. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  10. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. MRBS(Meeting Room Booking System)开源的会议室预订系统搭建使用

    前一家公司所有的办公系统都是自己开发的,包括排班.工单.会议室预定等等,很方便. 目前所在的公司,每周部门例会找行政预订了会议室,但多次去都被人占了,很烦,于是网上找了一个评价不错的系统,python ...

  2. 图像验证码识别，字母数字汉子均可cnn+lstm+ctc

    图形验证码如下: 训练两轮时的准确率:上边显示的是未识别的  config_demo.yaml System: GpuMemoryFraction: 0.7 TrainSetPath: 'train/ ...

  3. SQL SERVER 数据库性能优化与管理从零基础到走两步系列（一）——性能计数器

    前辈大佬资料: 使用性能监视器找出SQLServer硬件瓶颈 在网络上苦苦流浪了近十几个小时,从百度到谷歌,从CSDN到博客园,从知乎到微信读书,看了无数本滥竽充数的书,读了无数篇夹生的技术文章,快下 ...

  4. 【NOIP2013模拟联考8】匹配(match) 题解

    B 组都说看不懂--我也解释不清啊--只能写这么详细了 其实就是道板题 省流:f[i][s][j]表示字符串长度i,匹配情况s,ac自动机节点j Problem Description 给定k个字符串 ...

  5. 使用Docker搭建MongoDB 5.0版本副本集集群

    1.mongodb集群 首先我们需要了解mongodb的集群模式,mongodb安装分为单机安装和集群安装.集群安装分为:主从复制(Master-Slaver)集群.副本集(Replica Set)集 ...

  6. EasyNLP玩转文本摘要（新闻标题）生成

    简介: 本⽂将提供关于PEGASUS的技术解读,以及如何在EasyNLP框架中使⽤与PEGASUS相关的文本摘要(新闻标题)生成模型. 作者:王明.黄俊 导读 文本生成是自然语言处理领域的一个重要研究 ...

  7. 一个 Blink 小白的成长之路

    写在前面 写过blink sql的同学应该都有体会,明明写的时候就很顺滑,小手一抖,洋洋洒洒三百行代码,一气呵成.结果跑的时候,吞吐量就是上不去.导致数据延迟高,消息严重积压,被业务方疯狂吐槽.这时候 ...

  8. Flink SQL 1.11 on Zeppelin 平台化实践

    简介: 鉴于有很多企业都无法配备专门的团队来解决 Flink SQL 平台化的问题,那么到底有没有一个开源的.开箱即用的.功能相对完善的组件呢?答案就是本文的主角--Apache Zeppelin. ...

  9. OpenKruise v0.8.0 核心能力解读：管理 Sidecar 容器的利器

    简介: OpenKruise 是阿里云开源的云原生应用自动化管理套件,也是当前托管在 Cloud Native Computing Foundation (CNCF) 下的 Sandbox 项目.它来 ...

  10. HttpClient配置SSL绕过https证书以及双向认证

    HttpClient简介 1.HTTP 协议是 Internet 上使用得最多.最重要的协议之一,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java ...