马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-12-29 14:16:47
置顶卡
千斤顶
显身卡
发表于 2023-4-25 21:43:02