一、心形

使用transform-origin属性实现设置不同的点为原点

1、改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)

注意:该属性只有在设置了transform属性的时候才起作用;

如果在不设置的情况下,元素的基点默认的是其中心位置。即,在没有使用transform-origin属性的情况下transform的rotate,translate,scale,skew,matrix这些操作都是以自身在中心位置为原点的。

transform-origin的用法

语法:-moz-transform-origin: [ |  | left | center | right ][ |  | top | center | bottom ] 

transform-origin属性值可以是百分比、em、px等具体的值,也可以是top、right、bottom、left和center这样的关键词。

2D的变形中的transform-origin属性可以是一个参数值,也可以是两个参数值。如果是两个参数值时,第一值设置水平方向X轴的位置,第二个值是用来设置垂直方向Y轴的位置。

3D的变形中的transform-origin属性还包括了Z轴的第三个值。其各个值的取值简单说明如下:

  • top = top center = center top  等价于 50% 0
  • right = right center = center right 等价于 100%或(100% 50%)
  • bottom = bottom center = center bottom 等价于 50% 100%
  • left = left center = center left 等价于 0或(0 50%)
  • center = center center 等价于 50%或(50% 50%)
  • top left = left top 等价于 0 0
  • right top = top right 等价于 100% 0
  • bottom right = right bottom 等价于 100% 100%
  • bottom left = left bottom 等价于 0 100%

left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%;

如果只取一个值,表示垂直方向值不变。

使用:before和:after伪元素添加内容;

transform-origin属性在浏览器中的支持度不是特别高,所以要记得加上前缀

定位position:relative和absolute

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.xin{
width:90px;
height:80px;
position:relative;
margin:100px auto;
background-color:#99f;
}
.xin:before{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:#f99;
border-radius: 50px 50px 0 0;
-webkit-transform-origin:0 100% ;
-ms-transform-origin:0 100% ;
-o-transform-origin:0 100% ;
transform-origin:0 100% ;
/*定义原点*/
transform:rotate(-45deg);
left:45px;
}
.xin:after{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:#9f9;
border-radius: 50px 50px 0 0;
-webkit-transform-origin:100% 100% ;
-ms-transform-origin:100% 100% ;
-o-transform-origin:100% 100% ;
transform-origin:100% 100% ;
/*定义原点,设置原点的时候一定要加前缀,浏览器支持*/
transform:rotate(45deg);
right:45px;
}
</style>
</head>
<body>
<div class="xin"></div>
</body>
</html>

二、跳动的心

上面介绍了如何使用CSS画出一个心形,如果想实现跳动的心,只需要加上一个animation动画效果即可

心形周围的阴影采用的是 filter滤镜属性

filter:drop-shadow(0px 0px 20px rgb(255,20,20));

filter属性中的   drop-shadow(h-shadow v-shadow blur spread color)

实现效果:给图像设置一个阴影效果。

阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的 box-shadow属性很相似;

不同之处在于,通过filter滤镜,一些浏览器为了更好的性能会提供硬件加速。

h-shadow 水平方向阴影,负值会使阴影出现在元素左边;

v-shadow 垂直方向的阴影,负值会使阴影出现在元素上方;(h-shadowv-shadow  如果设置值为0之后阴影会出现在元素的正后方)

blur 模糊的距离,值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利)

