【AI创造营】科幻穿越星座能力者

该项目利用PaddleNLP的文本匹配和对话闲聊模型,结合Wechaty构建微信机器人,为12星座用户提供穿越科幻剧的专属超能力、今日运势查询及闲聊服务。通过阿里云服务器部署,实现微信扫码登录交互,支持星座超能力匹配、运势接口调用和GPT模型闲聊功能。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜

【ai创造营】科幻穿越星座能力者 - 创想鸟

12星座若穿越科幻剧,会拥有什么超能力呢?快来迎接你的专属超能力吧!

现在很多年轻人都喜欢看科幻剧,像是复仇者系列,里面有很多英雄、超能力者,这些人都是我们的青春与情怀,那么12星座若穿越科幻剧,会分别拥有什么超能力呢?利用paddle提供的文本匹配和对话闲聊模型结合wechaty进行构建除了获得专属超能力外,还可以查看今日运势,外加寂寞无聊时找个“算命大师”聊聊天 【AI创造营】科幻穿越星座能力者 - 创想鸟            

效果展示

【AI创造营】科幻穿越星座能力者 - 创想鸟 【AI创造营】科幻穿越星座能力者 - 创想鸟 【AI创造营】科幻穿越星座能力者 - 创想鸟        

B站视频链接

       

https://www.bilibili.com/video/BV1PL4y1v7nf

Github链接

https://github.com/27182812/paddle-wechaty-Zodiac

本项目的实现过程

云服务器部分

参考https://aistudio.baidu.com/aistudio/projectdetail/1836012

我用的阿里云的云服务器,也可以考虑其他云服务或者是外网可访问的服务器资源。

进入服务器终端,在终端输入以下命令(注:确保输入的端口是对外开放的,WECHATY_TOKEN请填写自己的token)

In [ ]

$ apt update$ apt install docker.io$ docker pull wechaty/wechaty:latest$ export WECHATY_LOG="verbose"$ export WECHATY_PUPPET="wechaty-puppet-wechat"$ export WECHATY_PUPPET_SERVER_PORT="8080"$ export WECHATY_TOKEN="puppet_padlocal_xxxxxx" # 这里输入你自己的token$ docker run -ti --name wechaty_puppet_service_token_gateway --rm -e WECHATY_LOG -e WECHATY_PUPPET -e WECHATY_TOKEN -e WECHATY_PUPPET_SERVER_PORT -p "$WECHATY_PUPPET_SERVER_PORT:$WECHATY_PUPPET_SERVER_PORT" wechaty/wechaty:latest

   

输入网址: https://api.chatie.io/v0/hosties/xxxxxx (后面的xxxxxx是自己的token),如果返回了服务器的ip地址以及端口号,就说明运行成功了

小鸽子助手 小鸽子助手

一款集成于WPS/Word的智能写作插件

小鸽子助手 55 查看详情 小鸽子助手

运行后会输出一大堆东西,找到一个Online QR Code: 的地址点击进去,会出现二维码,微信扫码登录,最终手机上显示桌面微信已登录,即可。

环境安装

In [ ]

!pip install -U paddlepaddle -i https://mirror.baidu.com/pypi/simple!python -m pip install --upgrade paddlenlp -i https://pypi.org/simple!pip install --upgrade pip!pip install --upgrade sentencepiece !pip install wechaty

   

文本匹配部分

文本语义匹配是NLP最基础的任务之一,简单来说就是判断两段文本的语义相似度。应用场景广泛,比如搜索引擎、智能问答、知识检索、信息流推荐等。

为什么要用上这个功能呢,因为如果我们直接基于关键词匹配去判断用户需求的话,可能会出现理解错误的情况。比如如果用户输入“我可讨厌星座了”,但是聊天机器人可能还是会给用户展示星座超能力;如果直接限于关键词“星座”严格匹配的话,那用户如果不小心多输入一个字或者标点符号都不能实现想要的功能,太不友好了。因此本项目利用文本匹配技术来判断用户是否真实需要查看星座未来超能力的功能。

本次项目基于 PaddleNLP,使用百度开源的预训练模型 ERNIE1.0,构建语义匹配模型,来判断 2 个文本语义是否相同。

