一、心形

使用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. C++/C#结构体转化-二维数组

    String To bytes typedef struct VidyoClientInEventGroupChat_ { /*! Message (contents) to be sent to a ...

  2. ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法

    在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...

  3. 重载Prometheus配置

    发送SIGHUP信号给应用程序的主进程: pid ‘’-1‘’是指“终端断线” 发送post请求给指定端点: curl -XPOST http://ip:9090/-/reload 对于此种方法要注意 ...

  4. MySQL数据库生成数据库说明文档

    在半年多前为一个MySQL数据库生成过数据库说明文档,今天要重新生成一份,但是发现完全不记得当时是怎么生成的,只能在网上搜索重来一遍,所以今天特意把这个过程记录一下. 一.安装 使用MySQL数据库表 ...

  5. MySql-Mysql技术内幕~SQL编程学习笔记(1)

    1.MySQL的历史,一些相关概念. 2.MySQL数据类型 *通常一个页内可以存放尽可能多的行,那么数据库的性能就越好,选择一个正确的数据类型至关重要. 1>UNSIGNED类型: 将数字类型 ...

  6. Java Springboot 根据图片链接生成图片下载链接 及 多个图片打包zip下载链接

    现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...

  7. 从汇编到C

    一. 设置栈 1.1. C语言运行时需要和栈的意义 1.1.1. “C语言运行时(runtime)”需要一定的条件,这些条件由汇编来提供.C语言运行时主要是需要栈 1.1.2. C语言与栈的关系 a. ...

  8. 通过编写串口助手工具学习MFC过程——(二)通过“打开串口”按钮了解基本操作

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  9. spring boot 枚举使用的坑3

    上一篇说到spring boot 使用jackson在枚举enum序列化和反序列化的问题, 再来说说在JPA中实体entity使用枚举的问题. 还是这个枚举: @Getter @AllArgsCons ...

  10. java的idea项目文件夹合并,怎么分开

    一,如下图所示 二,只需要将这个去掉