CSS3过渡应用
小米图标转换
transition:需要过渡的属性 花费时间 （运动曲线 何时开始）；
Tips：
1.第二个属性值必须跟上单位（s）
2.谁要过渡给谁加
图标转换最终效果：当鼠标划过图标时，缓慢转换成另一个图标
步骤
一、准备一个大盒子，大盒子里有一个小盒子，小盒子里再放两个单独放图标的小盒子
<body>
<section class="logo">
<div class="both">
<div class="left"></div>
<div class="right"></div>
</div>
</section>
</body>
二、给盒子设置合适的宽、高、外边距，小盒子与大盒子同高，同时小盒子的宽是大盒子的两倍
.logo {
width: 56px;
height: 56px;
margin: 20px auto;
background-color: rgb(255, 111, 55);
line-height: 56px;
border-radius: 16px;
}
.both {
width: 112px;
height: 56px;
font-family: 'icomoon';
font-size: 45px;
text-align: center;
}
三、给两个图标盒子添加浮动，使他们在小盒子中一行显示，同时设置合适的padding值，使其在转换时实现一个图标占据大盒子
.left,
.right {
float: left;
padding: 0 5px;
}
四、设置触发条件，当鼠标划过大盒子时，小盒子向左移动大盒子宽度的长度
.logo:hover .both {
margin-left: -56px;
}
五、为了实现更好的效果，给小盒子添加过渡使其图标转换更加自然。给大盒子添加溢出隐藏，使页面只显示一个图标
.logo {
width: 56px;
height: 56px;
margin: 20px auto;
background-color: rgb(255, 111, 55);
line-height: 56px;
border-radius: 16px;
overflow: hidden;
}
.both {
width: 112px;
height: 56px;
font-family: 'icomoon';
font-size: 45px;
text-align: center;
transition: all .7s;
}
CSS3过渡应用的更多相关文章
- CSS3过渡、变形和动画
1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{ text-decoration: n ...
- CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
- css3 过渡记
CSS3 过渡 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. t ...
- CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 请把鼠标移动到右侧的元素上: 浏览器支持 Internet E ...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...
- 【Demo】CSS3 过渡
CSS3 过渡transition 应用于宽度属性的过渡效果,时长为 2 秒: div { transition: width 2s; -webkit-transition: width 2s; /* ...
- CSS3 过渡、动画、多列、用户界面
CSS3 过渡.动画.多列.用户界面 transition过渡 transition: transition-property transition-duration transition-timin ...
- CSS3过渡与动画
一.CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -m ...
- css3过渡动画 transition
transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果. 要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间 例如 这是下面代码的预览界面预览界面 & ...
- CSS3 过渡transition 认识
其实,我一直觉得自己对新知识是以一种抵触的情绪在学习的.因为我总是习惯于将事情想得很复杂,所以也错过了很多美好的东西. 以前觉得CSS3的知识应该是很难的,很难理解的.但是我发现我觉得知识点很难,是因 ...
随机推荐
- Java系列教程-Spring 教程目录
Spring 教程目录 可参考MyBatis的官方文档也比较清楚 https://mybatis.org/mybatis-3/zh/getting-started.html 代码 目录 https:/ ...
- Python基础之异常定义
技术背景 在各类python的项目中,总会涉及到项目自身相关的一些约束条件.这些约束条件体现在,当用户输入的参数或者文件不符合项目要求时,就拒绝这个参数的输入并且播报出来,提醒用户自行修改,而这一过程 ...
- Topshelf一个用于使用.NET构建Windows服务框架
1 Topshelf是什么? Topshelf是用于托管使用.NET框架编写的Windows服务的框架.服务的创建得到简化,从而使开发人员可以创建一个简单的控制台应用程序,可以使用Topshelf将其 ...
- SpingCloud Alibaba实战（1：微服务与SpringCloud Alibaba）
1.什么是微服务? 微服务可谓是这几年比较热门的技术,从2017开始逐渐爆火,逐渐大大小小的公司纷纷将微服务技术引入并在实际业务中落地. 微服务的概念最早是在2014年由Martin Fowler和J ...
- 简单了解Git
目录 Git命令 如何将一个新建的文件添加到Git仓库 版本控制 本地的项目丢到Gitee上 代码修改以及推送步骤 分支管理 Git命令 1.git init创建git本地仓库 2.ls 查看 ...
- [Fundamental of Power Electronics]-PART II-8. 变换器传递函数-8.4 变换器传递函数的图形化构建
8.4 变换器传递函数的图形化构建 第7章推导出的buck变换器小信号等效电路模型在图8.55中再次给出.让我们用上一节的图解方法来构造该变换器的传递函数和端阻抗. Fig. 8.55 Small-s ...
- Python基础（十三）：for循环
对于一个序列,比如说:列表.字符串,有时候我们需要获取其中的每一个元素,然后执行某个操作,此时就需要借助于for循环. for循环语法结构 for循环的语法结构如下,这里大家必须清楚一点,for循环后 ...
- python基础（五）：列表的使用（上）
什么是列表 列表是一系列元素,按特定顺序排列组成.列表总的元素之间没有任何关系,既可以时字符串,也可以是数字,还可以是布尔值. 由此可以看出,列表通常包含多个元素,因此再给列表命名的时候,最好使用复数 ...
- 201871030140-朱婷婷 实验三 结对项目—《D{0-1}KP 实例数据集算法实验平台》项目报告
项目 内容 课程班级博客链接 2018级卓越班 这个作业要求链接 实验三 结对项目 我的课程学习目标 1.体验软件项目开发中的两人合作,练习结对编程:2.掌握GitHub协作开发程序的操作方法. 这个 ...
- Java中注释的形式
单行注释 单行注释 // #双斜杠 快捷键:Ctrl + / 多行注释 多行注释 /* */ #单斜杠星号 星号单斜杠 快捷键:Ctrl + shift + / 文档注释 多行注释 /** */ #单 ...