首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >html+css学习笔记016-H5变化0过渡0动画

html+css学习笔记016-H5变化0过渡0动画

作者头像
Mr. 柳上原
发布2018-09-05 15:15:32
7300
发布2018-09-05 15:15:32
举报

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

今天第59期班html+css毕业了

马上要进入js班学习

想起了以前那个感性的我

高中毕业的时候

大学毕业的时候

泪眼婆娑的我

本以为今天会如那时候一样的依依不舍

然而心中却少有波澜

想感慨,想感恩,想说些什么

最后还是对自己说

算了吧

就这样吧

平淡的结束了毕业典礼

是社会让人变得冷漠

连情感都会暗淡许多吗

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

/* 变化and过度and动画 */

/* 变化:transform */
div{
width:200px;
height:200px;
transition:2s;
transform-origin:x y; /* 变化基点属性:默认中心旋转,不能写在触发器里 */
}
div:hover{
transform:rotate(180deg); /* 变化旋转属性:会占据原来位置,正值顺时针,负值逆时针 */
deg 角度
turn 圈
rad 弧度
grad 梯度
transform:scale(0.5); /* 变化缩放属性:会占据原来位置,属性值  缩小(0~1)  放大(>1) */
transform:translate(x,y); /* 变化位移属性:会占据原来位置,属性值px % */
transform:skew(20deg,20deg); /* 变化倾斜属性:会占据原来位置 */
}
/* 
注意:
旋转属性会影响位移属性
 */

/* 过度:transition */
div{
width:200px;
height:200px;
visibility:hidden; /* 隐藏过度属性:占据原来位置 ,盒子内容不能选择到 */
opacity:0; /* 透明过度属性:占据原来位置 ,盒子内容能选择到 */
transition-property:width; /* 过度的属性 */
transition-duration:2s; /* 过度持续的时间 */
transition-timing-function:ease-in-out; /* 过度的速率 */
linear 匀速
ease 慢快慢(默认值)
ease-in 慢入
ease-out 慢出
ease-in-out 慢入慢出
cubicbezier 贝塞尔曲线(x1,y1,x2,y2)
transition-delay:2s; /* 过度的延迟时间 */

复合属性:
transition:属性 时间 速率 延迟时间,属性 时间 速率 延迟时间;
transition:width 2s ease-in-out  2s;visibility 2s, /* 隐藏到出现 */  opacity 2s, /* 透明到出现 */
}
div:hover{
visibility:visible; /* 隐藏后出现过度属性 */
opacity:1; /* 透明后出现过度属性 */
width:300px;
height:300px;
}
/* 
触发过渡
单纯的代码不会触发任何过渡操作,需要通过用户的行为(如点                    击,悬浮等)触发,可触发的方式有: 
:hoever :focus :checked 媒体查询触发 JavaScript触发

局限性
transition的优点在于简单易用,但是它有几个很大的局限。 
(1)transition需要事件触发,所以没法在网页加载时自动发生。 
(2)transition是一次性的,不能重复发生,除非一再触发。 
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 
 */

/* 动画:animation */
div{
width:200px;
height:200px;
animation-name:move; /* 动画的名字 */
animation-duration:2s; /* 动画的持续时间 */
animation-delay:2s; /* 动画的延迟时间 */
animation-timing-function:ease-in-out; /* 动画的运行速率,和过渡值一样 */
animation-iteration-count:9; /* 动画执行次数 */
1~~ 数值
infinite 无限次
animation-derection:normal; /* 动画执行反向 */
normal 默认
reverse 反向
alternate 正向再反向
alternate-reverse 反向再正向
animation-fill-mode:none; /* 规定动画第一帧与最后一帧的状态:不适用于无限次运动的状态 */
none 原始动画 -- 动画 -- 原始状态(默认)
forwards 原始动画 -- 动画 -- 停在最后一帧
backwards 动画的0帧 -- 动画  -- 停在原始状态
both 动画的0帧 -- 动画  -- 停在最后一帧

复合属性:
animation:move 2s linear 1 alternate;
}
div:hover{
animation-play-state:paused; /* 动画运动执行的状态 */
running 运动
paused 停止
}
@keyframes move{
/* 从开始到结束 */
from{width:200px;}
to{width:300px;}

/* 帧动画 */
0%{width:300px;}
50%{width:400px;}
100%{width:500px;}
}

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<div></div>

</body>

</html>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.06.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档