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

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 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;
}

复制代码

哈哈，图案怎么有一点小猥琐呢？

发现了没有，这两段代码有很多重复的部分，优化一下，顺便修改背景色：

.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的官方颜色（元气绿！

）：

.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;
}

复制代码

最终：

登录/注册后可看大图

帅气不帅气（还不去撩妹）？！

详细鱼油不需要的源码：

index.zip (1.02 KB, 下载次数: 13, 售价: 10 鱼币)

如果喜欢，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列HTML帖子，请订阅专辑☞（传送门）（不喜欢更要订阅

）

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

解救二楼！！1

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

cool，就是颜色哈哈哈哈哈一言难尽

账号		自动登录	找回密码
密码			立即注册

[奇技淫巧] 打造一颗“跳动的心” | 【撩妹必备】

马上注册，结交更多好友，享用更多功能^_^

评分

浏览过的版块