纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)
theme: cyanosis
最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!!
先看效果:
代码拆解:
主要是分为3大部分
- 分子颗粒
- 爱心
- 动画
代码实现:
分子颗粒
分子颗粒其实非常简单,主要是使用到的就是css的渐变:linear-gradient,然后再用css3新出的background-size来控制颗粒之间的距离。
控制linear-gradient的角度,只展示出一个点。
这是background-size控制在10像素之间的效果。
background: linear-gradient(148deg, #f00, transparent 2px),
linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;
爱心
爱心其实更加简单,使用伪元素::after和::before做出两个圆,然后用定位调整一下位置。
.loveMargin {width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;position: relative;
}.loveMargin::after {content: '';position: absolute;left: 0px;top: -142px;width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;border-radius: 50%;
}.loveMargin::before {content: '';position: absolute;left: -137px;width: 300px;height: 300px;background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);background-size: 10px 10px;border-radius: 50%;}
动画效果
心动的效果,其实主要就是放大和缩小,用到transform中的scale()。再用动画@keyframes控制关键帧来实现。
不停的心动主要使用的是animation中的infinite属性。
animation: scaleDraw 3s infinite;
-webkit-animation: scaleDraw 3s infinite;
@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1);
/*开始为原始大小*/}50% {transform: scale(1.1);/*放大1.1倍*/}100% {transform: scale(1);/*开始为原始大小*/}}
将这些效果合并,并且调整,就能变成一个低配版的打火机与公主裙中的爱心代码效果啦~
获取地址链接: https://pan.baidu.com/s/1su-DPYYjg_vW2nTpE2RnOA?pwd=uifz 提取码: uifz
纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)相关推荐
- html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
- 纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制. webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar ...
- python中代码注释使用的符号是_Python语句中用于注释代码的符号是
Python语句中用于注释代码的符号是 答:#号 发电机-双绕组变压器单元接线,发电机出口不装设断路器的原因是(???) 答:断路器造价高. 会计报表各项目的数据必须建立在()的基础之上 答:真实可靠 ...
- wpf时间显示代码_如何在ASP.NET和WPF中显示QR代码
wpf时间显示代码 I've half-jokingly said that there's never a good reason to use a QR Code. However, I'm wo ...
- c语言中如何让诊断代码右移_如何检测和诊断生产中的慢代码
c语言中如何让诊断代码右移 开发人员面临的更困难的任务之一是查找和诊断生产中运行缓慢的代码. 首先,您如何监控生产代码而不放慢速度? 当然,您无法通过分析器运行生产代码. 即使您有计时代码的机制,那么 ...
- 打火机与公主裙剧中的爱心
效果 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>< ...
- wordpress运行php代码,怎么在wordpress的文章或页面中运行PHP代码
最近有个项目需要在wordpress里运行php代码,可是在编辑器里输入php代码后,前台只会以文本的方式输出,非常不方便,根本实现不了我的需求.下面我们来看一下该怎么才可以实现在wordpress里 ...
- 猿代码首届团课免单节火热进行中!|猿代码科技
哇噻:重磅好消息! 猿代码回馈新老学员,特别推出团购优惠活动. 零利疯抢,震撼全场.198元抢价值1980元:[计算机考研秘籍+java训练营] 3人团(前20个团长额外送小米Redmii蓝牙耳机或者 ...
- 纯CSS实现圆角矩形框
为什么80%的码农都做不了架构师?>>> 实现原理: 纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果. 图一 从 ...
最新文章
- 关于安装oracle 11G R2 for Windows X64问题
- 川农在线计算机考试,四川农业大学《计算机应用基础(专科)》20年6月作业考核-答案...
- 【转】TFS上分支和标签的用法
- RabbitMQ中queueBind和exchangeBind方法
- java 需要 不是语句,我应该避免使用Java标签语句吗?
- 人物-周鸿祎:周鸿祎
- 氚云后台代码-创建、更新子表以及发送消息
- 防火墙OPNsense安装
- 广州海客智能机器人:为什么要让孩子从小学习机器人课程
- python数据挖掘课后题答案_中国大学MOOC《数据挖掘与python实践》章节答案
- MIUI系统手机实现WLAN热点桥接
- After Effects 自动导入素材和分类的脚本
- Telsa显卡时间轴
- 小程序如何本地去水印,基于很多小白写的教程
- 解决binwalk提取需要权限问题,binwalk提取文件报错。
- 《凯恩斯革命的前世今生》导语集(前三章)
- 百度竞价推广的十大误区
- 篱笆回路Fence Loops
- 内存颗粒版本判断方法和编号解析(三星、美光、海力士)
- 多目标优化蚁群算法的matlab_混合参数蚁群算法的改进优化
热门文章
- 手机dirac是什么_oppo与Dirac达成合作 再度挑战手机HiFi
- RocketMQ源码级别面试题板块
- 【HTML5】引号使用
- linux系统为什么很重要,Linux入门:为什么要安装Linux
- 学习笔记(2):Python语言家族-所有语言通用的循环-2
- python后端数据发送到前端_前端与后端的数据交互(jquery ajax+python flask)
- VUE+WebPack游戏设计:实现盒子爆破效果和界面美化
- 自媒体公司和探店 达人请看这里
- 腾讯《AI自动化测试》读书笔记,跪了!
- 外六角螺栓头部尺寸标准