A heart-shaped
Using transform-origin attribute set point to achieve different origin
1, the elements change point transform-origin (transform-origin is a modification of the origin, the origin point is the element about the rotation or deformation)
Note: This property only play a role in setting the transform property of the time;
If the case is not set, the default is to point the elements of its central location. I.e., transform without the use of transform-origin attribute rotate, translate, scale, skew, matrix operations which are based on the center position of itself as the origin.
transform-origin Usage
**语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] **
transform-origin attribute value can be the percentage of a specific value, em, px and the like, may be top, right, bottom, left, and so the key center.
2D transform-origin attribute modification may be one of the parameter values, the parameter values may be two. If two parameter values, a first value of the horizontal position of the X-axis direction, the second value is used to set the vertical position of the Y-axis direction.
3D deformation transform-origin properties in further comprising a third value of the Z axis. Its value respective values be briefly described as follows:
- top = top center = center top is equivalent to 50% 0
- right = right center = center right equivalent to, or 100% (100% to 50%)
- ** bottom = bottom center = center bottom ** equivalent to 50% to 100%
- left = left center = center left is equivalent to or 0 (50% 0)
- center = center center is equivalent to or 50% (50% to 50%)
- top left = left top is equivalent to 00
- right top = top right is equivalent to 100% 0
- bottom right = right bottom equivalent to 100% 100%
- bottom left = left bottom is equivalent to 0 100%
left, center right horizontal direction value, the corresponding percentile value left = 0%; center = 50%; right = 100%
a top center bottom values in the vertical direction, wherein the top = 0%; center = 50%; bottom = 100%;
If only takes a value that represents the same value in the vertical direction.
Use: before and: after pseudo add content element;
transform-origin property support in the browser is not particularly high, so remember to add the prefix
Positioning position: relative and absolute
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
<!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>
Second, the beating heart
The above describes how to use CSS to draw a heart shape, if you want to achieve the beating heart, only need to add a animation animation can
Heart-shaped shadow around uses filter filters properties
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
filter属性中的 drop-shadow(h-shadow v-shadow blur spread color)
** achieve results: ** set a shadow effect to the image.
Synthetic shadow below the image, there may be ambiguity, FIG shifted version of the mask may be drawn to a specific color. Function accepts a value (defined in the CSS3 background) type, in addition to ** "inset" ** keywords are not allowed. This function is similar to the conventional box-shadow property;
The difference is that, through the filter filters, some browsers for better performance provides hardware acceleration.
** h-shadow ** horizontal shadow, drop shadow appears on the left element;
v-shadow shading in the vertical direction, drop shadow appears above the element; ( H-Shadow , ** ** v-shadow set after a value of 0 if the shadow will appear just behind the element)
blur blurred distance, the greater the value, the more blurred, the shadow becomes bigger and lighter. does not allow a negative value if not set, the default is 0 (the boundary of the shadow is very sharp)
spread positive shadow will expand and become larger, negative shadow will be reduced. If not set, the default is 0 (the shadow will be the same size as the element)
<!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>
Programming sixth year, to share with you some of the learning method, combat development need to pay attention to detail. 767-273-102 autumn dress. From the zero-based front-end to learn how to start. To see how the predecessors proudly forward in the programming world! Constantly updated with the latest tutorials and learning methods (web front-end system to learn the route, detailed front-end project combat instructional videos), I had wanted to learn web front-end, or change jobs, or college students, as well as work want to upgrade their skills, is studying small partners are welcome to join. We will walk together with the front tip of the tip
Third, the egg-shaped
border-radius used / frame dimensions are provided an X-axis and Y-axis
Is clockwise, top left - upper right - lower right - lower left
<!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>