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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

移动端H5知识[系列] - “百变”盒模型

HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山。网站开发也从PC平台向移动端平台开发发展。作为一个优秀的前端开发者,除了能够处理传统平台...

39160
来自专栏数据小魔方

图表美化教程|图案与形状填充

今天跟大家分享简单的信息图制作方法——形状/图案填充法。 ▽▼▽ 今天教大家简单的图表形状填充。 ●●●●● 首先是一个已经做好的柱形图。 ? 每天都看着这样的...

31160
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

19850
来自专栏九彩拼盘的叨叨叨

第三届 CSS 开发者大会笔记

这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

14020
来自专栏IMWeb前端团队

rem不是神农草,治不了移动端百病

有很多朋友一聊起做移动端重构,第一个问题就是用什么单位合适。%,还是rem?(如果你还不太了解rem是什么单位,可先前往CSS3的REM设置字体大小了解。) 然...

233100
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

20130
来自专栏刘春鹏的专栏

移动 web 开发最佳实践

本文从细节和原理入手,一步一步探讨构建移动web界面的最佳实践。对移动端H5高清和多屏适配的一些方案总结,没有固定的套路及方法,请根据自身业务的特点,选择其中的...

1.2K00
来自专栏腾讯社交用户体验设计

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

18630
来自专栏IT平头哥联盟

如何使用CSS3画出懂你的3D魔方~

  最近在写《动画点点系列》文章,上一期分享了< 手把手教你如何绘制一辆会跑车 >,本期给大家带来是结合CSS3画出来的一个立体3d魔方,结合了js让你随心所欲...

10750
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

28920

扫码关注云+社区

领取腾讯云代金券