从头训练一个模型的关键步骤有数据加载、数据预处理、模型搭建、模型训练和评估,具体可参照https://aistudio.baidu.com/aistudio/projectdetail/1972174, 在这我们就直接调用已经训练好的语义匹配模型进行应用。

下载已经训练好的语义匹配模型, 并解压In [ ]

! wget https://paddlenlp.bj.bcebos.com/models/text_matching/pointwise_matching_model.tar! tar -xvf pointwise_matching_model.tar

   具体代码部分(match.py文件)In [ ]

import numpy as npimport osimport timeimport paddleimport paddle.nn.functional as Ffrom paddlenlp.datasets import load_datasetimport paddlenlp# 为了后续方便使用,我们给 convert_example 赋予一些默认参数from functools import partialfrom paddlenlp.data import Stack, Pad, Tupleos.environ["CUDA_VISIBLE_DEVICES"] = "1"tokenizer = paddlenlp.transformers.ErnieTokenizer.from_pretrained('ernie-1.0')import paddle.nn as nn# 我们基于 ERNIE1.0 模型结构搭建 Point-wise 语义匹配网络# 所以此处先定义 ERNIE1.0 的 pretrained_modelpretrained_model = paddlenlp.transformers.ErnieModel.from_pretrained('ernie-1.0')class PointwiseMatching(nn.Layer):    # 此处的 pretained_model 在本例中会被 ERNIE1.0 预训练模型初始化    def __init__(self, pretrained_model, dropout=None):        super().__init__()        self.ptm = pretrained_model        self.dropout = nn.Dropout(dropout if dropout is not None else 0.1)        # 语义匹配任务: 相似、不相似 2 分类任务        self.classifier = nn.Linear(self.ptm.config["hidden_size"], 2)    def forward(self,                input_ids,                token_type_ids=None,                position_ids=None,                attention_mask=None):        # 此处的 Input_ids 由两条文本的 token ids 拼接而成        # token_type_ids 表示两段文本的类型编码        # 返回的 cls_embedding 就表示这两段文本经过模型的计算之后而得到的语义表示向量        _, cls_embedding = self.ptm(input_ids, token_type_ids, position_ids,                                    attention_mask)        cls_embedding = self.dropout(cls_embedding)        # 基于文本对的语义表示向量进行 2 分类任务        logits = self.classifier(cls_embedding)        probs = F.softmax(logits)        return probsdef convert_example(example, tokenizer, max_seq_length=512, is_test=False):    query, title = example["query"], example["title"]    encoded_inputs = tokenizer(        text=query, text_pair=title, max_seq_len=max_seq_length)    input_ids = encoded_inputs["input_ids"]    token_type_ids = encoded_inputs["token_type_ids"]    if not is_test:        label = np.array([example["label"]], dtype="int64")        return input_ids, token_type_ids, label    # 在预测或者评估阶段,不返回 label 字段    else:        return input_ids, token_type_idsdef read_text_pair(data_path):    """Reads data."""    with open(data_path, 'r', encoding='utf-8') as f:        for line in f:            data = line.rstrip().split(" ")            # print(data)            # print(len(data))            if len(data) != 2:                continue            yield {'query': data[0], 'title': data[1]}def predict(model, data_loader):    batch_probs = []    # 预测阶段打开 eval 模式,模型中的 dropout 等操作会关掉    model.eval()    with paddle.no_grad():        for batch_data in data_loader:            input_ids, token_type_ids = batch_data            input_ids = paddle.to_tensor(input_ids)            token_type_ids = paddle.to_tensor(token_type_ids)            # 获取每个样本的预测概率: [batch_size, 2] 的矩阵            batch_prob = model(                input_ids=input_ids, token_type_ids=token_type_ids).numpy()            # print("111",batch_prob)            batch_probs.append(batch_prob)        batch_probs = np.concatenate(batch_probs, axis=0)        return batch_probs# 预测数据的转换函数    # predict 数据没有 label, 因此 convert_exmaple 的 is_test 参数设为 Truetrans_func = partial(    convert_example,    tokenizer=tokenizer,    max_seq_length=512,    is_test=True)# 预测数据的组 batch 操作# predict 数据只返回 input_ids 和 token_type_ids,因此只需要 2 个 Pad 对象作为 batchify_fnbatchify_fn = lambda samples, fn=Tuple(    Pad(axis=0, pad_val=tokenizer.pad_token_id),  # input_ids    Pad(axis=0, pad_val=tokenizer.pad_token_type_id),  # segment_ids): [data for data in fn(samples)]pretrained_model = paddlenlp.transformers.ErnieModel.from_pretrained("ernie-1.0")model = PointwiseMatching(pretrained_model)# 刚才下载的模型解压之后存储路径为 ./pointwise_matching_model/ernie1.0_base_pointwise_matching.pdparamsstate_dict = paddle.load("pointwise_matching_model/ernie1.0_base_pointwise_matching.pdparams")model.set_dict(state_dict)def start():    # 加载预测数据    predict_ds = load_dataset(        read_text_pair, data_path="./predict.txt", lazy=False)    # for i in predict_ds:    #     print(i)    batch_sampler = paddle.io.BatchSampler(predict_ds, batch_size=32, shuffle=False)    # 生成预测数据 data_loader    predict_data_loader = paddle.io.DataLoader(        dataset=predict_ds.map(trans_func),        batch_sampler=batch_sampler,        collate_fn=batchify_fn,        return_list=True)    # 执行预测函数    y_probs = predict(model, predict_data_loader)    # 根据预测概率获取预测 label    y_preds = np.argmax(y_probs, axis=1)    print(y_preds)    return y_preds[-1]    # predict_ds = load_dataset(    #     read_text_pair, data_path="./predict.txt", lazy=False)    #    # for idx, y_pred in enumerate(y_preds):    #     text_pair = predict_ds[idx]    #     text_pair["pred_label"] = y_pred    #     print(text_pair)if __name__ == '__main__':    start()

   

