zoukankan      html  css  js  c++  java
  • 前端水波纹往外展开4

    来自:https://blog.csdn.net/qq_38658877/article/details/78092649 侵删
    <!
    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"> <title>Document</title> <style type="text/css"> .example { position: relative; margin: 150px auto; width: 50px; height: 50px; } .dot:before { content: ' '; position: absolute; z-index: 2; left: 0; top: 0; width: 10px; height: 10px; background-color: #ff4200; border-radius: 50%; } .dot:after { content: ' '; position: absolute; z-index: 1; width: 10px; height: 10px; background-color: #ff4200; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset; -webkit-animation: waveCircle 1s ease infinite normal; /*-webkit-animation-name: ripple; -webkit-animation-duration: 1s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal;*/ } @keyframes waveCircle { 0% { left: 5px; top: 5px; width: 0; height: 0; } 100% { left: -20px; top: -20px; opacity: 0; width: 50px; height: 50px; } } </style> </head> <body> <div class="example"> <div class="dot"></div> </div> </body> </html>
  • 相关阅读:
    纯真IP数据库格式详解
    iframe框架详解
    搜刮的网址
    Drupal设置首页默认内容
    PHP开发之路之一WAMP的安装和配置
    PHP中json序列化后中文的编码显示问题
    Mysql转化blob为可读
    使用Xtrabackup来备份你的mysql
    MySQL压力测试工具mysqlslap的使用
    Cacti 监控 MySQL
  • 原文地址:https://www.cnblogs.com/Byme/p/10471527.html
Copyright © 2011-2022 走看看