CSS
fighting Ably!
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS——css+javascript轮播图/弹幕
1.transform方式实现轮播图1.1 实现效果1.2 实现原理一个包含轮播内容的容器,超出容器部分隐藏容器内多个子元素,flex布局子元素在固定时间内移动固定距离1.3 代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-06-22 16:41:16 · 1330 阅读 · 2 评论 -
CSS——两边通屏横线,中间是内容标题
1.实现效果2.实现思路一个容器,包含内部所有内容container三个元素,左边,右边为线,中间是title内容标题字数不固定,所以宽度不可限制,或者太长需要换行根据场景进行设置flex布局,不可压缩的设置flex-shrink:0;3.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C原创 2021-06-21 17:07:28 · 557 阅读 · 0 评论 -
CSS——一个圆点绕着另一个圆点转动(animation动画中rotate使用)
1.要实现的效果2. 实现思路一个容器画出运动轨迹,设置宽高和border-radius,并relative定位一个中心点,绝对定位至圆心处一个移动点,固定在某处,跟着外部容器一起转动animation + transform:rotate的使用3.实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="原创 2021-06-21 16:53:13 · 5353 阅读 · 0 评论 -
CSS——按钮呼吸效果
1.效果演示2.实现思路定义一个按钮呼吸,即宽高在一定时间内都有一定的缩放效果我们可以使用transform中scale属性3.代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp转载 2021-06-21 15:57:05 · 5241 阅读 · 2 评论 -
css控制文本显示行数,超出隐藏
使用代码: height: 71px; -webkit-line-clamp: 4; // 4行 overflow: hidden; // 超出隐藏 可以设置scroll滑动 text-overflow: ellipsis; // 隐藏部分... display: -webkit-box; -webkit-box-orient: vertical;详细原文链接...转载 2021-05-21 14:30:39 · 822 阅读 · 0 评论 -
CSS-使用Animation实现弹幕动画效果
1.需求在某个位置上展示一些弹幕,弹幕的样式需求如下:,在父组件中传入数据源来进行弹幕数据的显示。2.1 HTML2.2.1 父组件<BaberrageVertical :customers="barrageList" class="helper-to原创 2021-03-12 18:02:06 · 1346 阅读 · 0 评论
分享