对话闲聊部分

近年来,人机对话系统受到了学术界和产业界的广泛关注。开放域对话系统希望机器可以流畅自然地与人进行交互,既可以进行日常问候类的闲聊,又可以完成特定功能。随着深度学习技术的不断发展,聊天机器人变得越来越智能。我们可以通过机器人来完成一些机械性的问答工作,也可以在闲暇时和智能机器人进行对话,他们的出现让生活变得更丰富多彩。本项目载入该功能,也是希望人们可以在寂寞无聊的时候有个聊天的小伙伴,虽然有时候他可能会不知所云,但他永远会在那等你。具体代码部分(chat.py文件)In [ ]

from paddlenlp.transformers import GPTChineseTokenizer# 设置想要使用模型的名称model_name = 'gpt-cpm-small-cn-distill'tokenizer = GPTChineseTokenizer.from_pretrained(model_name)import paddlefrom paddlenlp.transformers import GPTForPretraining# 一键加载中文GPT模型model = GPTForPretraining.from_pretrained(model_name)def chat(user_input):    #user_input = "花间一壶酒,独酌无相亲。举杯邀明月,"    # 将文本转为ids    input_ids = tokenizer(user_input)['input_ids']    #print(input_ids)    # 将转换好的id转为tensor    input_ids = paddle.to_tensor(input_ids, dtype='int64').unsqueeze(0)    #print(input_ids)    # 调用生成API升成文本    ids, scores = model.generate(                    input_ids=input_ids,                    max_length=36,                    min_length=1,        decode_strategy='sampling',        top_k=5,    num_return_sequences=3)    # print(ids)    # print(scores)    generated_ids = ids[0].numpy().tolist()    # 使用tokenizer将生成的id转为文本    generated_text = tokenizer.convert_ids_to_string(generated_ids)    print(generated_text)    return generated_text.rstrip(',')if __name__ == '__main__':    chat("你好啊,宝贝")

   PaddleNLP针对生成式任务提供了generate()函数,内嵌于PaddleNLP所有的生成式模型。支持Greedy Search、Beam Search和Sampling解码策略,用户只需指定解码策略以及相应的参数即可完成预测解码,得到生成的sequence的token ids以及概率得分。PaddleNLP对于各种预训练模型已经内置了相应的tokenizer,指定想要使用的模型名字即可加载对应的tokenizer。PaddleNLP提供了GPT,UnifiedTransformer等中文预训练模型,可以通过预训练模型名称完成一键加载。这次用的是一个小的中文GPT预训练模型。其他预训练模型请参考模型列表。

主函数部分

