纯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爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)的更多相关文章
- Sultana后记:纯css也能写col,select,datepicker,carousel...
未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...
- CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- 纯CSS画的基本图形
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
随机推荐
- centos 安装ftp服务BUG
安装完成之后匿名可登录,但是先创建的用户名和密码无法登录,最后排查原因是/etc/pam.d/vsftpd 文件注释掉第四行 auth required pam_shells.so
- 【JDBC】学习路径4-分页查询
第一章:什么是分页查询呢? 简而言之,分页数 就是百度搜索引擎中的网页的页数. 分页查询,就是从数据库中提取一部分出来,给用户. 用处:减少服务器负担. 为了方便测试,我们先给数据库添加大量信息. 还 ...
- RabbitMQ 入门系列:9、扩展内容:死信队列:真不适合当延时队列。
系列目录 RabbitMQ 入门系列:1.MQ的应用场景的选择与RabbitMQ安装. RabbitMQ 入门系列:2.基础含义:链接.通道.队列.交换机. RabbitMQ 入门系列:3.基础含义: ...
- .Net下的Http请求调用(Post与Get)
http请求调用是开发中经常会用到的功能.在内,调用自有项目的Web Api等形式接口时会用到:在外,调用一些第三方功能接口时,也会用到,因为,这些第三方功能往往是通过http地址的形式提供的,比如: ...
- mysql杂记漫谈
Hello,大家好,我是烤鸭,这几天消失了一下,主要是线上系统出了点小bug和sql性能问题,在努力搬砖,就把之前的设计模式系列放了一下下,正好趁这个复习巩固了一下sql执行计划和sql优化等相关的东 ...
- 使用filebeat接收rsyslog的日志
安装 下载好rpm包后直接安装 curl -L -O https://artifacts.elastic.co/downloads/beats/filebeat/filebeat-7.7.0-x86_ ...
- salesforce零基础学习(一百一十七)salesforce部署方式及适用场景
本篇参考:https://architect.salesforce.com/decision-guides/migrate-change https://developer.salesforce.co ...
- typora收费了,最后一个免费版提供下载
typora收费了,在这里,博主提供最后一个免费版下载,地址如下,顺便把typora导入和导出word时需要的工具也一同提供.最看不惯免费用着别人的软件,还搞引流的垃圾网站和公众号.地址如下 http ...
- 怎样编写正确、高效的 Dockerfile
基础镜像 FROM 基础镜像 基础镜像的选择非常关键: 如果关注的是镜像的安全和大小,那么一般会选择 Alpine: 如果关注的是应用的运行稳定性,那么可能会选择 Ubuntu.Debian.Cent ...
- Kibana:Canvas入门