专栏首页菜鸟前端工程师html+css学习笔记016-H5变化0过渡0动画

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 条评论
登录 后参与评论

相关文章

  • html+css学习笔记002-盒子模型

    怕的不是我们不懂英文 怕的不是我们不懂操作电脑 怕的更不是我们不懂基础程序语言

    Mr. 柳上原
  • html+css学习笔记019-H5响应式布局0自适应布局

    Mr. 柳上原
  • react-开发经验分享-Table表格组件里自定义表格td内容换行

    Mr. 柳上原
  • 总结CSS3新特性(Transiton篇)

    总结CSS3新特性(Transiton篇) CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS ...

    贾顺名
  • 网页|CSS的动画实现

    一些CSS属性是可以实现动画效果,即我们可以用CSS实现动画和过渡。而动画属性的实现其实就是,属性逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色...

    算法与编程之美
  • ZOJ 3620 Escape Time II

    题意:      从初始房间到达终止房间需要经过一系列的房间,没经过一个房间会得到一个价值,从一个房间到达另一个房间同时需要消耗一定的时间,在规定的时间内从初始...

    用户1624346
  • UNIX共享内存总结

        共享内存可以说是最有用的进程间通信方式,也是最快的IPC形式。两个不同进程A、B共享内存的意思是,同一块物理内存被映射到进程A、B各自的进程地址空间。进...

    王亚昌
  • Dubbo SPI实现原理

    Dubbo 并未使用 Java 原生的 SPI 机制,而是对其进行了增强,使其能够更好的满足需求,在 Dubbo 中,SPI 是一个非常重要的模块。基于 SPI...

    LiosWong
  • dubbo+zookeeper+springBoot框架整合与dubbo泛型调用演示

    利用maven打dubbo-admin-0.0.1-SNAPSHOT.jar包 8

    授客
  • http超时设置 golang

    golang提供的http get、post请求是没有设置超时的,但实现生产环境一般都需要设置超时时间。 网上搜索,可以查询到通过设置http.Client中T...

    李海彬

扫码关注云+社区

领取腾讯云代金券