spread  正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.xin{
width:90px;
height:80px;
position:relative;
margin:100px auto;
/*background-color:#99f;*/
animation: test 1s linear infinite;
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
}
.xin:before{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:red;
border-radius: 200px 200px 0 0;
-webkit-transform-origin:0 100% ;
-ms-transform-origin:0 100% ;
-o-transform-origin:0 100% ;
transform-origin:0 100% ;
/*定义原点*/
transform:rotate(-45deg);
left:45px;
}
.xin:after{
content:" ";
position:absolute;
width:45px;
height:70px;
background-color:red;
border-radius: 200px 200px 0 0;
-webkit-transform-origin:100% 100% ;
-ms-transform-origin:100% 100% ;
-o-transform-origin:100% 100% ;
transform-origin:100% 100% ;
/*定义原点,设置原点的时候一定要加前缀,浏览器支持*/
transform:rotate(45deg);
/*right:45px;*/
}
@keyframes test{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
25%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="xin"></div> </body>
</html>

三、蛋形

border-radius 中使用 / 分别设置边框X轴和Y轴的尺寸

按照顺时针顺序,左上-右上-右下-左下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3</title>
<style>
.egg{
width:126px;
height:180px;
background-color:#fa3;
margin:100px auto;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
</style>
</head>
<body>
<div class="egg"></div>
</body>
</html>

CSS画心形和蛋形的更多相关文章

  1. css画心形、三角形的总结

    .heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...

  2. 基于Css反射形自触发事件,优化你的延时事件

    昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...

  3. C++命令行画心形<转载>

    #include <stdio.h> int main() { for (float y = 1.5f; y > -1.5f; y -= 0.1f) { for (float x = ...

  4. CSS学习笔记一:css 画平面图形

    最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...

  5. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  6. 【Python】画一个心形

    #!/usr/bin/env python # -*- coding:utf-8 -*- import turtle import time # 画心形圆弧 def hart_arc(): for i ...

  7. CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  8. 160419、CSS3实现32种基本图形

    CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...

  9. 创建一个弹出DIV窗口

    创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...

随机推荐

  1. vue启动流程

    继上一篇vue环境的搭建(在D盘新建文件夹vue_cli,把(我已经上传到了文件下)资料下tpls解压完后的所有文件都复制到D盘vue_cli下) 目录如图: 1.webstorm设置为了提高webS ...

  2. 【HANA系列】SAP HANA 2.0简介

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA 2.0简介   ...

  3. Java多线程学习——join方法的使用

    join在线程里面意味着“插队”,哪个线程调用join代表哪个线程插队先执行——但是插谁的队是有讲究了,不是说你可以插到队头去做第一个吃螃蟹的人,而是插到在当前运行线程的前面,比如系统目前运行线程A, ...

  4. Linux 系统安装 python

    Centos 7 Centos 7 安装 python3 (不要卸载python2 因为yum 要用) https://phoenixnap.com/kb/how-to-install-python- ...

  5. .Net Core - 使用Supervisor进行托管部署

    环境 CentOS 7 x64,详见 安装CentOS7虚拟机 .Net Core 2.1.801 详见 CentOS 7 下安装.NET Core SDK 2.1 ftp  详见  CentOS7 ...

  6. Tomcat&Servlet笔记

    # 今日内容     1. web相关概念回顾     2. web服务器软件:Tomcat     3. Servlet入门学习 ## web相关概念回顾     1. 软件架构         1 ...

  7. 基于bs4库的HTML查找方法

    基于bs4库的HTML查找方法 find_all方法 <>.find_all(name,attrs,recursive,string,**kwargs) 返回一个列表类型,内部存储查找的结 ...

  8. Codeforces 1255F Point Ordering(凸包+叉积)

    我们随机选取点1,2作为凸包的一个分割线,那么我们可以直接枚举剩下n-2个点找到他们和向量1-2的叉积大小与正负,然后我们可以根据叉积的正负,先将他们分割出两个区域,在向量1-2的下方还是上方,接下来 ...

  9. centos7 安装redis 出现cc: command not found错误解决

    安装过程 1. 下载并解压 cd /root/software wget http://download.redis.io/releases/redis-3.2.4.tar.gz tar -zxvf ...

  10. 1. Docker快速入门(仓库,镜像,容器)

    参考阿里云文档:https://help.aliyun.com/document_detail/51853.html?spm=a2c4g.11186623.6.820.RaToNY 参考菜鸟教程文档: ...