CSS

语言:

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Raleway:300,700,900");

body {

background: #5444c4;

color: #FFF;

margin: 0;

font-family: 'Raleway', sans-serif;

text-align: center;

letter-spacing: 0.08em;

}

b {

font-size: 28px;

color: #FFF;

}

.container {

width: 300px;

height: 500px;

margin: 15px auto;

background: #6cd2ff;

overflow: hidden;

position: relative;

box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);

}

.text {

position: absolute;

left: 50%;

top: 45%;

transform: translate(-50%, -50%);

text-align: center;

color: #6cd2ff;

font-size: 64px;

font-weight: 900;

}

.liquid {

width: 120%;

height: 10px;

position: absolute;

top: -2%;

left: -10%;

background: #FFF;

border-radius: 10%;

animation: liquid 5s infinite;

}

.blobs {

filter: url("#goo");

width: 100%;

height: 100%;

position: relative;

}

.blobs .blob {

width: 30px;

height: 30px;

margin: 0 5px 0px 0;

background: #FFF;

border-radius: 50%;

position: absolute;

top: 0;

animation: drip_one 5s infinite;

}

.blobs .blob:nth-child(1) {

left: -14%;

}

.blobs .blob:nth-child(2) {

left: -1%;

}

.blobs .blob:nth-child(3) {

left: 12%;

}

.blobs .blob:nth-child(4) {

left: 25%;

}

.blobs .blob:nth-child(5) {

left: 38%;

}

.blobs .blob:nth-child(6) {

left: 51%;

}

.blobs .blob:nth-child(7) {

left: 64%;

}

.blobs .blob:nth-child(8) {

left: 77%;

}

.blobs .blob:nth-child(9) {

left: 90%;

}

.blobs .blob:nth-of-type(4n-7) {

width: 65px;

animation: drip_four 5s infinite;

}

.blobs .blob:nth-of-type(3n-2) {

width: 26px;

}

.blobs .blob:nth-of-type(2) {

width: 22px;

}

.blobs .blob:nth-of-type(8) {

animation: drip_five 5s infinite;

}

.blobs .blob:nth-of-type(4n+2) {

height: 56px;

animation: drip_two 5s infinite;

}

.blobs .blob:nth-of-type(6n-2) {

height: 42px;

animation: drip_three 5s infinite;

}

@keyframes drip_one {

from {

top: 0;

}

to {

top: 103%;

}

}

@keyframes drip_two {

from {

top: 0;

}

to {

top: 104%;

}

}

@keyframes drip_three {

from {

top: 0;

height: 52px;

}

to {

top: 102%;

height: 132px;

}

}

@keyframes drip_four {

from {

top: 0;

width: 65px;

height: 30px;

}

to {

top: 102%;

width: 75px;

height: 45px;

}

}

@keyframes drip_five {

from {

top: 0;

height: 30px;

}

to {

top: 102%;

height: 72px;

}

}

@keyframes liquid {

from {

height: 15px;

}

to {

height: 109%;

}

}

html5液体效果,HTML5/CSS3/SVG实现的液体掉落(滑落)动画相关推荐

  1. html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】

    html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...

  2. html5云朵效果,纯CSS3打造逼真的多层云彩动画特效

    这是一款效果非常炫酷的纯CSS3逼真的多层云彩动画特效.该特效使用多张透明的云彩PNG图片作为背景图片,使用CSS animation动画来制作云彩水平飘动的动画效果. 使用方法 HTML结构 该多层 ...

  3. html5 抽奖效果,html5+css3实现抽奖活动的效果

    看过我博客的知道,前几天我发过一个通过form表单来实现和用户交互效果,上次是通关过table实现用户注册页面,那么今天我们也是通过table的表单效果来画出抽奖的页面,通过css3和javascri ...

  4. html5 翻牌效果,HTML5实现移动端点击翻牌功能

    效果 一个大小的两个面,在同一位置上 正面的Y轴旋转为0度 背面的Y轴旋转180度 隐藏被旋转的 div 元素的背面(backface-visibility) 点击的时候同时改变正面和背面的旋转角度, ...

  5. html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效

    特效描述:图表插件 炫光的动画 分布地图动画 动画特效.html5地图动画,html5 echarts图表插件 代码结构 1. 引入JS 2. HTML代码  ECharts $('#documen ...

  6. html5波浪效果,html5 canvas粒子波浪动画特效

    特效描述:html5 canvas 粒子波浪动画特效.html5基于canvas绘制波涛汹涌的粒子波浪动画. 代码结构 1. HTML代码 'use strict'; var FastRandom = ...

  7. html5 雨滴效果,html5 canvas下雨滴掉落动画特效

    特效描述:html5 canvas 雨滴掉落动画 动画特效.html5 canvas绘制下雨场景动画.雨滴动画. 代码结构 1. 引入JS 2. HTML代码 // TO DO // Remove r ...

  8. html5 vr效果,HTML5 Three.js 虚拟现实小实验(VR Experiment)

    HTML 导入代码模板: /*! Reticulum - v1.0.12 - 2015-08-17 * https://gqpbj.github.io/examples/basic.html * * ...

  9. html5悬浮效果,html5悬浮球效果

    1 .SuspendedBall{ 2 position:fixed; 3 width:50px; 4 height:50px; 5 background:#3071a9; 6 border-radi ...

最新文章

  1. C语言中sizeof与strlen区别
  2. Asp.net操作数据库方法
  3. 成本计算引擎动态规则解析技术详解
  4. LoadRunner脚本增强技巧之检查点
  5. 腾讯云-搭建 JAVA 开发环境
  6. java window.onload_JavaScript window.onload
  7. Android ADT Templates Android常用模版
  8. 小D课堂 - 新版本微服务springcloud+Docker教程_5-05熔断降级服务异常报警通知
  9. 精准定位直播爆品、快速打造爆款上热门,视频号工具人手必备!
  10. 俄勒冈之旅_俄勒冈州波特兰市严格禁止面部识别技术
  11. Python小白的数学建模课-21.关键路径法
  12. 小米的智能家居全套下来需要多少钱?
  13. PowerPoint 2010去掉了宏录制器
  14. Python爬虫4.2 — ajax(动态网页数据抓取)用法教程
  15. 学计算机i5九代,九代i5和九代i7区别
  16. 20个月积累10,000+客户诸葛io放行业“连弩”
  17. 远程桌面连接接入路由器的电脑(Windows10)
  18. 查看HDFS文件系统数据的三种方法
  19. 平行世界真的存在吗?镜像宇宙的三个科学奥秘
  20. 在以TCP为连接方式的服务器中,为什么在服务端设计当中需要考虑心跳?

热门文章

  1. 安卓机+数据线,带你开发部署人脸识别应用
  2. 诽谤、窃密、禁令、和解:文远知行创始团队纠纷暂时完结
  3. iPhone11 全线降价;哈啰出行否认大量裁员;LineageOS 17.1 发布| 极客头条
  4. 2.7 亿学生宅家上课,家长有意见了......
  5. 苹果官网以旧换新价格暴跌;戴威退出 ofo 法人代表及高管;TensorFlow 2.1.0 发布| 极客头条...
  6. 程序员生存指南:如何在技术浪潮中屹立不倒?
  7. 腾讯云刘颖:与微信共建小程序开发者生态,让小程序开发更简单
  8. 苹果 Siri 被曝涉嫌泄露用户隐私;中国联通回应 5G 入网问题;PHP 7.4 beta 1 发布 | 极客头条...
  9. 量子计算时代到来,摩尔定律将要失效?
  10. Google 杀死 URL 的第一步