2px

2024-07-01【动画进阶】类 ChatGpt 多行文本打字效果
今天我们来学习一个有意思的多行文本输入打字效果，像是这样：这个效果其实本身并非特别困难，实现的方式也很多，在本文中，我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果：
2024-04-04CSS Animation example
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>
2024-03-29Vue：实现子组件和父组件数据的双向绑定案例和sync修饰符简化
实现子组件和父组件数据的双向绑定（实现App.vue中的selectId和子组件选中的数据进行双向绑定）代码案例BaseSelect.vue<template><div><select:value="selectId"@change="selectCity"><optionvalue="101">北京</option><op
2024-03-26消失的留言（HTML中用JS实现）
学习目标：提示：这里可以添加学习目标例如：一周掌握Java入门知识学习内容：掌握延时函数的使用掌握JavaScript控制css属性的方法学习：提示：这里可以添加计划学习的时间例如：框架+文字<!DOCTYPEhtml><htmllang="zH-Hans"><head><metacharset="UTF-8"><metaname=
2024-01-24vue print.js 批量打印功能
批量打印：1.用到print.js 自行安装安装完成后引用 importprintJSfrom'print-js';2.用到深拷贝深拷贝代码：（可以将此代码放在一个页面中，对此进行引用即可，例如：放在until文件中，引用代码 import{deepClone}from'@/utils/index'）exportfunctiondeepClone
2023-12-12封装单选框
<template><divclass="radioButtons"><labelv-for="optioninoptions":class="{'is-selected':selectedValue===option.value}":key="option.valu
2023-12-07CSS如何给字体加边框
<h1>字体边框</h1>h1{background-color:black;font-family:"Raleway",sans-serif;font-size:28px;color:red;//下方是加边框的内容text-shadow:4px4px0white,4px-4px0white,-4px-4px0white,-4px4px0white,4px3px0w
2023-11-22background实现边线动画
边线左侧划出，右侧收起，关键点就是改变background-position的位置left->right.div{background:linear-gradient(toright,#ec695c,#61c454)no-repeatrightbottom;background-size:02px;transition:background-size1.3s;}.div:hover{backgro
2023-11-12CSS3学习笔记-句子排版效果
CSS3提供了丰富的排版效果，可以通过样式属性来控制文本的排列方式、字体样式、行高、字间距等。以下是一些常用的句子排版效果示例：文本对齐方式：.text-center{text-align:center;}.text-right{text-align:right;}.text-justify{text-align:justify;}字
2023-10-23首屏图片展示
找到一个首页过度动画：<template><divref="centerBg"class="centerBg"><divv-if="len"class="mask"><divclass="grid":style="{gridTemplateColumns:
2023-10-11使用油猴脚本，实现回到顶部
经常浏览网页，看到很多网站都有回到顶部的按钮，而有些网站没有这个功能，就想用脚本自己实现一下，这样所有页面都可以使用了。//==UserScript==//@nameToTop//@namespacehttp://tampermonkey.net///@version0.1//@descriptiontrytotakeoverthewor
2023-09-23基于CSS实现回到页面顶部的几种写法(从实现到增强)
前面整理了一个JS实现回到顶部的功能，但没有给出具体的界面样式，这次从网上找几个好看的参考，自己动手也实现一下，后续打算结合这两篇文章，根据JS和CSS使用油猴来实现一下。效果图如下：代码如下：<!DOCTYPEhtml><htmllang="cn"><head><metacharset="UTF-8"><title>
2023-09-2021 绝对定位，固定定位
position:relativeposition:absolute;posion:fixed;<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{height:1000px;
2023-08-24Vue【原创】下划线动态效果按钮，一般按钮模式，开关切换模式。
1.lilo-icon-button一般按钮模式：1<template>2<divclass="icon-button":style="{color:font.color}"@click="onclick">3<i:class="[icon.type]":style="{color:icon.color,font
2023-08-17html、css、js实现的一个简单计算器
title:html、css、js实现的一个简单计算器date:2023-07-1721:51:46categories:CTF-Web入门description:简易计算器主要代码来自runoob的计算器示例，只是精简了一下，把在js里监听完成的清除输入区也写成了一个函数，点击按钮的时候就自动调用了。这里面是有clear函数的，导致我
2023-05-07FreeCodeCamp-通过建立营养标签来学习排版
index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>NutritionLabel</title><linkhref="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800"
2023-03-16纯css图标
/*对号*/.gou{width:9px;height:18px;border-right:2pxsolid#f39800;border-bottom:2pxsolid#f39800;transform:rotate(40deg);}/*
2023-03-082023-3-8 #43 当视界再度被光占据我误以为又是只在梦境上演的须臾
251P9139[THUPC2023初赛]喵了个喵II场上以为是一个数学题，结果竟然是这种题！！题意相当于将相同的数配对，使得所有pair排序后两维均递增，那么就是不存在两个pair有包
2023-03-03边框宽度
边框宽度您可以通过border-width属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如2px或0.1em(单位为px,pt,cm,em等)，或者使用3个关键字之一，
2023-02-28border出现虚边问题解决
当我们只给元素设置了border-top，没有设置其他边框的时候，如果我们使用了border-radius会出现虚边的情况，如下所示：css代码：div{width:100px;height:100px;border-top:2pxsoli
2023-02-13table 布局
rowspan行扩展rowspan="2"表示占据两行的高度colspan列扩展colspan="2"表示占据两列的宽度<!DOCTYPEhtml><html><head><ti
2023-02-13猴游脚本给百度文库加阴影和圆角
0.2更新隐藏下载app蒙版newoldlink//==UserScript==//@nameAddniceroundedcornersandshadows
2023-01-23css inset属性
inset属性说明如下：inset属性用作定位元素的top、right、bottom、left这些属性的简写。类似于margin和
2023-01-15css inset属性
inset属性说明如下：inset属性用作定位元素的top、right、bottom、left这些属性的简写。类似于margin和padding属性，依照“上右下左”的顺序。举个例子：inset:0;
2023-01-05CSS - 设置边框设置边框的宽度，类型，颜色，复合写法，设置边框是否占据额外的空间
1.设置边框的宽度/*同时设置上下左右边框*/border-width:2px;/*设置上下左右边框*/border-width:2px2px;/*设置上左右下边框*/border-width:2px1px2px