七夕,当然少不了纯CSS的点缀啦
前言
以下程序猿通通指男性程序猿哈
今天是一年一度的七夕?,估计各位程序猿同行都不得不对心仪的妹纸吟诗作对了。
「银烛秋光冷画屏,轻罗小扇扑流萤。天街夜色凉如水,卧看牵牛织女星。」
虽然吟唱了唐朝杜牧大师的「七夕」,但好歹笔者也能倒背如流。
单身的程序猿或准备脱单的程序猿怎么办,常规操作是const girl = new Object()
,没对象就自己创建一个对象过节呗。可是笔者今天想用纯CSS为单调的七夕做一些点缀呢。
pig
以下全程纯玩CSS,没有一段JS,简单的CSS也能点缀出在七夕里你对心仪妹纸的心意。
Meet You
当你遇见心仪妹纸时,心里噗通噗通地跳动,此时此刻可用纯CSS描绘你的心情。
使用单个<div>
结合两个伪元素::before
和::after
通过错位叠加的方式合并成一个心形。
- 声明
<div>
的尺寸为一个正方形
并以中心顺时针旋转45deg
- 声明两个伪元素继承
<div>
的尺寸并实行绝对定位 - 声明两个伪元素的圆角率为
100%
并平移到相应位置
巧妙利用了transform
将两个伪元素平移到相应位置产生叠加错觉。
meet
<div class="meet"></div>
.meet {
position: relative;
width: 200px;
height: 200px;
background-color: #f66;
transform: rotate(45deg);
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
border-radius: 100%;
width: 100%;
height: 100%;
background-color: #f66;
content: "";
}
&::before {
transform: translateX(-100px);
}
&::after {
transform: translateY(-100px);
}
}
meet
Love You
当你真的爱上心仪妹纸时,心里就会产生爱的荷尔蒙,慢慢布满曾经受伤而变得有棱角的心(前提是你曾经受过伤害,不然心也是圆圆的
)。
使用clip-path
的polygon()
裁剪出一个棱角心形,实质上是一个多边行。
<div class="love"></div>
.love {
width: 300px;
height: 300px;
background-image: linear-gradient(to bottom, #f66, #66f);
clip-path: polygon(25% 0, 50% 20%, 75% 0, 100% 20%, 100% 60%, 50% 95%, 0 60%, 0 20%);
}
love
Miss You
当你和心仪妹纸在一起后都日想夜念,恨不得每天都腻在一起,心情就像过山车那样随时带着惊喜。
前段时间看到「陈大鱼头兄」的心形加载条,觉得挺漂亮的,很带感觉。
miss
通过动图分析,发现每条线条的背景色和动画时延不一致,另外动画运行时的高度也不一致。细心的你可能还会发现,第1条和第9条的高度一致,第2条和第8条的高度一致,以此类推,得到高度变换相同类
的公式:对称index = 总数 + 1 - index
。
背景色使用了滤镜的色相旋转hue-rotate()
,目的是为了让颜色过渡得更自然。
<div class="miss">
<ul style="--line-count: 9">
<li class="line-1" :style="--line-index: 1"></li>
<li class="line-1" :style="--line-index: 2"></li>
<li class="line-1" :style="--line-index: 3"></li>
<li class="line-1" :style="--line-index: 4"></li>
<li class="line-1" :style="--line-index: 5"></li>
<li class="line-1" :style="--line-index: 6"></li>
<li class="line-1" :style="--line-index: 7"></li>
<li class="line-1" :style="--line-index: 8"></li>
<li class="line-1" :style="--line-index: 9"></li>
</ul>
</div>
.miss {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
ul {
display: flex;
justify-content: space-between;
width: 150px;
height: 10px;
}
li {
--Θ: calc(var(--line-index) / var(--line-count) * .5turn);
--time: calc((var(--line-index) - 1) * 40ms);
border-radius: 5px;
width: 10px;
height: 10px;
background-color: #3c9;
filter: hue-rotate(var(--Θ));
animation-duration: 1s;
animation-delay: var(--time);
animation-iteration-count: infinite;
&.line-1,
&.line-9 {
animation-name: beat-1;
}
&.line-2,
&.line-8 {
animation-name: beat-2;
}
&.line-3,
&.line-7 {
animation-name: beat-3;
}
&.line-4,
&.line-6 {
animation-name: beat-4;
}
&.line-5 {
animation-name: beat-5;
}
}
}
@keyframes beat-1 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 30px;
transform: translate3d(0, -15px, 0);
}
}
@keyframes beat-2 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 60px;
transform: translate3d(0, -30px, 0);
}
}
@keyframes beat-3 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 80px;
transform: translate3d(0, -40px, 0);
}
}
@keyframes beat-4 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 90px;
transform: translate3d(0, -30px, 0);
}
}
@keyframes beat-5 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 90px;
transform: translate3d(0, -20px, 0);
}
}
一波操作后就有了以下效果。和陈大鱼头兄
的心形加载条相比,颜色、波动曲线和跳动频率有点不一样,在暖色调的蔓延和肾上腺素的飙升下,这是一种心动的感觉。对着你心仪妹纸说:I Miss You
。
miss
CSS变量怎样玩,可回顾笔者曾经的文章《妙用CSS变量,让你的CSS变得更心动》。
Marry You
当你娶到心仪妹纸后,在你眼里整个世界都是她。也许,你会感激曾经在某一天某一刻某一地遇上那个对的她。写到最后,送给各位同学一个大大的彩蛋,一个暖心彩虹色调?搭配的爱心点赞按钮。
marry
<button class="marry">
<div class="like-wrapper">
<div class="like-ripple"></div>
<svg class="like-heart" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path>
</svg>
<div class="like-particle" style="--line-count:6;">
<div class="like-particle-item" style="--line-index:1;"></div>
<div class="like-particle-item" style="--line-index:2;"></div>
<div class="like-particle-item" style="--line-index:3;"></div>
<div class="like-particle-item" style="--line-index:4;"></div>
<div class="like-particle-item" style="--line-index:5;"></div>
<div class="like-particle-item" style="--line-index:6;"></div>
</div>
</div>
</button>
$heart-color: #f66;
$easing: cubic-bezier(.7, 0, .3, 1);
$duration: 500ms;
.marry {
position: relative;
z-index: 1;
border: none;
border-radius: 100%;
width: 1em;
height: 1em;
appearance: none;
background-color: #fff;
cursor: pointer;
font-size: 200px;
transition: all $duration $easing;
&::before {
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: inherit;
width: 100%;
height: 100%;
box-shadow: 0 .3em .6em rgba(#000, .3);
content: "";
transition: inherit;
}
&::after {
position: absolute;
left: 0;
top: 0;
z-index: -1;
border-radius: inherit;
width: 100%;
height: 100%;
background-color: #fff;
content: "";
}
&:active {
&::before {
animation: depress-shadow $duration $easing both;
}
}
&:focus::after {
animation: depress $duration $easing both;
}
}
.like-wrapper {
display: grid;
justify-content: center;
align-items: center;
> * {
grid-area: 1/1;
margin: auto;
}
}
.like-ripple {
overflow: hidden;
position: relative;
border-radius: 100%;
width: 1em;
height: 1em;
&::before {
position: absolute;
left: 0;
top: 0;
border: .4em solid $heart-color;
border-radius: inherit;
width: 100%;
height: 100%;
content: "";
transform: scale(0);
}
.marry:focus & {
&::before {
animation: ripple-out $duration $easing;
}
}
}
.like-heart {
display: block;
width: .5em;
height: .5em;
transform-origin: center 80%;
path {
transition: all $duration $easing;
stroke: $heart-color;
stroke-width: 2;
fill: transparent;
.marry:focus & {
fill: $heart-color;
}
}
.marry:focus & {
animation: heart-bounce $duration $easing;
}
}
.like-particle {
position: relative;
width: 1px;
height: 1px;
}
.like-particle-item {
--Θ: calc(var(--line-index) / var(--line-count) * 1turn);
$color-list: #f66 #66f #f90 #09f #9c3 #3c9;
position: absolute;
left: 0;
top: 0;
border-radius: .05em;
width: .1em;
height: .1em;
transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(0) scaleY(0);
transition: all $duration $easing;
@each $v in $color-list {
$index: index($color-list, $v);
&:nth-child(#{$index}) {
background-color: $v;
}
}
.marry:focus & {
animation: particle-out calc(#{$duration} * 1.2) $easing forwards;
}
}
.marry:focus {
cursor: normal;
pointer-events: none;
}
@keyframes depress {
0%,
100% {
transform: none;
}
50% {
transform: translateY(5%) scale(.9);
}
}
@keyframes depress-shadow {
0%,
100% {
transform: none;
}
50% {
transform: scale(.5);
}
}
@keyframes heart-bounce {
0%,
80%,
100% {
transform: scale(1);
}
40% {
transform: scale(.7);
}
}
@keyframes particle-out {
50% {
height: .3em;
}
50%,
60% {
height: .3em;
transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(.8em) scale(1);
}
60% {
height: .2em;
}
100% {
transform: translate(-50%, -50%) rotate(var(--Θ)) translateY(1em) scale(0);
}
}
@keyframes ripple-out {
from {
transform: scale(0);
}
to {
transform: scale(5);
}
}
七夕快乐
本文所有源码收录在笔者的「CodePen」上,感兴趣的同学可自行查看https://codepen.io/JowayYoung或点击「阅读原文」。
若你很喜欢CSS,请关注「IQ前端」,一个专注于CSS/JS
开发技巧的前端公众号,笔者会带你玩转所有CSS特性。
最后,祝天下有情人终成眷属,也祝未脱单的兄弟们在未来会遇到那个对的她,也恳请单身姑娘们多给一些机会追你的男生,相信也能找到一个疼爱你一辈子的男生。
love
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例