CSS画心形和蛋形

更新日期: 2019-10-07阅读: 1.8k标签: 效果

一、心形


使用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>

链接: https://fly63.com/article/detial/5877

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!