随笔分类 - CSS3

CSS动画以及常见特效

摘要：首先我们看下我们有时候需要在官网或者列表中给元素添加一个动画使元素能够平滑的出现在我们的视野中。如上图所示，我们在vue中可以自定义指令，当我们需要的时候可以直接使用。废话不多说直接上代码。首先我们创建一个vSlideIn.ts文件 import { DirectiveBinding } fro 阅读全文

posted @ 2023-11-14 15:46 小不点灬阅读(307) 评论(0) 推荐(1) 编辑

input el-input 使用自动填充 autocomplete 后样式修改

摘要：//element ui vue2 的用法::v-deep .el-input__inner:-webkit-autofill { transition: background-color 50000s ease-in-out 0s; -webkit-text-fill-color: #fff; / 阅读全文

posted @ 2022-09-19 17:45 小不点灬阅读(1195) 评论(0) 推荐(0) 编辑

css 浮动定位

摘要：浮动元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。语法: float . left . right . none(默认) 注意： 1. 浮动的元素要有父元素 2. 浮动后的元素类似元素行内块元素,如果没有设置宽高,它的宽等同于内容的宽高.即使行内元素阅读全文

posted @ 2020-07-02 20:39 小不点灬阅读(261) 评论(0) 推荐(0) 编辑

CSS 三大特性层叠继承优先级

摘要：css三大特性层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上，相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则继承性: 子标签会继承父标签的某些样式一般以font,line,color,text,list,都能继承备注 : a标签不能继阅读全文

posted @ 2020-07-01 12:26 小不点灬阅读(341) 评论(0) 推荐(0) 编辑

css 实现动态二级菜单

摘要：动态实现简单的二级菜单当鼠标放到一级标签上时，鼠标会变成小手的形状展示二级菜单，源码如下，复制即可直接使用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 阅读全文

posted @ 2020-06-29 20:15 小不点灬阅读(1145) 评论(0) 推荐(0) 编辑

web CSS3 实现3D动态翻牌效果

摘要：CSS 3D动画旋转阅读全文

posted @ 2020-06-24 16:34 小不点灬阅读(724) 评论(0) 推荐(1) 编辑

web CSS3 实现3D旋转木马

摘要：3D 旋转木马是CSS中常见的特效之一，旋转木马可以有多种方法实现，这里我使用纯CSS实现这种动画的效果。简要介绍一下重点 transform: rotateY(60deg) translateZ(300px);这是必须先旋转后沿着z轴移动，不然会错乱，translateZ是沿着Z轴移动，其值越阅读全文

posted @ 2020-06-24 16:31 小不点灬阅读(1178) 评论(0) 推荐(0) 编辑

纯 CSS 实现滑动轮播图效果

摘要：只使用css实现轮播图简单的操作 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial 阅读全文

posted @ 2020-06-22 15:38 小不点灬阅读(1266) 评论(0) 推荐(0) 编辑