html怎么自动过度,HTML与CSS中的过渡模块
a标签的伪类选择器
a标签
1.通过我们的观察发现a标签存在一定的状态
1.1默认状态,从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态
2.什么是a标签的伪类选择器?
a标签的伪类选择器是专门用来修改a标签不同状态的样式的
3.格式
:link修改从未被访问过状态下的样式
:visited修改被访问过的状态下的样式
:hover修改鼠标悬停在a标签上状态下的样式
:active修改鼠标长按状态下的样式
a:link{color:tomato;}
a:visited{color:green;}
a:hover{color:orange;}
a:active{color:pink;}
4.注意点
4.1a标签的伪类选择器可以单独出现也可以一起出现
4.2a标签的伪类选择器如果一起出现,那么有严格的顺序要求
编写的顺序必须要个的遵守爱恨原则lovehate
4.3如果默认状态的样式和被访问过状态的样式一样,那么可以缩写
a{
//简写格式
color:green;}
a:hover{color:orange;}
a:active{color:pink;}
a标签的伪类选择器练习
1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3.在企业开发中和a标签文字/背景相关的都写在伪类选择器中
ullia{width:120px;height:40px;display:inline-block;}ullia:link{background-color:pink;color:white;text-decoration:none;}ullia:hover{color:red;background-color:#ccc;}ullia:active{color:yellow;}
a标签的伪类选择器练习
过渡模块
p{width:100px;height:50px;background-color:red;
/*告诉系统哪个属性需要执行过渡效果*/
transition-property:width,background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration:5s,5s;
/*transition-property:background-color;*/
/*transition-duration:5s;*/}
*:hover这个伪类选择器除了可以用在a标签上,还可以用在其它的任何标签上*/
p:hover{width:300px;background-color:blue;}
![过渡模块]
(http://upload-images.jianshu.io/upload_images/1482909-de9fd4fa86de87cc.gif?imageMogr2/auto-orient/strip)######1,过渡三要素1.1必须要有属性发生变化1.2必须告诉系统哪个属性需要执行过渡效果1.3必须告诉系统过渡效果持续时长######2.注意点当多个属性需要同时执行过渡效果时用逗号隔开即可transition-property:width,background-color;transition-duration:5s,5s;###
过渡模块-其它属性>transition-delay:2s;
//告诉系统延迟多少秒之后才开始过渡动画transition-timing-function:linear;
//告诉系统过渡动画的运动的速度######transition-timing-function:有五个取值linear,ease,ease-in,ease-out,ease-in-out![transition-timing-function](http://upload-images.jianshu.io/upload_images/1482909-22e31879960d948d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)###
过渡连写格式>######1.过渡连写格式transition:过渡属性过渡时长运动速度延迟时间;
transition:background-color5slinear0s;>######2.过渡连写注意点2.1和分开写一样,如果想给多个属性添加过渡效果也是用逗号隔开即可
transition:width5slinear0s,background-color5slinear0s;
2.2连写的时可以省略后面的两个参数,因为只要编写了前面的两个参数就已经满足了过渡的三要素
transition:width5s,background-color5s,height5s;
2.3如果多个属性运动的速度/延迟的时间/持续时间都一样,那么可以简写为:
transition:all5s;
编写过渡套路>1.1不要管过渡,先编写基本界面1.2修改我们认为需要修改的属性1.3再回过头去给被修改属性的那个元素添加过渡即可
.弹性效果
91-过渡模块-弹性效果
呼伦贝尔大草原儿
手风琴效果
92-过渡模块-手风琴效果
本文转载自中文网
html怎么自动过度,HTML与CSS中的过渡模块相关推荐
- css自动均匀分布,如何在CSS中均匀分布?
我会建议使用grid 960系统或类似的东西.网格960使用12列网格行布局,均匀分布即时div.这非常灵活,您可以使用多种不同的组合.它实现了你所追求的.希望这有助于. CSS: .containe ...
- html auto自动,css中auto什么意思?
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
- css中,用px自动转化为rem
新建一个mixin.scss文件,里面写:(非常适用于移动端) // $ratio 随便起的变量名 // 375:!Phone默认的最大宽度 $ratio: 375 / 10;//默认的初始值@fun ...
- webpack插件实现自动抽取css中的主题色样式,并动态切换主题色(element-ui)
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
- html中如何使图片自动旋转90度,css怎么让图片旋转90度?
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...
- html文字自动大小写,CSS中首字母大写如何实现
CSS中首字母大写怎么实现? CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写.这时候我们就需要tex ...
- 关于CSS中浏览器兼容的问题总结二
CSS对浏览器的兼容性有时让人感觉比较麻烦,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xht ...
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- CSS中浮动布局float(小米布局案例、导航栏案例、overflow)
1. CSS 布局的三种机制 网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位, 其中: 普通流(标准流) 块级元素会 ...
- 如何在内嵌 css 中编写: hover_优秀 CSS 代码的 8 个编写技巧!
这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南.希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用. 编写基本的CSS和HTML是我们作为Web开发人员学习 ...
最新文章
- 使用Teams接收Azure服务运行状况通知
- wcf简单的创建和运用
- mysql怎么用游标修改数据,如何使用mysql 游标?
- 阿里云推出全新内存增强型实例re6,性能提升30%
- 前端基础-html-路径的介绍
- Gartner:2012年应用安全Hype Cycle
- IDEA+Java:Selenium+Maven+TestNG基本WebUI自动化测试环境搭建
- the dhc driver package_DHC智商低?不,它用1k阅读,444个好看证明了自己
- Android判断设备是否打开WIFI、GPRS数据连接
- 论文笔记_S2D.02-2013-CVPR-结合三维场景重建和类别分割
- Style transfer系列论文之——Arbitrary Style Transfer in Real-time with Adaptive Instance Normali,ICCV, 2017
- windows10安装dll文件
- MT6577/MT6589处理器参数对比分析
- 中国天气网免费天气API
- 双十一过后,你的钱包还好嘛?快速回血攻略来了
- 正则表达式之数字验证
- 函数——IIFE、作用域、函数调用、函数应用、闭包
- IntelliJ IDEA)中弹出“IntelliJ IDEA License Activation”时怎么办
- Spring Cloud Gateway配置熔断CircuitBreaker
- SVN中如何将指定文件或文件夹直接提交到svn指定目录