main.py星座今日运势需要自己申请一下接口,网址:星座运势,将你申请到的APIKEY填入values[‘key’]运行本函数的时候,不要忘记云服务器也要开启哦,这样你的微信号才能变身为算命大师哦,不然只能在本地感受了。In [ ]

import osimport cv2import asyncioimport numpy as npimport paddlehub as hubimport jsonimport urllib.parseimport urllib.requestimport matchimport chatfrom wechaty import (    Contact,    FileBox,    Message,    Wechaty,    ScanStatus,)os.environ['WECHATY_PUPPET'] = "wechaty-puppet-service"os.environ['WECHATY_PUPPET_SERVICE_TOKEN'] = "puppet_padlocal_XXXXXXXX" ## 你自己的tokendef chinese_shuxiang(year):    shuxiang_map = {        u'鼠': 1900,        u'牛': 1901,        u'虎': 1902,        u'兔': 1903,        u'龙': 1904,        u'蛇': 1905,        u'马': 1906,        u'羊': 1907,        u'猴': 1908,        u'鸡': 1909,        u'狗': 1910,        u'猪': 1911}    for k, v in shuxiang_map.items():        if (year % v % 12) == 0:            return kdef xingzuo(month, day):    xingzuo_map = {        u'白羊座': [(3, 21), (4, 20)],        u'金牛座': [(4, 21), (5, 20)],        u'双子座': [(5, 21), (6, 21)],        u'巨蟹座': [(6, 22), (7, 22)],        u'狮子座': [(7, 23), (8, 22)],        u'处女座': [(8, 23), (9, 22)],        u'天秤座': [(9, 23), (10, 22)],        u'天蝎座': [(10, 23), (11, 21)],        u'射手座': [(11, 23), (12, 22)],        u'水瓶座': [(1, 20), (2, 18)],        u'双鱼座': [(2, 19), (3, 20)]    }    for k, v in xingzuo_map.items():        if v[0] <= (month, day) = (12, 22) or (month, day) <= (1, 19):        return u'摩羯座'def super(xingzuo):    xingzuosuper_map = {        u'白羊座': "绿巨人n白羊座的人本身就是,比较容易冲动的,是个直肠子的孩子,所以若是穿越科幻剧了,就会拥有绿巨人一样的超能力,一发怒就变身的那种,而且能力随着怒气值的增加而更强大。",        u'金牛座': "变大变小n金牛座可爱能吃,胃口很好的他们,经常能把小肚子吃得鼓鼓的,所以若是穿越科幻剧了,就会拥有蚁人那样的,变大变小的能力,可不要小瞧这个超能力哦!",        u'双子座': "星爵n双子座的人,嘴巴很是能说会道的,聊天能把你逗笑,吵架能把你气哭的那种,所以若是穿越科幻剧了,就会拥有像星爵一样的超能力,以神明之躯比肩凡人,“嘴炮”无敌,不过很可爱!",        u'巨蟹座': "百发百中n巨蟹座的人,大多眼神都是很好使的,视力很高,而且对色彩捕捉能力也很强,所以若是穿越科幻剧了,就会拥有像鹰眼一样的超能力,可谓是百发百中的!",        u'狮子座': "吹口哨n狮子座最是刀子嘴豆腐心了,明明就是个特别善良的人,但为了要面子,硬是把自己武装成狠人,所以若是穿越科幻剧了,就会成为勇度那样的超能力,吹吹口哨,就能放倒敌人。",        u'处女座': "近身战n处女座的人是很追求完美的,对自己要求也特别严苛,做任何事情,都必须做到最完美为止,所以若是穿越科幻剧了,就会拥有黑豹那样的超能力,不仅聪明智慧,而且近身战很强,动作行云流水~",        u'天秤座': "无限复活n天秤座的人,若是穿越科幻剧了,就会拥有小贱贱,那样的超能力,哪怕还剩一丢丢细胞,都可以无限复活的那种,因为天秤是最能绝地逢生的人了,他们不会被压垮,是无论如何都相信希望的人。",        u'天蝎座': "魔法n天蝎座的人要是对一件事情很感兴趣的话,那真的会彻夜不睡,去研究那个事情的,所以若是穿越科幻剧了,就会拥有像奇异博士那样的超能力,沉醉于学习魔法,最终也会成为强大的魔法师。",        u'射手座': "高超智慧n射手座的人是非常聪明的哦,逻辑思维能力和发散性思维能力都是数一数二的那种,因此数学特别棒的他们,若是穿越科幻剧了,就会凭借自己的高超智慧,成为像钢铁侠那样的人。",        u'摩羯座': "雷神n摩羯座的人内心信念是非常强大的,认定一件事情了,就会改变的那种,所以若是穿越科幻剧了,就会拥有像雷神那样的超能力,能够召唤雷电,而且正义柔情,是位很好的超能力者。",        u'水瓶座': "镭射眼n水瓶座的人,一般都拥有着一双犀利的眼睛,所以若是穿越科幻剧了,就会拥有像镭射眼那样的超能力,眼睛看到哪,就可以破坏哪里。",        u'双鱼座': "心灵感应n双鱼座的人第六感是非常强烈的,而且与人交往很是细心,天生就会洞察别人的心思,所以若是穿越科幻剧了,就会拥有心灵感应的能力,强者还能掌控别人的思绪呢!"    }    return xingzuosuper_map[xingzuo]def img(xingzuo):    xingzuofig_map = {        u'白羊座': "1",        u'金牛座': "2",        u'双子座': "3",        u'巨蟹座': "4",        u'狮子座': "5",        u'处女座': "6",        u'天秤座': "7",        u'天蝎座': "8",        u'射手座': "9",        u'摩羯座': "10",        u'水瓶座': "11",        u'双鱼座': "12"    }    # 图片保存的路径    img_path = './imgs/' + xingzuofig_map[xingzuo] +'.png'    return img_pathdef xzyunshi(xingzuo):    xingzuoen_map = {        u'白羊座': "aries",        u'金牛座': "taurus",        u'双子座': "gemini",        u'巨蟹座': "cancer",        u'狮子座': "leo",        u'处女座': "virgo",        u'天秤座': "libra",        u'天蝎座': "scorpio",        u'射手座': "sagittarius",        u'摩羯座': "capricorn",        u'水瓶座': "aquarius",        u'双鱼座': "pisces"    }    url = "http://api.tianapi.com/txapi/star/index"    # 定义请求数据,并且对数据进行赋值    values = {}    values['key'] = 'XXXX' ## 你自己申请的APIKEY    values['astro'] = xingzuoen_map[xingzuo]    # 对请求数据进行编码    data = urllib.parse.urlencode(values).encode('utf-8')    print(type(data))  # 打印    print(data)  # 打印b'status=hq&token=C6AD7DAA24BAA29AE14465DDC0E48ED9'    # 若为post请求以下方式会报错TypeError: POST data should be bytes, an iterable of bytes, or a file object. It cannot be of type str.    # Post的数据必须是bytes或者iterable of bytes,不能是str,如果是str需要进行encode()编码    data = urllib.parse.urlencode(values)    print(type(data))  # 打印    print(data)  # 打印status=hq&token=C6AD7DAA24BAA29AE14465DDC0E48ED9    # 将数据与url进行拼接    req = url + '?' + data    # 打开请求,获取对象    response = urllib.request.urlopen(req)    print(type(response))  # 打印    # 打印Http状态码    print(response.status)    if response.status == 200:        the_page = response.read()        rsts = eval(the_page.decode("utf-8"))        #print(rsts["newslist"])        yunshi = []        yunshi.append('综合指数:' + rsts["newslist"][0]["content"])        yunshi.append('爱情指数:' + rsts["newslist"][1]["content"])        yunshi.append('工作指数:' + rsts["newslist"][2]["content"])        yunshi.append('财运指数:' + rsts["newslist"][3]["content"])        yunshi.append('健康指数:' + rsts["newslist"][4]["content"])        yunshi.append('幸运颜色:' + rsts["newslist"][5]["content"])        yunshi.append('幸运数字:' + rsts["newslist"][6]["content"])        yunshi.append('贵人星座:' + rsts["newslist"][7]["content"])        yunshi.append('今日概述:' + rsts["newslist"][8]["content"])        finalstr = ""        for i in yunshi:            finalstr += i+'n'        return finalstrdef match_input(input):    print(input)    with open("./predict.txt", "w", encoding="utf-8") as f:        f.write(input + " 查星座n")    rst = match.start()    return int(rst)userstate = '0'async def on_message(msg: Message):    global userstate    print(msg.talker().name)    if msg.talker().name == '271828':        # print(msg.talker().name)        print("11",userstate)        if userstate == '1-1':            str = msg.text()            print(str)            rst = xingzuo(int(str[0]), int(str[2]))            await msg.talker().say('你是' + rst)            selfsuper = super(rst)            await msg.talker().say('你星座的超能力是' + selfsuper)            imgpath = img(rst)            file_box_xz = FileBox.from_file(imgpath)            await msg.talker().say(file_box_xz)            yunshi = xzyunshi(rst)            print(yunshi)            userstate = '0'            await msg.say("你的今日运势:n" + yunshi)        rst = match_input(msg.text())        if rst == 1:            userstate = '1-1'            await msg.talker().say('请说出你的生日,格式如5.7、5月7日')            await msg.say('不需要加年份哦')        else:            if msg.text() == 'ding':                await msg.say('这是自动回复: dong dong dong')            if msg.text() == 'hi' or msg.text() == '你好':                await msg.say(                    '这是自动回复: 现在很多年轻人都爱看科幻剧的,像是复仇者啊,里面有很多的英雄、超能力者,这些人都是我们的青春与情怀,那么12星座若穿越科幻剧了,会分别拥有什么超能力呢?n机器人目前的功能是n- 收到"属相", 根据提示回复你的属相n- 收到"星座", 根据提示回复你的星座和今日运势还有在科幻世界你的超能力哦')            if msg.text() == '属相':                userstate = '2-1'                await msg.say('请输入你的出生年份,请保持纯数字,如1998')            if userstate == '2-1':                year = msg.text()                print(year)                rst = chinese_shuxiang(int(year))                await msg.say('你属' + rst)                userstate = '0'            else:                rst = chat.chat(msg.text())                await msg.say(rst)async def on_scan(        qrcode: str,        status: ScanStatus,        _data,):    print('Status: ' + str(status))    print('View QR Code Online: https://wechaty.js.org/qrcode/' + qrcode)async def on_login(user: Contact):    print(user)async def main():    # 确保我们在环境变量中设置了WECHATY_PUPPET_SERVICE_TOKEN    if 'WECHATY_PUPPET_SERVICE_TOKEN' not in os.environ:        print('''            Error: WECHATY_PUPPET_SERVICE_TOKEN is not found in the environment variables            You need a TOKEN to run the Python Wechaty. Please goto our README for details            https://github.com/wechaty/python-wechaty-getting-started/#wechaty_puppet_service_token        ''')    bot = Wechaty()    bot.on('scan', on_scan)    bot.on('login', on_login)    bot.on('message', on_message)    await bot.start()    print('[Python Wechaty] Ding Dong Bot started.')asyncio.run(main())

   

