before css 旋转_七夕,当然少不了纯CSS的点缀啦
作者:JowayYoung
转发链接:https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw
前言
以下程序猿通通指男性程序猿哈
今天是一年一度的七夕,估计各位程序猿同行都不得不对心仪的妹纸吟诗作对了。
「银烛秋光冷画屏,轻罗小扇扑流萤。天街夜色凉如水,卧看牵牛织女星。」
虽然吟唱了唐朝杜牧大师的「七夕」,但好歹笔者也能倒背如流。
单身的程序猿或准备脱单的程序猿怎么办,常规操作是const girl = new Object(),没对象就自己创建一个对象过节呗。可是笔者今天想用纯CSS为单调的七夕做一些点缀呢。
pig
以下全程纯玩CSS,没有一段JS,简单的CSS也能点缀出在七夕里你对心仪妹纸的心意。
Meet You
当你遇见心仪妹纸时,心里噗通噗通地跳动,此时此刻可用纯CSS描绘你的心情。
使用单个
巧妙利用了transform将两个伪元素平移到相应位置产生叠加错觉。
meet
.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()裁剪出一个棱角心形,实质上是一个多边形。
.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(),目的是为了让颜色过渡得更自然。
.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
$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); }}
七夕快乐
最后,祝天下有情人终成眷属,也祝未脱单的兄弟们在未来会遇到那个对的她,也恳请单身姑娘们多给一些机会追你的男生,相信也能找到一个疼爱你一辈子的男生。
作者:JowayYoung
转发链接:https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw
before css 旋转_七夕,当然少不了纯CSS的点缀啦相关推荐
- before css 旋转_单标签!纯CSS实现动态晴阴雨雪
引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
- css单标签,单标签!纯CSS实现动态晴阴雨雪
封面.jpg 1 引言 本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 效果预览.gif 再看 ...
- css颜色 333是什么颜色,纯css实现的颜色扇附图
今天我们实现一个纯css实现的颜色扇,继续学习sass的使用,效果见下图所示. html文件 复制代码代码如下: 然后是css文件,使用scss.prefire free和css reset. 复制代 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法 发布时间:2020-10-26 09:30:20 来源:亿速云 阅读:104 作者:小新 小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
- css 多行文字左对齐,纯CSS实现文字一行居中,多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
- css 实现一横排圆点,使用纯CSS怎么实现圆点错觉的效果
使用纯CSS怎么实现圆点错觉的效果 发布时间:2020-09-14 11:30:40 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果,文中介绍的非常详细,具有 ...
- CSS特殊样式(三)纯CSS实现各类气球泡泡对话框效果
一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样 ...
- css.gg - 一套漂亮的纯 CSS 实现的免费开源图标库
700多个时尚漂亮的 css 图标库,特别适合 UI 设计师和前端开发者下载使用. 700+ CSS 图标 css.gg 是一套纯 css 实现的轻量美观的开源图标库,特点是所有的图形都通过 css ...
最新文章
- 1001: 整数求和
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
- HDU 3157 Crazy Circuits(有源汇上下界最小流)
- IC/FPGA 设计资源整理推荐
- 【新产品发布】《EVC8021 RS-232RS-485/422 隔离接口转换器》
- LVM使用手册简化命令
- 工作总结10:解决vuex刷新数据消失
- c语言判断字符配对,【C语言】判断花括号{}是否匹配
- Android 开发环境配置问题
- 蓝牙 查询码 android,android bluetooth UUID蓝牙查询表
- BZOJ2049[SDOI2008] 洞穴勘测
- labview获取窗口句柄_API---如何获得窗口句柄(HWND)
- HP服务器固件升级(ILO及bios升级:实操版)
- 制作u盘winpe启动盘_制作U盘启动盘
- Python3网络爬虫(一)-小说爬取(以笔趣看网站小说为例)
- 二级考试c语言中 星号与字母 题型总结,计算机等级C语言上机考试编程题分类总结.doc...
- android与ios ui切图关系,iOS、Android 开发单位换算及 UI 切图要求
- ABAP 创建及修改采购申请
- 015污点修复画笔工具,修复画笔工具,修补工具,内容感知移动工具和红眼工具...
- stagefright 架构分析(四) MediaExtractor