当前位置: 首页 > Web前端 > HTML5

前端CSS:3#纯CSS实现粉红心

时间:2023-04-05 01:51:06 HTML5

介绍一下原链接感谢comehop??e的【前端日常实战】干了三个月心疼跑路(顺便劝说我这样的新人,别急着入职,一定要pickandchoose)回家补补基础知识还有node,作为前端,原来CSS已经是新手了。为了明年找工作,又开始实习了...效果预览github.io浏览源码地址https://github.com/shanyuhai1...代码解读1.首先要完成html结构,我们需要五个心和底部的页脚

pinkhearts
样式初始化并居中主体{保证金:0;高度:100vh;显示:弹性;弹性方向:列;对齐项目:居中;证明内容:居中;背景色:#f3f3f3;溢出:隐藏;}.hearts{宽度:100vw;高度:20vw;边框:1px实心;/*片段将被删除*/box-sizing:border-box;填充:05vw;显示:弹性;对齐项目:居中;证明内容:空格-between;}.heart{宽度:15vw;他身高:15vw;边框:1px实心;/*片段将被删除*/}footer{margin-top:10vh;文本转换:大写;字母间距:2px;字体系列:“verdana”;:22px;颜色:#F48FB1;}2.画一个旋转的粉色方块然后在第一个心形上添加一个粉色方块添加DOM结构
基平面(plane)定位并完成基本style.heart{position:relative;显示:弹性;对齐项目:居中;证明内容:中心;}.plane{位置:绝对;不透明度:0.8;}.half-heart{宽度:7.5vw;身高:7.5vw;背景色:粉色;transform:rotate(-45deg);}一颗心由两个基准平面组成
。心{变换样式:保留3d;}。右平面{变换:旋转Y(90度);/*因为垂直90度,所以不可见*/}然后添加旋转动画(这样我们可以看到两个参考平面).heart{animation:rotate5sease-in-outinfinite;}.heart:nth-of-type(1){animation-delay:-5s;}/*keyframes*/@keyframesrotate{0%{transform:rotateY(0deg)rotateZ(25deg)translateY(7.5vw);}50%{变换:rotateY(270deg)rotateZ(25deg)translateY(-7.5vw);}100%{变换:旋转Y(360deg)旋转Z(25deg)translateY(7.5vw);}}3。把两个正方形换成心形生成两个圆放在正方形上面(伪元素可以解决)。半心:之前,.半心:之后{内容:“”;宽度:7.5vw;身高:7.5vw;背景色:粉色;边界半径:100%;position:absolute;}.half-heart:before{top:-3.25vw;left:0;}.half-heart:after{top:0;left:3.25vw;}好了这样一颗旋转上升的心就完成了4.完成5颗心并修改延迟时间(省略DOM结构).heart:nth-of-type(1){animation-delay:-5s;}.heart:nth-of-type(2){animation-delay:-4s;}.heart:nth-of-type(3){animation-delay:-3s;}.heart:nth-of-type(4){animation-delay:-2s;}.heart:nth-of-type(5){动画ion-delay:-1s;}5.最后记得把之前确认位置和大小的border边框删掉