打造一颗“跳动的心” | 【撩妹必备】
本帖最后由 不二如是 于 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:} ) 解救二楼!!1 cool,就是颜色哈哈哈哈哈一言难尽
页:
[1]