分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

css实现心形图案

发布时间:2023-09-06 02:06责任编辑:胡小海关键词:暂无标签

用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实现心形图案

原文地址:https://www.cnblogs.com/renbo/p/9384636.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved