皮皮的博客

这一次在b站看到一个博主做的一个倒计时的动画效果，跟着做了一下。以下是对此次项目的一些记录与总结。该项目效果链接：Vue倒计时HTML部分：<div id="app"> <div id="countdown"> <svg :width="size" :height="size"> <circle fill="transparent" :stroke-width="stroke" stroke="#eee" :r="radius" :

这一次同样是用css来实现了一个聚光灯效果的一个样式。效果链接：聚光灯效果以下是该效果的具体实现，以及一些总结。首先就是文字部分是由两层。底层部分设置颜色为灰色，第二层就套上你想要的颜色，我这里选择了黄色。（与文字内容相呼应hhh）然后再在第二层的文字上套上遮罩来实现一个聚光灯效果。为了让HTML的结构更加简洁，第二层内容用伪类元素来实现。以下是HTML部分的代码：<h1 data-lightmove="StephenCurry">StephenCurry</h1>看吧，

实现了一个简单的卡片翻转效果，即当鼠标hover的时候卡片进行翻转到背面，鼠标移开时卡片又翻转回来。实现效果链接：翻转卡片以下是对此次项目的总结：让元素水平垂直居中的一个常用方法： display: flex; justify-content: center; align-items: center; min-height: 100vh; /* 同时想要让几个元素水平平分空间的话： justify-content: space-evenly;*/对于卡片的结构，有一个div

在b站上看到一个视频是用CSS来实现一个汉堡菜单的功能的，仿照着做了一下。这是我代码实现的链接：汉堡菜单。记录此次项目中学到的几个东西如下：用单选框和label来实现点击某一块来改变其样式。主要是将label 的for属性与checkbox的id相等。然后将原来的checkbox隐藏即可。<input type="checkbox" id="toggler"> <label for="toggler"> <div class="hanburger-con