css写个三角形

news/2025/2/13 18:49:16/

点击三角形,展开或者收起内容

<template><div><div class="zhankai" @click="btn()">展开 <span :class="{'sanjiao':true,'rotate':flag}"></span></div><!-- 展示或者收起 --><el-collapse-transition><div v-show="flag">123321213321312</div></el-collapse-transition></div>
</template><script>
export default {data () {return {flag: true}},methods: {btn () {this.flag = !this.flag}}
}
</script><style lang="less" scoped>
.zhankai {margin-left: 100px;position: relative;.sanjiao {width: 0;height: 0;border-style: solid;border-width: 0 4px 6px 4px;border-color: transparent transparent #333 transparent;position: absolute;left: 36px;top: 50%;transform: translate(-50%, -50%);transition: transform 0.3s ease-in-out;}.rotate {transform: translate(-50%, -50%) rotate(180deg);}&:hover {color: #1890ff;.sanjiao {border-color: transparent transparent #1890ff transparent;}// 只要滑过三角形就旋转,放开这个代码// .rotate {//   transform: translate(-50%, -50%) rotate(180deg);// }}
}
</style>


http://www.ppmy.cn/news/1185969.html

相关文章

Linux内核显示、加载、卸载等超实用命令

内核模块是 Linux 系统中一种特殊的可执行文件&#xff0c;它可以在运行时动态地加载到内核中或卸载出内核&#xff0c;从而实现内核的扩展和优化。内核模块操作相关的命令主要有以下几种&#xff1a; 1.lsmod命令 列出当前已加载的内核模块及其依赖关系和使用情况。 [rootl…

计算机操作系统重点概念整理-第一章 计算机系统概述【期末复习|考研复习】

第一章 计算机系统概述 【期末复习|考研复习】 计算机操作系统系列文章传送门&#xff1a; 第一章 计算机系统概述 第二章 进程管理 第三章 进程同步 第四章 内存管理 第五章 文件管理 第六章 输出输出I/O管理 文章目录 第一章 计算机系统概述 【期末复习|考研复习】前言一、计…

QTcpServer简单的TCP服务器连接

1、简介 简单实现控制TCP服务器获取连接的套接字。点击断开服务器即可关闭所有连接&#xff0c;最大连接数量为5个。 声明源文件 #include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//设置固定大小setFixedSize(1024,600);b…

C++进阶语法——智能指针【学习笔记(五)】

文章目录 1、智能指针简介1.1 原始指针&#xff08;raw pointer&#xff09;的⼀些问题1.2 智能指针&#xff08;smart pointers&#xff09; 2、智能指针&#xff08;smart pointers&#xff09;——unique_ptr2.1 unique_ptr 的声明2.2 unique_ptr 的函数2.3 ⾃定义类型使⽤ …

管理类联考——数学——汇总篇——知识点突破——代数——整式分式——记忆

文章目录 考点记忆/考点汇总——按大纲 整体目录大纲法记忆宫殿法绘图记忆法 局部数字编码法归类记忆法重点记忆法歌决记忆法谐音记忆法理解记忆法比较记忆法转图像记忆法可视化法 本篇思路&#xff1a;根据各方的资料&#xff0c;比如名师的资料&#xff0c;按大纲或者其他方式…

读取sqlite数据库的2种方式

0x00 背景 做项目需要用到sqlite数据库&#xff0c;这里提供2种方式查询数据。 0x01 命令行读取 yum install sqlite-devel 安装数据库。 访问某个数据库 sqlite3 xxx.db 查看tables .tables 查询表(这里的sql语法和mysql差不多) select * from history order by seq desc …

故障诊断模型 | Maltab实现LSTM长短期记忆神经网络故障诊断

文章目录 效果一览文章概述模型描述源码设计参考资料效果一览 文章概述 故障诊断模型 | Maltab实现LSTM长短期记忆神经网络故障诊断 模型描述 长短记忆神经网络——通常称作LSTM,是一种特殊的RNN,能够学习长的依赖关系。 他们由Hochreiter&Schmidhuber引入,并被许多人进行了…

Linux命令:创建、查看、删除定时任务

Linux命令创建定时任务&#xff1a;每天早上9:13执行/home/test.sh文件并将执行结果重定向到文件&#xff0c; 查看定时任务&#xff0c; 查看定时任务所在位置&#xff0c; 删除定时任务 创建定时任务&#xff1a; 输入命令 crontab -e 打开编辑器 在最后一行添加以下内容…