不二如是 发表于 2017-12-29 14:16:47

打造一颗“跳动的心” | 【撩妹必备】

本帖最后由 不二如是 于 2020-3-17 19:09 编辑

推荐阅读:

实用Tips - 11 - 【Web前段】进阶路线 | 【内含进阶表】

2017 JavaScript 调查报告概述 |【重磅解读】

用一次就会爱上的web工具类产品 | 【Season.2】





上面的效果,就是最终Style,先来抽象下模型:


将整个图案拆开来看,主要是两个圆+正方形。

旋转过的正方形、左上方的圆形、右上方的圆形。



创建代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fishcHeart</title>
    <style>
      
    </style>
</head>
<body>
<div class="fishcHeart"></div>
</body>
</html>



先来实现最简答的正方形,直接设置div宽高:

*{
            /*居中显示*/
            margin: 5% auto;
      }
      .fishcHeart{
            width: 222px;
            height: 222px;
            background: palevioletred;
            position: relative;
      }



矩形有了,相对定位,方便后面基于伪类元素(:before,:after),进行两个圆的生成。

还需要旋转一下,这样才能变成模型图中的样子。
.heart {
         ...
            transform: rotate(45deg);
      }


小提示:
旋转后,坐标系方向也会改变,就是left和top移动方向也跟着改变


了解上面的提示后,现在设置伪类:before 和 :after
.fishcHeart:before{
            /*content必须写,没有任何添加内容用""*/
            content: "";
            width: 222px;
            height: 222px;
            background: #faa;
            position: absolute;
            border-radius: 50%;
            bottom: 111px;
      }


注意用伪类,content属性即使没有也要指定。

现在设置:after:
.fishcHeart:after{
            /*content必须写,没有任何添加内容用""*/
            content: "";
            width: 222px;
            height: 222px;
            background: #faa;
            position: absolute;
            border-radius: 50%;
            right: 111px;
      }


哈哈,图案怎么有一点小猥琐呢?{:10_297:}

发现了没有,这两段代码有很多重复的部分,优化一下,顺便修改背景色:
.fishcHeart:before, .fishcHeart:after{
            /*content必须写,没有任何添加内容用""*/
            content: "";
            width: 222px;
            height: 222px;
            background: palevioletred;
            position: absolute;
            border-radius: 50%;

      }

      .fishcHeart:before{
            right: 111px;
      }
      .fishcHeart:after{
            bottom: 111px;
      }


哇塞,心型出来了,简单不简单?!



现在添加一下,主体外面的阴影,增加B格,就用咱们鱼C的官方颜色(元气绿!{:10_279:} ):
.fishcHeart{
            ...
            /*给图想设置阴影,合成在图像下面*/
            /*filter: drop-shadow(x偏移y偏移 模糊大小 色值);*/
            filter: drop-shadow(0px 0px 33px rgb(29, 191, 33));
      }




离大功告成不远了,想一想“心的跳动“
        Doom...Doom...

        有频率的放大缩小,放大快,缩小慢,周期运动。


通过@keyframe 动画完成动态效果,利用scale()属性完成放大缩小。
@keyframes heartRate {
            0%{
                transform: rotate(45deg) scale(0.6,0.6);
                opacity: 0.7;
            }
            25%{
                transform: rotate(45deg) scale(1,1);
                opacity: 1;
            }
            100%{
                transform: rotate(45deg) scale(0.6,0.6);
                opacity: 0.7;
            }
      }

在.fishcHeart类中调用这个动画:
.fishcHeart{
            ...
            /*最后添加设计的动画,1.5s内执行完成,无限循环*/
            animation: heartRate 1.5s infinite;
      }

最终:
http://xxx.fishc.com/forum/201712/28/104049nroprqthassll98a.gif

帅气不帅气(还不去撩妹)?!

详细鱼油不需要的源码:


如果喜欢,别忘了评分{:10_281:} :

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_278:} )

琅琊王朝 发表于 2023-4-25 21:43:02

解救二楼!!1

朕也来学学 发表于 2023-10-10 12:04:58

cool,就是颜色哈哈哈哈哈一言难尽
页: [1]
查看完整版本: 打造一颗“跳动的心” | 【撩妹必备】