[求助] 急需 css样式画心形图案

yun_feiyang 2015-02-10 09:16:54

现有一个css样式画的心形图案,无耐改了半天最终效果不理想,改大后比例不对,不像心形了,小弟在此谢过了
最好css 样式有注释,越详细越好.

现急需改成大的心形图案(1000*700)



<!DOCTYPE html 

<html >

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>Document</title>

<style>

.center {

		margin: 0 auto;

		padding-top: 9px;

		width: 500px;

		text-align: center;

}



.heart {

	position: relative;

	width: 100px;

	height: 90px;

	display: inline-block;

}

.heart:before,

.heart:after {

	position: absolute;

	content: "";

	left: 50px;

	top: 6px;

	width: 50px;

	height: 80px;

	background: red;

	-moz-border-radius: 50px 50px 0 0;

	border-radius: 50px 50px 0 0;

	-webkit-transform: rotate(-45deg);

	   -moz-transform: rotate(-45deg);

		-ms-transform: rotate(-45deg);

		 -o-transform: rotate(-45deg);

			transform: rotate(-45deg);

	-webkit-transform-origin: 0 100%;

	   -moz-transform-origin: 0 100%;

		-ms-transform-origin: 0 100%;

		 -o-transform-origin: 0 100%;

			transform-origin: 0 100%;

	background: #450000;

		

}

.heart:after {

	left: 0;

	-webkit-transform: rotate(45deg);

	   -moz-transform: rotate(45deg);

		-ms-transform: rotate(45deg);

		 -o-transform: rotate(45deg);

			transform: rotate(45deg);

	-webkit-transform-origin: 100% 100%;

	   -moz-transform-origin: 100% 100%;

		-ms-transform-origin: 100% 100%;

		 -o-transform-origin: 100% 100%;

			transform-origin :100% 100%;

	box-shadow: 5px 0px 15px #573636;

}

.heart:before {

   box-shadow: 5px 0px 5px #746161;

}

.font{

	position: absolute;

	top: 8px;

	left: 38%;

	z-index: 56;

	color: #FFF;

	font-size: 50px;

	text-shadow: 2px 4px 3px #F00;

}

</style>

</head>

<body>

	<div class="center">

		<div class="heart"><div class="font">l</div></div>

	</div>

</body>

</html>

...全文

175 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

slwsss 2015-02-10

打赏
举报

改下数值

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
.center {
        margin: 0 auto;
        padding-top: 9px;
        width: 500px;
        text-align: center;
}
 
.heart {
    position: relative;
    width: 500px;
    height: 450px;
    display: inline-block;
}
.heart:before,
.heart:after {
    position: absolute;
    content: "";
    left: 250px;
    top: 30px;
    width: 250px;
    height: 400px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 250px 250px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
    background: #450000;
         
}
.heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
    box-shadow: 5px 0px 15px #573636;
}
.heart:before {
   box-shadow: 5px 0px 5px #746161;
}
.font{
    position: absolute;
    top: 40px;
    left: 38%;
    z-index: 56;
    color: #FFF;
    font-size: 250px;
    text-shadow: 2px 4px 3px #F00;
}
</style>
</head>
<body>
    <div class="center">
        <div class="heart"><div class="font">l</div></div>
    </div>
</body>
</html>

彻底解决CAD图纸文字变问号、文字变乱码，以及其他所有字体缺失带来的烦恼

内容概要：本文围绕可变桨叶四旋翼无人机的规范控制与点对点运动模拟展开，重点研究优化推力分配策略在翻转动作中的应用与性能比较。通过Matlab代码实现，构建了四旋翼动力学模型，并设计了多种控制算法以实现精确的姿态调整与轨迹跟踪。研究对比了不同推力分配方案在执行高机动性翻转动作时的稳定性、能耗效率与响应速度，旨在提升无人机在复杂飞行任务中的动态性能与控制精度。该仿真研究为无人机飞控系统的设计与优化提供了理论依据和技术支持。; 适合人群：具备一定自动控制理论基础和Matlab编程能力，从事无人机控制、飞行器动力学或机器人系统研究的科研人员及研究生。; 使用场景及目标：① 实现四旋翼无人机在三维空间中的精确点对点运动控制；② 对比分析不同推力分配策略在执行翻转等高难度动作时的控制效果与能耗表现，优化飞行性能；③ 为无人机自主飞行、特技飞行及复杂环境下的机动控制提供算法验证平台。; 阅读建议：此资源以Matlab仿真为核心，建议读者结合相关控制理论知识，深入理解代码实现细节，重点关注动力学建模、控制律设计与推力分配模块。在学习过程中，应动手调试参数，复现文中翻转动作的仿真结果，并尝试拓展至其他复杂飞行任务，以加深对无人机控制机理的理解。

易语言源码易语言access数据库操作

内容概要：本文档是一份关于C++语言中while循环的专项测试卷，包含20道单项选择题和10道判断题，题目来源于GESP和CSP-J等权威编程等级考试真题。内容涵盖while循环的基本语法、执行逻辑、条件判断、循环控制、常见死循环原因及与其他循环结构的区别，重点考察循环条件的真假判断、循环体执行次数、变量变化过程以及相关逻辑推理能力。附带完整答案解析，有助于巩固C++循环基础知识。; 适合人群：准备参加GESP或CSP-J等青少年编程等级考试的学生，具备初步C++编程基础的学习者（如中小学阶段初学者）；适用于学习流程控制结构中的循环知识点。; 使用场景及目标：①用于检测对while循环掌握程度，查漏补缺；②辅助教师进行教学测评或学生自我练习；③帮助理解循环执行顺序、条件表达式含义及避免死循环等核心概念；阅读建议：建议在完成每道题目后对照答案认真分析错误原因，结合代码调试加深理解；尤其注意条件赋值与比较的区别（如k=0）、逻辑非运算的应用及循环变量更新机制。

卓海海洋生态平台.pptx