html css侧边展开收起,css实现侧边展开收起

**前言：**因为突然想研究研究侧边栏滑动展开收起怎么做的，就去baidu了一下transition。

先来看一下我的代码：

详情

内容1

.detail {

position: fixed;

right: -100px;

transition: right 1s;

}

.detail:hover {

right: 0;

}

.div1 {

background-color: green;

border-top-left-radius: 10%;

border-bottom-left-radius: 10%;

width: 50px;

height: 30px;

float: left;

}

.div2 {

background-color: green;

width: 100px;

height: 100px;

float: left;

}

我先把整个div都移到屏幕外面，只留下详情显示出来，当鼠标悬浮到详情上的时候，把righ变成0，就可以从右边出来了，当然直接出来肯定不好看，就加了一个过渡动画transition，使其缓慢的滑动出来

解决安卓滑动卡顿

安卓滑动会卡顿主要是因为transition渲染margin，left，right，top，bottom的时候会计算很多值，具体计算了什么可以去baidu一下，这里就讲解决办法。

当transition计算margin，left，right，top，bottom类的值时会卡顿，把方向移动换成transform，再放在transition中就可以解决卡顿。

/**这是控制左右移动*/

.rule {

transform: translateX(80vw);

transition: transform 1s;

}

.rule2 {

transform: translateX(2vw);

transition: transform 1s;

}

/**以下是内容布局*/

.rule-title {

background-color: #F4A627;

border-top-left-radius: 25px;

border-bottom-left-radius: 25px;

text-align: center;

line-height: 30px;

width: 20vw;

height: 30px;

float: left;

}

.rule-detail {

padding: 0 6px;

background-color: #F4A627;

width: 75vw;

height: 100%;

float: left;

line-height: 30px;

border-bottom-left-radius: 5px;

}

html css侧边展开收起,css实现侧边展开收起相关推荐

html+css+js实现内容的收缩与展开
1.说明:设置指定高度,当内容超过事先设置的高度时,便会出现"查看更多"按钮,单击"查看更多"超出内容变回展开同时"查看更多"切换成&quo ...
html树状结构怎么展开,纯css实现树形结构
纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收缩以及复选框效果还得配合js来实现.其实展开和收缩就是一个点击元素其子元素隐藏和显示的切换.* ...
html导航栏横向展开,横向三级展开的CSS菜单
横向三级展开的CSS菜单 #nav, #nav ul {float:left; padding:0 0 5px 0; margin:0; list-style:none; font: 10px ver ...
【Hello CSS】第一章-CSS的语法与工作流
作者:陈大鱼头 github: KRISACHAN 在上一篇[Hello CSS]的序章CSS起源中介绍了CSS的诞生原因以及发展历史,了解了CSS的存在意义.从正篇篇开始将会正式开始介绍CSS这门语 ...
html 纯css 树形结构,纯css实现树形结构方法教程
本文主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希 ...
【CSS】537- 认真介绍 CSS 原理
作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 一.浏览器渲染开篇,我们还是不厌其烦的回顾一下浏览器的渲染过程,先上图: 正如上图所展示的,我们浏览器渲染过程分为了两条主线: 其一 ...
CSS奇思妙想—这里是CSS创造的世界！
CSS奇思妙想 -- 使用 CSS 创造艺术本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍 ...
CSS是什么？CSS样式规则
CSS是层叠样式表( Cascading Style Sheets ) 的简称,有时我们也会称之为CSS 样式表或级联样式表. CSS 是也是一种标记语言,最早CSS的出现,是为了补充HTML在页面布 ...
CSS基础知识(一) CSS入门
文章目录一.CSS使用场景二.CSS简介三.CSS规则四.CSS代码风格 1.样式格式书写 2.样式大小写 3.空格规范一.CSS使用场景美化网页,布局页面二.CSS简介 CSS是层叠样 ...
超细的CSS学习笔记（CSS详解）
复习CSS时记录的笔记. 从最基本的 CSS 概念开始,复习如何使用 CSS 同时控制多重网页的样式和布局.同时涉及最新版本 CSS3 的内容,掌握新的标准化组件. 文章目录一.CSS介绍 1.CS ...

html css侧边展开收起,css实现侧边展开收起

html css侧边展开收起,css实现侧边展开收起相关推荐

最新文章

热门文章