HTML5+CSS3+JavaScript从入门到精通-11
2023-04-18 14:26:41 时间
HTML5+CSS3+JavaScript从入门到精通
作者:王征,李晓波
第十一章 CSS特殊效果与动画
案例
11-01 border-radius属性
<!DOCTYPE html>
<!--web11-01-->
<html>
<head>
<meta charset="utf-8" />
<title>border-radius属性</title>
<style type="text/css">
#a {
border-radius: 40px; /*圆角的弧度*/
background-color: yellow;
width: 400px;
height: 150px;
padding: 30px;
font-size: 15px;
text-indent: 30px;
overflow: auto;
}
#b {
border-radius: 40px;
border: 5px groove red;
width: 400px;
height: 150px;
padding: 30px;
font-size: 15px;
text-indent: 30px;
overflow: auto;
}
</style>
</head>
<body>
<p id="a">元日<br />
爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。
</p>
<dir id="b">爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。</dir>
</body>
</html>
11-02 border-radius属性,为四个圆角设置弧度
<!DOCTYPE html>
<!--web11-02-->
<html>
<head>
<meta charset="utf-8" />
<title>border-radius属性,为四个圆角设置弧度</title>
<style type="text/css">
#a {
border-top-left-radius: 30px;
border-top-right-radius: 60px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 100px;
background-color: yellow;
width: 400px;
height: 150px;
padding: 30px;
font-size: 15px;
text-indent: 30px;
overflow: auto;
color: red;
}
</style>
</head>
<body>
<p id="a">元日<br />
爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。爆竹声中一岁除,春风送暖入屠苏。千门万户曈曈日,总把新桃换旧符。
</p>
</body>
</html>
11-03 线性渐变色
<!DOCTYPE html>
<!--web11-03-->
<html>
<head>
<meta charset="utf-8" />
<title>线性渐变色</title>
<style type="text/css">
#a {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(red,yellow);
float: left;
}
#b {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to top, red, yellow);
float: left;
}
#c {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
float: left;
}
#d {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to left, red, yellow);
float: left;
}
#e {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to right bottom, red, yellow);
float: left;
}
#f {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to left top, red, yellow);/*线性渐变色*/
float: left;
}
</style>
</head>
<body>
<div id="a">从上到下线性渐变</div>
<div id="b">从下到上线性渐变</div>
<div id="c">从左到右线性渐变</div>
<div id="d">从右到左线性渐变</div>
<div id="e">从左上角到右下角线性渐变</div>
<div id="f">从右下角到左上角线性渐变</div>
</body>
</html>
11-04 复杂的线性渐变色
<!DOCTYPE html>
<!--web11-04-->
<!--
0度表示,从下到上的渐变;90度表示从左到右的渐变;
rgba(x,x,x,y): y表示透明度,0-完全透明;1-完全不透明;
repeating-linear-gradient(red, yellow 10%,green 20%)重复线性渐变
-->
<html>
<head>
<meta charset="utf-8" />
<title>复杂的线性渐变色</title>
<style type="text/css">
#a {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(30deg, red, yellow);
float: left;
}
#b {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(30deg, red, yellow,green,pink);
float: left;
}
#c {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(120deg,red,orange,yellow,green,blue,indigo,violet);
float: left;
}
#d {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
float: left;
}
#e {
margin: 15px;
width: 200px;
height: 200px;
background: linear-gradient(60deg,rgba(0,255,0,0),rgba(0,255,0,0.3),rgba(0,255,0,1));
float: left;/*float的意思,与前面的盒子从左到右排列,遇到列宽不够,自动换行*/
}
#f {
margin: 15px;
width: 200px;
height: 200px;
background: repeating-linear-gradient(red,yellow 10%, green 20%);/*重复的时候,会有百分比,red(0)->yellow(10)->green(20),然后依次重复*/
float: left;
}
</style>
</head>
<body>
<div id="a">30度角的线性渐变</div>
<div id="b">30度角的多颜色线性渐变</div>
<div id="c">彩虹线性渐变</div>
<div id="d">带有透明度的单色线性渐变</div>
<div id="e">带有透明度的多色线性渐变</div>
<div id="f">重复线性渐变</div>
</body>
</html>
11-05 径向渐变色
<!DOCTYPE html>
<!--web11-05-->
<!--
默认情况:渐变的中心是center,形状是ellipse椭圆,大小是farthest-corner(到最远的角)。
-->
<html>
<head>
<meta charset="utf-8" />
<title>径向渐变色</title>
<style type="text/css">
#a {
margin: 15px;
width: 250px;
height: 200px;
background: radial-gradient(red,yellow,green);
float: left;
}
#b {
margin: 15px;
width: 150px;
height: 200px;
background: radial-gradient(red 15%, yellow 30%, green 80%);
float: left;
}
#c {
margin: 15px;
width: 200px;
height: 200px;
background: radial-gradient(circle, red 5%,yellow 60%, green 70%);
float: left;
}
#d {
margin: 15px;
width: 250px;/*分别将宽度改为150,200,250,与#e的效果做对比*/
height: 200px;
background: radial-gradient(closest-side, red, yellow, green);
float: left;
}
#e {
margin: 15px;
width: 150px;
height: 200px;
background: radial-gradient(farthest-side, red, yellow, green);
float: left;
}
#f {
margin: 15px;
width: 200px;
height: 200px;
background: repeating-radial-gradient(red, yellow 10%, green 20%);
float: left;
}
</style>
</head>
<body>
<div id="a">颜色均匀分布的径向渐变</div>
<div id="b">颜色不均匀分布的径向渐变</div>
<div id="c">径向渐变的图形是圆形</div>
<div id="d">指定径向渐变的半径长度为从圆心到离心圆最近的边</div>
<div id="e">指定径向渐变的半径长度为从圆心到离心圆最远的边</div>
<div id="f">重复径向渐变</div>
</body>
</html>
11-06 CSS阴影效果
<!DOCTYPE html>
<!--web11-06-->
<!--
text-shadow box-shadow的四个参数
(水平阴影的距离 垂直阴影的距离 模糊的距离 阴影的颜色)
-->
<html>
<head>
<meta charset="utf-8" />
<title>CSS阴影效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
#a {
width: 200px;
height: 100px;
background-color: yellow;
margin-left: 250px;
border: 10px groove red;
padding: 10px;
box-shadow: 10px 10px 10px blue;
}
</style>
</head>
<body>
<h1 align="center">文字阴影效果</h1>
<hr />
<div id="a">div阴影效果</div>
</body>
</html>
11-07 过渡动画
<!DOCTYPE html>
<!--web11-07-->
<!--
补间动画:实现元素不同状态间的平滑过渡,即自动完成从起始状态到终止状态的过渡,不管中间的状态;
transition-timing-function:
linear:相同速度开始到结束
ease:默认值 - 慢 快 慢
ease-in:慢速开始
ease-out:慢速结束
ease-in-out:以慢速开始和结束
-->
<html>
<head>
<meta charset="utf-8" />
<title>过渡动画</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, yellow);
border: 10px yellow groove;
border-radius: 10px; /*矩形框的圆角效果*/
transition-property: all;/*应用过渡的CSS属性名称,all所有属性都应用过渡动画*/
transition-duration: 5s;/*过渡效果花费时间*/
transition-timing-function: ease-in;/*过渡效果,时间曲线,就是动画快慢速度的设定*/
transition-delay: 0s;/*过渡效果延时,0立即开始过渡动画*/
}
div:hover {/*div元素的 hover 事件,鼠标放在div上时,可以响应这个事件,看到过渡动画效果*/
width: 300px;
height: 150px;
background: linear-gradient(to left, green, blue);
}
</style>
</head>
<body>
<h1 >过渡动画</h1>
<hr />
<div></div>
</body>
</html>
11-08 2D缩放动画效果
<!DOCTYPE html>
<!--web11-08-->
<html>
<head>
<meta charset="utf-8" />
<title>2D缩放动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, yellow);
border: 10px red groove;
border-radius: 10px;
margin-left: 200px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
div:hover {
transform: scale(2,0.5);/*2D缩放动画, 参数>1放大,<1缩小,不能为百分比*/
}
</style>
</head>
<body>
<h1>2D缩放动画效果</h1>
<hr />
<div></div>
</body>
</html>
11-09 2D移动动画效果
<!DOCTYPE html>
<!--web11-09-->
<html>
<head>
<meta charset="utf-8" />
<title>2D移动动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(to right,red,yellow);
border: 10px red groove;
border-radius: 10px;
margin-left: 200px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
div:hover {
transform: translate(50%,-50%);/*水平位移和垂直位移,用百分比表示,相对于自身的宽高百分比。可正负,若只有一个参数,为水平位移。*/
}
</style>
</head>
<body>
<h1>2D移动动画效果</h1>
<hr />
<div></div>
</body>
</html>
11-10 2D旋转动画效果
<!DOCTYPE html>
<!--web11-10-->
<html>
<head>
<meta charset="utf-8" />
<title>2D旋转动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, yellow);
border: 10px red groove;
border-radius: 10px;
margin-left: 200px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
div:hover {
transform: rotate(360deg);/*角度,正数(顺时针),负数(逆时针)*/
}
</style>
</head>
<body>
<h1>2D旋转动画效果</h1>
<hr />
<div></div>
</body>
</html>
11-11 2D拉伸动画效果
<!DOCTYPE html>
<!--web11-11-->
<html>
<head>
<meta charset="utf-8" />
<title>2D拉伸动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
div {
width: 100px;
height: 100px;
background: linear-gradient(to right, red, yellow);
border: 10px red groove;
border-radius: 10px;
margin-left: 200px;
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 0s;
}
div:hover {
transform: skew(30deg, 60deg);/*X轴和Y轴的倾斜角度,参数为负表示向相反方向倾斜*/
}
</style>
</head>
<body>
<h1>拉伸动画效果</h1>
<hr />
<div></div>
</body>
</html>
11-12 3D旋转动画效果
<!DOCTYPE html>
<!--web11-12-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>3D旋转动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
.myimage {
width: 100px;
height: 100px;
margin: 30px;
perspective: 40px;
}
img {
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.myimage:hover img {
transform: rotate3d(1,0,0,360deg);/*x y z :0-1之间的值,表示旋转轴X Y Z坐标方向的矢量。a 表示旋转角度,正数顺时针,负数逆时针*/
}
</style>
</head>
<body>
<h1>3D旋转动画效果</h1>
<hr />
<div class="myimage">
<img src="b1.png" />
</div>
</body>
</html>
11-13 3D缩放动画效果
<!DOCTYPE html>
<!--web11-13-->
<html>
<head>
<meta charset="utf-8" />
<title>3D缩放动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
.myimage {
width: 100px;
height: 100px;
margin: 100px;
perspective: 40px;
}
img {
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.myimage:hover img {
transform: scale3d(0,1,1);/*x y z >1放大,<1缩小*/
}
</style>
</head>
<body>
<h1>3D缩放动画效果</h1>
<hr />
<div class="myimage">
<img src="b1.png" />
</div>
</body>
</html>
11-14 3D移动动画效果
<!DOCTYPE html>
<!--web11-14-->
<html>
<head>
<meta charset="utf-8" />
<title>3D移动动画效果</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
.myimage {
width: 100px;
height: 100px;
margin: 100px;
perspective: 40px;
}
img {
transition-property: all;
transition-duration: 5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.myimage:hover img {
/*transform: translate3d(200px, 0px, 0px);*//*x y z 方向的像素值,px*/
transform:translate3d(50px,50px,50px);
}
</style>
</head>
<body>
<h1>3D移动动画效果</h1>
<hr />
<div class="myimage">
<img src="b1.png" />
</div>
</body>
</html>
11-15 animation动画
<!DOCTYPE html>
<!--web11-15-->
<html>
<head>
<meta charset="utf-8" />
<title>animation动画</title>
<style type="text/css">
h1 {
text-shadow: 5px 5px 5px red;
}
.myc {
width: 120px;
height: 120px;
margin: 20px;
border-radius: 15px;
color: yellow;
text-align: center;
padding: 5px;
background-color: red;
border: 15px yellow groove;
animation-name: move;/*引用下面@keyframes定义的关键帧动画*/
animation-duration: 10s;
animation-iteration-count: infinite;/*定义动画应该播放多少次:infinite-一直播放*/
animation-direction: alternate;
/*上面animation-iteration-count不为1时,才有效。normal-正常播放; reverse-反向播放; alternate-奇数正常播放,偶数反向播放;alternate-reverse-奇数反向,偶数正向*/
}
@keyframes move {/*通过@keyframes,定义动画,move为animatin-name,*/
0% {
transform: translate3d(0px,0px,0px);
border-radius: 15px;
}
25% {/*将这段动画通过百分比,分割成多个节点;然后各节点分别定义各属性*/
transform: translate3d(500px,0px,0px);
border-radius: 50px;
background-color: orange;
}
50% {
transform: translate3d(500px,300px,0px);
border-radius: 0px;
background-color: green;
}
75% {
transform: translate3d(0px,300px,0px);
border-radius: 50px;
background-color: blue;
}
100% {
transform: translate3d(0px,0px,0px);
border-radius: 15px;
}
}
</style>
</head>
<body>
<h1>animation动画</h1>
<hr />
<div class="myc">关键帧动画</div>
</body>
</html>
<!--嵌套时,按回车并没看到动画,要单独打开html网页之后按回车,可以看到动画-->
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击