以上就是【AI创造营】科幻穿越星座能力者的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/740568.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月25日 15:03:10
下一篇 2025年11月25日 15:03:35

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何解决本地图片在使用 mask JS 库时出现的跨域错误?

    如何跨越localhost使用本地图片? 问题: 在本地使用mask js库时,引入本地图片会报跨域错误。 解决方案: 要解决此问题,需要使用本地服务器启动文件,以http或https协议访问图片,而不是使用file://协议。例如: python -m http.server 8000 然后,可以…

    2025年12月24日
    200
  • 如何用 CSS 实现微信输入法进度条按钮效果?

    如何在 css 中呈现微信输入法的进度条按钮效果? 问题:微信输入法中的进度条按钮具有独特的外观。如何使用 css 来实现这种效果? 答案:要实现微信输入法的进度条按钮效果,可以使用以下 css 属性的组合: linear-gradient:创建渐变效果。background-position:控制…

    2025年12月24日
    300
  • 微信小程序文本省略后如何避免背景色溢出?

    去掉单行文本溢出多余背景色 在编写微信小程序时,如果希望文本超出宽度后省略显示并在末尾显示省略号,但同时还需要文本带有背景色,可能会遇到如下问题:文本末尾出现多余的背景色块。这是因为文本本身超出部分被省略并用省略号代替,但其背景色依然存在。 要解决这个问题,可以采用以下方法: 给 text 元素添加…

    2025年12月24日
    000
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信