• 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{
            90px;
            height:80px;
            position:relative;
            margin:100px auto;
            background-color:#99f;
        }
        .xin:before{
            content:" ";
            position:absolute;
            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;
            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{
            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;
            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;
            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>

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    三、蛋形

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3</title>
        <style>
        .egg{
            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>
  • 相关阅读:
    C# 上传辅助方法
    C# 经纬度计算
    C#Excel导出反射数据集
    C# 数据模板导出
    C# 百度经纬度获取地址信息
    【平台开发】— 5.后端:代码分层
    【平台开发】— 4.mysql建库建表
    【平台开发】— 3.前端开发思路
    【平台开发】— 2.前端:vue-element-admin
    【平台开发】— 1.开篇
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13816062.html
Copyright © 2020-2023  润新知