纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标

CSS写水滴特效，里面可加图标

代码如下（示例）：
HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="drop.css"></head>
<body><div class="drop"><ion-icon></ion-icon></div>//里面可以自己加icon</body>
</html>

CSS部分

* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;min-width: 100vw;background: #eee;
}.drop {position: relative;width: 150px;height: 150px;box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .05),15px 25px 10px rgba(255, 255, 255, .05),15px 20px 20px rgba(0, 0, 0, .05),inset -10px -10px 15px rgba(255, 255, 255, .9);border-radius: 50%;display: flex;justify-content: center;align-items: center;
}.drop::before {content: '';position: absolute;top: 35px;left: 25px;width: 20px;height: 20px;border-radius: 50%;background: #fff;
}.drop::after {content: '';position: absolute;top: 25px;left: 50px;width: 10px;height: 10px;border-radius: 50%;background: #fff;
}

纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标相关推荐

基于JavaScript+css写一个简单的h5动态下雨效果
基于JavaScript+css写一个简单的h5动态下雨效果文章目录什么是前端展示效果 JavaScript是什么? 步骤 1.html 2.css 3.js 什么是前端前端它是一个工作,它的 ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
用HTML和css写一个简单地购物小票
效果图 HTML代码 <!DOCTYPE html> <html><head><meta charset="utf-8" />< ...
教你用 css 写一个拟物化图标
拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行.相当长一段时间,无论系统.网页还是第三方应用都争相使用拟物化的设计风格.那时候的dribbble网,各色优秀的拟物化设计作品也 ...
python123程序设计题说句心里话_用c++写一个简单的计算器程序
// 050305.cpp : 定义控制台应用程序的入口点. // // 050304.cpp : 定义控制台应用程序的入口点. // //四则运算 #include "stdafx.h&q ...
写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
JS写一个简单的五星评价
JS写一个简单的五星评价在做前端网页页面的时候很多时候回有遇到星级评价的模块,用到的地方挺多所以自己就上传下方便大家和自己使用(不支持半星评价因为没有半星的图). 效果图如下: 下面是我们的代码: ...

纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标

CSS写水滴特效，里面可加图标

纯HTML、CSS写一个简单的水滴特效，水滴里面可加图标相关推荐

最新文章

热门文章