HTML5+CSS3+JavaScript从入门到精通-11
原创HTML5+CSS3+JavaScript从入门到精通-11
原创
qiqi_fu
发布于 2021-12-03 16:11:52
发布于 2021-12-03 16:11:52
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网页之后按回车，可以看到动画-->
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
相关产品与服务
云直播
云直播（Cloud Streaming Services，CSS）为您提供极速、稳定、专业的云端直播处理服务，根据业务的不同直播场景需求，云直播提供了标准直播、快直播、云导播台三种服务，分别针对大规模实时观看、超低延时直播、便捷云端导播的场景，配合腾讯云视立方·直播 SDK，为您提供一站式的音视频直播解决方案。