css实现心形图案
用1个标签实现心形图案,show you the code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
margin-top: 50px;
text-align: center;
}
:root {
--heart-color:pink;
}
.heart{
display: inline-block;
position: relative;
width: 60px;
height: 60px;
background-color: var(--heart-color,red);
transform: rotate(-45deg)
}
.heart::before,
.heart::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--heart-color,red);;
}
.heart::before{
top: -50%;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<i class="heart"></i>
</div>
</body>
</html>
有木有觉得css很好玩,let's do something interesting!
css实现心形图案的更多相关文章
- 【C语言】用C语言输出“心形”图案
在你们的世界里,是不是觉得程序猿一点浪漫都不懂?其实不是的,程序猿的世界也是很浪漫滴! 傻瓜版 int main() { printf("❤"); ; } 高级版 //版本一:单个 ...
- CSS实现心形、六角星、六边形、平行四边形等几何
本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...
- Python 一行代码输出心形图案
Python3 >>> print('\n'.join([''.join([('Love'[(x-y)%4]if((x*0.05)**2+(y*0.1)**2-1)**3-(x*0. ...
- [Micropython]TPYBoard v10x拼插编程实验 点亮心形点阵
一.什么是TPYBoard开发板 TPYBoard是以遵照MIT许可的MicroPython为基础,由TurnipSmart公司制作的一款MicroPython开发板,它基于STM32F405单片机, ...
- CorelDRAW快速制作绚丽的彩色透明心形
今天小编分享给小伙伴们用CorelDRAW打造绚丽的彩色透明心形.主要使用完美形状组中的心形造型制作出心形图案,经过对图形的模糊操作,再经过图框精确剪裁,最后添加一个彩虹渐变色实现绚丽的彩色透明效果. ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)
今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...
- CSS3制作心形头像
1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...
- css3实现三角形,聊天背景气泡,心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
随机推荐
- matplotlib-曲线和折线案例
matplotlib-曲线和折线案例 import matplotlib.pyplot as plt import numpy as np x = np.linspace(-5, 5, 100) pr ...
- java-mybaits-00201-DAO-SqlSession使用范围
1.SqlSession的使用范围 SqlSession中封装了对数据库的操作,如:查询.插入.更新.删除等. 通过SqlSessionFactory创建SqlSession,而SqlSessionF ...
- nodejs通过代理(proxy)发送http请求(request)
有可能有这样的需求,需要node作为web服务器通过另外一台http/https代理服务器发http或者https请求,废话不多说直接上代码大家都懂的: var http = require('htt ...
- python之threading.local
简述: threading.local是全局变量但是它的值却在当前调用它的线程当中 作用: 在threading module中,有一个非常特别的类local.一旦在主线程实例化了一个local,它会 ...
- Flask系列(二)Flask基础
知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref(django),werkzeug(flask),uwsgi(上线) 2.实例化Flask对象,里面是有参数的 app = F ...
- Mybatis 创建Configuration对象
Mybatis 创建Configuration对象是在项目启动时就创建了. 具体创建流程为: https://blog.csdn.net/wolfcode_cn/article/details/80 ...
- spark mllib和ml类里面的区别
mllib是老的api,里面的模型都是基于RDD的,模型使用的时候api也是有变化的(model这里是naiveBayes), (1:在模型训练的时候是naiveBayes.run(data: RDD ...
- oracle 保留小数位
方法一:使用to_char的fm格式 to_char(round(data.amount,2),'FM9999999999999999.00') as amount 不足之处是,如果数值是0的话,会显 ...
- html5 七巧板
<!DOCTYPE html><html> <canvas id="diag" height="200" width=&qu ...
- Linux 安装配置 Nginx
前言 准备用flask做一个自己的博客网站,打算用Nginx来部署,所以在阿里云的服务器上安装Nginx,参考了很多教程,现在将步骤以及自己遇到的坑写下来,希望能对别人有所帮助. 我用的服务器是阿里云 ...