<!DOCTYPE html>
<html lang="en">

<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<title>Document</title>
<style>
.ripple {
position: relative;
overflow: hidden;
}
.ripple:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform .3s, opacity .5s;
}
.ripple:active:after {
transform: scale(0, 0);
opacity: .3;
transition: 0s;
}
</style>
</head>

<body>
<div class="container text-center">
<button class="btn btn-default ripple btn-lg">Button</button>
<button class="btn btn-default ripple btn-lg">Button with very long content</button>
</div>

</body>

</html>

css 点击样式，水波纹（记录备用）的更多相关文章

  1. Android点击Button水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,例如以下图: 接下来要介绍的就是怎样实现上述图中的波纹效果.这样的效果假设大家没有体验过的话,能够看看百度手机卫士或者360手机卫士,里面的按钮点击效果 ...

  2. css 滚动视差 之 水波纹效果

    核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...

  3. Android5.0以上的项目都会有的按钮点击特效--水波纹

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  4. Web前端-按钮点击效果(水波纹)

    这种效果可以由元素内嵌套canves实现,也可以由css3实现. Canves实现 网上摘了一份canves实现的代码,略微去掉了些重复定义的样式并且给出js注释,代码如下 第一种方法: html骨架 ...

  5. Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单

    Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推 ...

  6. Android之水波纹点击效果(RippleView)

    Android5.0后各种炫的效果纷纷出来,写这篇博客主要是讲的是按钮点击效果带有的水波纹(波浪式). 当然我写的这个是自定义来实现的,在低版本(5.0一下)也可以实现点击效果.看看效果图: 上图可看 ...

  7. Android 水波纹点击效果(Ripple Effect)

    上周Android发布了Android M的Preview版本.但想必Android5.0很多炫酷效果,多数开发者还没有使用过,那更不要说广大用户了. 本文介绍的是Android5.0中其中一个炫酷的 ...

  8. html隐写术，使用摩尔兹电码/莫尔兹电码存储信息 水波纹样式 Morse code

    html水波纹样式,源码直接下载,代码有注释教程,小白可以看懂. 动画啥的都做好了,效果我觉得还不错 网上文章看到xbox 工程师使用隐写术,在界面的右下角放上了含有用户激活码的水波纹样式,一般人还真 ...

  9. android: Android水波纹点击效果

    Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...

随机推荐

  1. Android studio: Android Studio 3.5格式化布局代码时错乱

    Android studio 又来搞事情了,更新到3.5版本后,格式化布局文件代码时,布局文件代码竟然会发生变化,意思是不让格式化代码了呗? 垃圾的IDE. 解决办法: “File”-"Se ...

  2. 小D课堂 - 零基础入门SpringBoot2.X到实战_第10节 SpringBoot整合定时任务和异步任务处理_41、SpringBoot定时任务schedule讲解

    笔记 1.SpringBoot定时任务schedule讲解     简介:讲解什么是定时任务和常见定时任务区别 1.常见定时任务 Java自带的java.util.Timer类            ...

  3. PHP过狗webshell编写过程

    0x1 先上图: 0x2 编写过程 这里必须强调一下我内心的感觉,小阔爱前两天也研究了过狗的一句话了,然后我突然觉得大家都在进步,我研究点啥呢?不如也试试以前因为觉得自己不懂代码,而不会研究的免杀sh ...

  4. axios请求数据完整

    <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> 首页组件 <button @clic ...

  5. UniPush使用指南

    原贴:https://ask.dcloud.net.cn/article/35622 UniPush使用指南 分类:uni-app Push unipush 从HBuilderX 1.7.2起,uni ...

  6. 【Dart学习】--Dart之数组(List)的相关方法总结

    一,初始化List 非固定长度list var testList = List(); print(testList.length);//输出0 固定长度List var testList2 = Lis ...

  7. SQLite带参数处理方法

    /// <summary> /// 执行语法[新增 修改 删除] /// </summary> /// <param name="sqlText"&g ...

  8. 了解有后门的sshd服务是如何劫持密码的

    在服务器上安装一个打了后门补丁的sshd服务,当用户连接时,直接把密码记录下来,然后使用脚本发送到邮箱中. (1).实验环境 使用CentOS6.2作为系统环境,查看sshd和gcc的版本 [root ...

  9. PAT 甲级 1068 Find More Coins (30 分) (dp，01背包问题记录最佳选择方案)***

    1068 Find More Coins (30 分)   Eva loves to collect coins from all over the universe, including some ...

  10. 增强篇6 CMOD增强删除

    CMOD实施了一个增强,但是不需要了,怎么删除呢? 要删除PPCO0005 这个增强,进入编辑状态,发现没有删除按钮,  把PPCO0005 这项删除掉 敲回车,厉害了,他又回来了,所以在这里是没法删 ...