CSS3之动画三大特性
一 过渡模块
1 基本使用
1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
<style>
*{
margin: 0;
padding: 0;
}
div{
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标签上, 还可以用在其它的任何标签上*/
div:hover{
width: 300px;
background-color: blue;
}
</style>
2 过渡模块其他属性
div {
width: 100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
/*告诉系统延迟多少秒之后才开始过渡动画*/
transition-delay: 2s;
}
ul:hover li{
margin-left: 700px;
}
ul li:nth-child(1){
/*告诉系统过渡动画的运动的速度*/
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}
3 连写
div {
width: 100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
transition: width 5s linear 0s,background-color 5s linear 0s;
transition: background-color 5s linear 0s;
transition: width 5s,background-color 5s,height 5s;
transition: all 5s;
}
4 编写过渡的套路
1.编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可
实现弹性效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>91-过渡模块-弹性效果</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
height: 100px;
background-color: red;
margin-top: 100px;
text-align: center;
line-height: 100px;
}
div span{
font-size: 80px;
/*transition-property: margin;*/
/*transition-duration: 3s;*/
transition: margin 3s;
}
div:hover span{
margin: 0 20px;
}
</style>
</head>
<body>
<!--
1.编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可
-->
<div>
<span>你</span>
<span>好</span>
<span>程</span>
<span>序</span>
<span>员</span>
</div>
</body>
</html>
效果：
二 转换模块 transform
1 基本使用
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
2 形变中心点，锚点
ul li{
list-style: none;
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
transform-origin: 200px 0px;
transform-origin: 50% 50%;
transform-origin: 0% 0%;
transform-origin: center center;
transform-origin: left top;
}
3 旋转轴向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>95-2D转换模块-旋转轴向</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto; }
ul li{
list-style: none;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #000;
/*
1.什么是透视
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
*/
perspective: 500px;
}
ul li img{
width: 200px;
height: 200px;
/*perspective: 500px;*/
}
ul li:nth-child(1){
/*默认情况下所有元素都是围绕Z轴进行旋转*/
transform: rotateZ(45deg);
}
ul li:nth-child(2) img{
transform: rotateX(45deg);
}
ul li:nth-child(3) img{
/*
总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可
*/
transform: rotateY(45deg);
}
</style>
</head>
<body>
<ul>
<li><img src="data:images/rotateZ.jpg" alt=""></li>
<li><img src="data:images/rotateX.jpg" alt=""></li>
<li><img src="data:images/rotateY.jpg" alt=""></li>
</ul>
</body>
</html>
效果：
4 盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致
3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
text-align: center;
line-height: 200px;
/*box-shadow: 10px 10px 10px 10px skyblue;*/
/*box-shadow: 10px 10px 10px 10px skyblue inset;*/
box-shadow: 10px 10px 10px;
color: yellow;
}
.box2{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: pink;
text-align: center;
line-height: 200px;
font-size: 40px;
/*text-shadow: 10px 10px 10px black;*/
text-shadow: 10px 10px 10px red;
color: purple;
}
三 动画模块
1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
基本使用：
div{
width: 100px;
height: 50px;
background-color: red;
/*transition-property: margin-left;*/
/*transition-duration: 3s;*/
/*1.告诉系统需要执行哪个动画*/
animation-name: lnj;
/*3.告诉系统动画持续的时长*/
animation-duration: 3s;
}
/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/
@keyframes lnj {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
2 动画其他属性
div {
width: 100px;
height: 50px;
background-color: red;
animation-name: sport;
animation-duration: 2s;
/*告诉系统多少秒之后开始执行动画*/
/*animation-delay: 2s;*/
/*告诉系统动画执行的速度*/
animation-timing-function: linear;
/*告诉系统动画需要执行几次*/
animation-iteration-count: 3;
/*告诉系统是否需要执行往返动画
取值:
normal, 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate, 往返动画, 执行完一次之后往回执行下一次
*/
animation-direction: alternate;
}
@keyframes sport {
from{
margin-left: 0;
}
to{
margin-left: 500px;
}
}
div:hover{
/*
告诉系统当前动画是否需要暂停
取值:
running: 执行动画
paused: 暂停动画
*/
animation-play-state: paused;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>102-动画模块-其它属性下</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
animation-name: sport;
animation-duration: 5s;
}
@keyframes sport {
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
70%{
left: 300px;
top: 300px;
}
95%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
} .box2{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px auto;
animation-name: myRotate;
animation-duration: 5s;
animation-delay: 2s;
/*
通过我们的观察, 动画是有一定的状态的
1.等待状态
2.执行状态
3.结束状态
*/
/*
animation-fill-mode作用:
指定动画等待状态和结束状态的样式
取值:
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
*/
/*animation-fill-mode: backwards;*/
/*animation-fill-mode: forwards;*/
animation-fill-mode: both;
}
@keyframes myRotate {
0%{
transform: rotate(10deg);
}
50%{
transform: rotate(50deg);
}
100%{
transform: rotate(70deg);
}
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
3 动画连写
1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
2.动画模块连写格式的简写
animation:动画名称 动画时长;
4 背景尺寸
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>112-背景尺寸属性</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
height: 500px;
margin: 0 auto;
}
ul li{
list-style: none;
float: left;
width: 200px;
height: 200px;
margin: 10px 10px;
border: 1px solid #000;
text-align: center;
line-height: 200px;
}
ul li:nth-child(1){
background: url("images/dog.jpg") no-repeat;
}
ul li:nth-child(2){
background: url("images/dog.jpg") no-repeat;
/*
第一个参数:宽度
第二个参数:高度
*/
background-size:200px 100px;
}
ul li:nth-child(3){
background: url("images/dog.jpg") no-repeat;
/*
第一个参数:宽度
第二个参数:高度
*/
background-size:100% 80%;
}
ul li:nth-child(4){
background: url("images/dog.jpg") no-repeat;
/*
第一个参数:宽度
第二个参数:高度
*/
background-size:auto 100px;
}
ul li:nth-child(5){
background: url("images/dog.jpg") no-repeat;
/*
第一个参数:宽度
第二个参数:高度
*/
background-size:100px auto;
}
ul li:nth-child(6){
background: url("images/dog.jpg") no-repeat;
/*
cover含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度和高度都填满元素
*/
background-size:cover;
}
ul li:nth-child(7){
background: url("images/dog.jpg") no-repeat;
/*
contain含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度或高度都填满元素
*/
background-size:contain;
}
</style>
</head>
<body>
<!--
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
-->
<ul>
<li>默认</li>
<li>具体像素</li>
<li>百分比</li>
<li>宽度等比拉伸</li>
<li>高度等比拉伸</li>
<li>cover</li>
<li>contain</li>
</ul>
</body>
</html>
效果：
CSS3之动画三大特性的更多相关文章
- css3的三大特性以及移动端说明
css3的三大特性: 一.层叠性 所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉 比如先 ...
- CSS3的三大特性
在学习CSS 的时候,我们必须要熟练和理解CSS 的三大特性,那么CSS 的三大特性又是什么呢? CSS 的三大特性:层叠 继承 优先级 ,CSS 三大特性是我们学习CSS 必须掌握的三个特性. 首 ...
- 黑马程序员_ Objective-c 概述及面向对象与三大特性
-----------android培训.java培训.java学习型技术博客.期待与您交流!------------ (一).语法概述 1. oc介绍:(.m文件) 1> c语言的基础上,增加 ...
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- OC面向对象的三大特性
一.面向对象的三大特性:封装(成员变量).继承和多态 1. set方法和get方法 1. set方法和get方法的使用场合 @public的成员可以被随意赋值,应该使用set方法和get方法来管理成员 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- Fis3的前端工程化之路[三大特性篇之声明依赖]
Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
随机推荐
- Oracle 存储过程2： PL/SQL数据类型
一.标量数据类型 标量数据类型的变量只有一个值,且内部没有分量.标量数据类型包括数字型,字符型,日期型和布尔型.这些类型有的是 Oracle SQL 中有的数据类型,有的是 PL/SQL 自身附加的数 ...
- spring缓存创建
/** * * <b>创建缓存</b> * <p> * 创建缓存,若已存在直接返回. * <p> * @param cacheName * @retur ...
- 织梦dedecms网站迁移搬家图文教程
织梦dedecms网站迁移搬家图文教程 2014-07-31 dedecms教程 文章介绍 织梦作为国内使用最多的程序之一,难免很多新手在接触dede时不知道怎么转移也就是搬家dede的程序,而且 ...
- 牛客 二叉树中和为某一值的路径 【时间19ms】【内存9560k】
https://www.nowcoder.com/practice/b736e784e3e34731af99065031301bca 构造函数:new ArrayList(al)把al的所有值复制到 ...
- React如何修改props && 子组件调用父组件方法
/** * 子组件如何更改父组件的state呢? * 父组件传递下来的props不满足要求,往往需要修改 * * * Author: shujun * Date: 2020-10-25 */ impo ...
- Python切换中英文输入法
要实现中英文切换,首先Windows系统必须要有中文语言和英文语言,才能实现输入法(语言)切换. import win32api import win32gui from win32con impor ...
- Excel—时间函数
时间函数,学习之前先普及一个尝试,微软采用的是1900年纪念方式(数字1,代表的是1900年1月1日,数字1.5 代表的是1900年的1月1日的中午12:00,因为1.5正好是1天半的时间,而一天2 ...
- 最长公共子序列（LCS）tzoj：5752
http://www.tzcoder.cn/acmhome/problemdetail.do?method=showdetail&id=5752 题意:求两个串的最长公共子序列(顺序相同即为子 ...
- eggjs中egg-mysql不支持mysql集群，代码修改为支持集群
说明:暂不支持egg-mysql动态数据源,用到动态数据源请自行修改.欢迎各位大佬指导... 集群配置: exports.mysql = { // 单数据库信息配置 client: { db1: { ...
- 数据结构(C语言)_链表
//单链表按序号查找节点的值 LNode* GetElem(LinkList L, int i) { int j = 1; LNode* p = L->next; if (i == 0) ret ...