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编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...
随机推荐
- nginx 负载均衡时，一台tomcat宕机时的问题 自动切换
如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...
- vue界面显示无效的token
返回登陆界面,重新登陆 登陆成功
- Java数组之多维数组
多维数组 多维数组可以看成是数组的数组,比如二维数组就是一个特殊的一维数组,其每一个元素都是一个一维数组. 二维数组 int a[][] = new int[2][5]; 解析:以上二维数组a可以看成 ...
- Django 之 Form
forms组件 1. 校验字段功能 针对一个实例:注册用户讲解. 模型:models.py class UserInfo(models.Model): name=models.CharField(ma ...
- Java基础——二维数组
package com.zhao.demo; public class Demo08 { public static void main(String[] args) { //二维数组 int[][] ...
- vue-webpack代理
baseUrl 改为 '/api'
- linux挂载文件服务器
smbclient -L //192.168.1.1/ -U administrator //直接挂载 使用下面这条命令就行 sudo mount -t cifs -o username=文件服务器账 ...
- pandas学习记要
本文翻译自文章: Pandas Cheat Sheet - Python for Data Science,同时添加了部分注解. 对于数据科学家,无论是数据分析还是数据挖掘来说,Pandas是一个非常 ...
- jquery 页面追加换行等等操作备份
var str= "a<br/>b<br/>c<br/>"; var Newstr = str.replace("<br/> ...
- Java-Java数据类型对应MySql数据类型
开发过程中常用的数据类型: Java Mysql 备注 整型 java.lang.Integer tinyint(m) 1个字节 范围(-128~127) java.lang.Integer ...