CSS画心形和蛋形
一、心形
使用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-shadow、v-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画心形和蛋形的更多相关文章
- css画心形、三角形的总结
.heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...
- 基于Css反射形自触发事件,优化你的延时事件
昨天听w3ctech分享时候,说道orientationchange在不同OS和版本中,存在兼容问题,很多时候触发时候都没有渲染结束,开发同学一般都是基于setTimeout一段时间之后,在去执行具体 ...
- C++命令行画心形<转载>
#include <stdio.h> int main() { for (float y = 1.5f; y > -1.5f; y -= 0.1f) { for (float x = ...
- CSS学习笔记一:css 画平面图形
最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...
- 使用 SVG 和 JS 创建一个由星形变心形的动画
序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...
- 【Python】画一个心形
#!/usr/bin/env python # -*- coding:utf-8 -*- import turtle import time # 画心形圆弧 def hart_arc(): for i ...
- CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- 160419、CSS3实现32种基本图形
CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出.直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式. 这32种图形分别为圆形,椭圆形,三角形,倒三角形, ...
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
随机推荐
- C++/C#结构体转化-二维数组
String To bytes typedef struct VidyoClientInEventGroupChat_ { /*! Message (contents) to be sent to a ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- 重载Prometheus配置
发送SIGHUP信号给应用程序的主进程: pid ‘’-1‘’是指“终端断线” 发送post请求给指定端点: curl -XPOST http://ip:9090/-/reload 对于此种方法要注意 ...
- MySQL数据库生成数据库说明文档
在半年多前为一个MySQL数据库生成过数据库说明文档,今天要重新生成一份,但是发现完全不记得当时是怎么生成的,只能在网上搜索重来一遍,所以今天特意把这个过程记录一下. 一.安装 使用MySQL数据库表 ...
- MySql-Mysql技术内幕~SQL编程学习笔记(1)
1.MySQL的历史,一些相关概念. 2.MySQL数据类型 *通常一个页内可以存放尽可能多的行,那么数据库的性能就越好,选择一个正确的数据类型至关重要. 1>UNSIGNED类型: 将数字类型 ...
- Java Springboot 根据图片链接生成图片下载链接 及 多个图片打包zip下载链接
现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...
- 从汇编到C
一. 设置栈 1.1. C语言运行时需要和栈的意义 1.1.1. “C语言运行时(runtime)”需要一定的条件,这些条件由汇编来提供.C语言运行时主要是需要栈 1.1.2. C语言与栈的关系 a. ...
- 通过编写串口助手工具学习MFC过程——(二)通过“打开串口”按钮了解基本操作
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- spring boot 枚举使用的坑3
上一篇说到spring boot 使用jackson在枚举enum序列化和反序列化的问题, 再来说说在JPA中实体entity使用枚举的问题. 还是这个枚举: @Getter @AllArgsCons ...
- java的idea项目文件夹合并,怎么分开
一,如下图所示 二,只需要将这个去掉