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. Solon Java 应用开发框架 v2.7.5 发布

    Java Solon 是什么框架? Java "新的"应用开发框架.从零开始构建(非 java-ee 架构),有灵活的接口规范与开放生态. 追求: 更快.更小.更简单 提倡: 克制 ...

  2. 力扣595(MySQL)-大的国家（简单）

    题目: World 表: 如果一个国家满足下述两个条件之一,则认为该国是 大国 : 面积至少为 300 万平方公里(即,3000000 km2),或者人口至少为 2500 万(即 25000000)编 ...

  3. 阿里 Seata 新版本终于解决了 TCC 模式的幂等、悬挂和空回滚问题

    简介: 今天来聊一聊阿里巴巴 Seata 新版本(1.5.1)是怎么解决 TCC 模式下的幂等.悬挂和空回滚问题的. 作者:朱晋君   大家好,我是君哥. 今天来聊一聊阿里巴巴 Seata 新版本(1 ...

  4. 模拟IDC spark读写MaxCompute实践

    简介: 现有湖仓一体架构是以 MaxCompute 为中心读写 Hadoop 集群数据,有些线下 IDC 场景,客户不愿意对公网暴露集群内部信息,需要从 Hadoop 集群发起访问云上的数据.本文以 ...

  5. Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述

    ​简介: 支付宝客户端的动态化技术经历三个阶段:现阶段也就是第三阶段是实体组件+部分光栅化的hybrid模式,Cube 就是该模式下的产物. ​ 如标题所述,笔者将持续更新<Cube 技术解读& ...

  6. dotnet 6 已知问题 获取 CultureInfo.NumberFormat 可能抛出 IndexOutOfRangeException 异常

    本文记录一个 dotnet 6 已知问题,准确来说这是一个在 dotnet 5 引入的问题,到 dotnet 6.0.12 还没修.在获取 CultureInfo.NumberFormat 属性时,在 ...

  7. 2018-8-29-dotnet-core-2.1-使用阶梯编译

    title author date CreateTime categories dotnet core 2.1 使用阶梯编译 lindexi 2018-08-29 08:49:12 +0800 201 ...

  8. 一个随时更新的js库

    1.src同级建commFunction=>timer.js 2.main.js引入 import time from '../commonFunction/time' Vue.prototyp ...

  9. SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息

    SpringBoot实现WebSocket发送接收消息 + Vue实现SocketJs接收发送消息 参考: 1.https://www.mchweb.net/index.php/dev/887.htm ...

  10. XPRA: SAP传输后自动运行程序

    今天了解到一个功能,允许TR导入后自动运行指定程序.比如使用VOFM创建新的例程后,需要运行RV80HGEN来重新生成程序.可以在TR中包含以下对象,则TR导入完成后,会自动运行RV80HGEN. P ...