本文详细介绍了CSS选择器的各种类型，包括类选择器、标签名选择器、选择器优先级、伪类选择器等，并探讨了样式中的背景、边框、内间距、动画效果等。此外，还深入讨论了自定义动画的实现和应用，如漂浮广告和透明度控制。
一、选择器
（一）类选择器：一次可以控制多个标签 将多个标签的共性属性，抽取到类选择器中将个性属性，放到id选择器中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.hehe{
width: 200px;
height: 200px;
border: 1px black solid;
margin-top: 20px;
}
#div1{
background: red;
}
</style>
</head>
<body>
<div id="div1" class="hehe">
</div>
<h1 class="hehe">asdfsadf </h1>
<div id="div2" class="hehe">
</div>
<div id="div3" class="hehe">
</div>
<div id="div4" class="hehe">
</div>
</body>
</html>
（二）标签名选择器：可以根据标签名称，选择多个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background: #FF0000;
margin-top:20px ;
}
#div1{
background: yellow;
}
h1{
color: #0000FF;
}
ul{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">
divddfd
</div>
<div id="div2">
divddfd
</div>
<h1>asdfsadf</h1>
<h1>asdfsadf</h1>
<ul>
<li>asdfsadf</li>
<li>asdfsadf</li>
<li>asdfsadf</li>
</ul>
<ul>
<li>asdfsadf</li>
<li>asdfsadf</li>
<li>asdfsadf</li>
</ul>
</body>
</html>
（三）选择器优先级：
当多个选择器在控制同一个标签时，如果属性不冲突，多个属性叠加在一起生效
如果多个选择器，控制的属性有冲突那么就根据选择器的优先级来区分
内联样式>id选择器>class选择器>标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
}
.hehe {
border: 1px black solid;
margin-top: 10px;
background: #00FFFF;
}
#div1 {
background: blue;
}
#div2 {}
#div3 {}
</style>
</head>
<body>
<div id="div1" class="hehe" style="background: #FFFF00;">
</div>
<div id="div2" class="hehe">
</div>
<div id="div3" class="hehe">
</div>
</body>
</html>
（四）包含选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* li{
color: #00FFFF;
} */
/* ul #last{
color: red;
} */
/* body ul li {
color: #9ACD32;
} */
body #aa li{
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
<ul>
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
<ul id="aa">
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
</body>
</html>
（五）并列选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ol,#one,h1,b{
color: red;
}
</style>
</head>
<body>
<ol>
<li>abc</li>
<li>abc</li>
</ol>
<ul id="one">
<li>asdfsadf</li>
</ul>
<ul>
<li>asdfsadf</li>
</ul>
<h1>asdfdsaf</h1>
<b>asdfasfadfa</b>
</body>
</html>
（六）通配符选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{
color: #00FFFF;
font-size: 100px;
margin-top: 20px;
} */
#div1 *{
color: #9ACD32;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>asdfasf</li>
</ul>
<h1>abc</h1>
<span id="">
asdfdsaf
</span>
</div>
<div id="div2">
<h1>第二个</h1>
</div>
</body>
</html>
（七）伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中 hover active 这两种状态对其他标签也生效
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
color: red;
/* 去掉超链接的下划线 */
text-decoration: none;
}
a:hover {
color: #FFFF00;
text-decoration: none;
}
a:active {
color: brown;
text-decoration: none;
}
a:visited {
color: burlywood;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.163.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
</body>
</html>
（八）相邻选择器&相邻所有选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin-top: 20px;
}
#div1{
background: #008000;
}
#div2{
background: red;
}
#div1:hover +#div2{
background: #00FFFF;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
background: #008000;
margin-top: 20px;
}
#div1{
background: red;
}
#div1:hover ~div{
background: yellow;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="">
</div>
</body>
</html>
（九）子选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* body > h1{
color: #A52A2A;
} */
body h1{
color: red;
}
body>b{
color: green;
}
</style>
</head>
<body>
<h1>agbc</h1>
<h1>agbc</h1>
<h1>agbc</h1>
<h1>agbc</h1>
<h1>agbc</h1>
<b>asdfsaf</b>
<b>asdfsaf</b>
<b>asdfsaf</b>
<b>asdfsaf</b>
</body>
</html>
（十）属性选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div[id='aa']{
color: red;
}
h1[align]{
font-size: 100px;
}
h1[class='cc']{
color: red;
}
ul[type$=c]{
color: #00FFFF;
}
</style>
</head>
<body>
<div id="aa">
adsfasf
</div>
<div id="bb">
bbbbbbbbbb
</div>
<h1 align="center" class="cc">asfasdfasfdasdfasdfsad</h1>
<h1 align="center">asfasdfasfdasdfasdfsad</h1>
<ul type="circle">
<li>asdfasfd</li>
</ul>
<ul type="disc">
<li>asdfasfd</li>
</ul>
</body>
</html>
（十一）hover和active选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background: #00FFFF;
}
div:hover{
background: #FF0000;
}
div:active{
background:yellow;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（十二）针对input标签的选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type='text']{
width: 500px;
}
input[type='text']:disabled{
color: red;
background: #008000;
}
/* input[type='checkbox']{
width: 100px;
height: 100px;
} */
input:checked{
width: 100px;
height: 100px;
}
#aa:focus{
border:2px salmon solid;
}
</style>
</head>
<body>
<input type="text" src="" value="这个输入框只是让你看里面的默认内容" disabled="disabled"/>
<input type="checkbox"/>听音乐
<input type="text" name="" id="aa" value="asdfasdfasfdsafsadfsd" />
</body>
</html>
（十三）鼠标选中文本的选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
::selection {
background: #008000;
color: #FF0000;
}
</style>
</head>
<body>
<span>士大夫士大夫
士大夫士大夫
</span>
</body>
</html>
（十四）鼠标悬浮的效果
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 400px;
height: 400px;
background-image: url(img/timg.jpg);
background-size: 100% 100%;
transition: all 1s;
transform: rotate(0deg);
}
div:hover {
transition: all 1s;
background-size: 125% 125%;
transform: rotate(15deg);
}
div:active {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（十五）鼠标移动上外层控制内层
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
width: 400px;
height: 400px;
background: #008000;
}
#nei {
width: 200px;
height: 200px;
background: red;
}
#wai:hover >div{
background:yellow;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>
（十六）下拉菜单
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 下拉按钮样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容 (默认隐藏) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
/* 下拉菜单的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">菜鸟教程 1</a>
<a href="#">菜鸟教程 2</a>
<a href="#">菜鸟教程 3</a>
</div>
</div>
</body>
</html>
内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
二、样式
（一）关于背景的CSS样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: red;
background-image: url(img/timg.jpg);
/* 固定背景图片 */
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
div {
width: 300px;
height: 300px;
background-image: url(img/timg.jpg);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="">
</div>
<hr style="height: 20000px;">
</body>
</html>
（二）背景图片位置
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height:768px;
background-image: url(img/20190611140810.png);
background-repeat: no-repeat;
/* background-position:100px 300px; */
background-position:right bottom;
}
</style>
</head>
<body>
</body>
</html>
（三）边框属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background: yellow;
/* border: 2px black solid; */
border-width:10px ;
border-color:blue ;
border-style:solid ;
border-bottom-width:20px ;
border-right-color:blueviolet ;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（四）轮廓
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
outline: #0000FF 50px solid;
}
#div2{
width: 200px;
height: 200px;
border:50px black solid;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
（五）内间距
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px black solid;
padding-left: 20px;
padding-top: 50px;
/*我们在设置内间距时，会撑大外框，
如果你不想撑大外框，还想让内容 在外框中移动
可以配合box-sizing:border-box属性来用*/
box-sizing: border-box;
}
/* h1{
margin-left: 20px;
} */
button {
height: 100px;
width: 200px;
letter-spacing: 20px; /*设置字符间距*/
}
</style>
</head>
<body>
<div id="">
<h1>内间距</h1>
</div>
<button type="button">这是一个按钮</button>
</body>
</html>
（六）按钮文字居中的技巧
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
text-align: center; /*设置框里面的内容左右居中*/
width: 300px;
height: 100px;
color: #8A2BE2;
border: 1px black solid;
font-weight: bold;
line-height: 100px; /*想让一行文字，在外框中上下居中可以把line-height 设置的跟外框的高度一样 */
font-size: 30px;
border-radius: 5px; /*设置边角的弧度*/
letter-spacing: 10px; /*设置字符间距*/
box-shadow:0px 0px 20px #8A2BE2;
}
div:hover{
box-shadow:10px 10px 30px brown; /*阴影效果*/
}
</style>
</head>
<body>
<div id="">
这是一个按钮
</div>
</body>
</html>
（七）照片的感觉
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: palevioletred;
}
#div1 {
height: 300px;
width: 200px;
border: 20px white solid;
border-bottom-width: 30px;
background-image: url(img/meinv.jpg);
background-size: 100% 100%;
box-shadow: 10px 10px 10px gray;
transform: rotate(15deg);
transition:all 1s ;
}
#div2 {
margin-top: 50px;
margin-left: 200px;
height: 300px;
width: 300px;
border: 20px white solid;
border-bottom-width: 30px;
background-image: url(img/timg.jpg);
background-size: 100% 100%;
box-shadow: 10px 10px 10px gray;
transform: rotate(-20deg);
/* transform: scale(0.9); */
}
#div3 {
margin-top: 50px;
margin-left: 500px;
height: 300px;
width: 200px;
border: 20px white solid;
border-bottom-width: 30px;
background-image: url(img/a.jpg);
background-size: 100% 100%;
box-shadow: 10px 10px 10px gray;
transform: rotate(-20deg);
}
#div1:hover {
background-size: 120% 120%;
transform: rotate(30deg);
transition:all 1s ;
}
</style>
</head>
<body>
<div id="" style="float: left;">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
<div id="" style="float: left;">
<div id="div3">
</div>
<div id="div4">
</div>
</div>
</body>
</html>
（八）鼠标的样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div:hover{
cursor:pointer; /*鼠标变成手指*/
}
</style>
</head>
<body>
<a href="#">一个链接</a>
<div id="">
一行文字
</div>
</body>
</html>
（九）段落缩进
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
/*首行缩进*/
text-indent:2em; /*缩进字体默认大小的2倍*/
}
</style>
</head>
<body>
<div id="">
<p>为全人类健康福祉作出贡献。</p>
</div>
</body>
</html>
（十）列表属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
list-style:none;/*去掉列表前面的图标*/
}
/*可以让每个li 浮动做出按钮来*/
li{
margin: 20px;
float:left;
border:1px black solid;
padding: 10px 10px;
border-radius:10px ;
}
</style>
</head>
<body>
<ul>
<li>我的家园</li>
<li>关于本站</li>
<li>联系本人</li>
<li>本站声明</li>
</ul>
</body>
</html>
（十一）行高的设置
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
text-indent: 2em; /*首行缩进*/
line-height:2em; /*设置行高*/
}
</style>
</head>
<body>
<p>
为青少年犯罪嫌疑人辩护是续辉的工作重点之一，在办案过程中，续辉给失足者以慈母般的关怀，唤醒他们沉睡的理性和良知，帮助他们迷途知返。
续辉认为，未成年人犯罪，大多与缺乏家庭关爱有关。作为一个法律援助工作者，不仅要依法维护他们的权益，更应用母爱温暖他们受伤的心，让他们重新做人。就这样，续辉用伟大的母爱，温暖了60多颗受伤的心，让这些失足青少年成为金不换的回头浪子。
</p>
</body>
</html>
（十二）旋转动画
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai{
text-align: center;
height: 100px;
width: 250px;
border: 1px black solid;
padding-top: 10px;
box-sizing: border-box;
}
#nei{
margin: auto;
height: 80px;
width: 230px;
background-image: url(img/mi.png);
background-size:100% 100%;
transition:transform 0.5s;
}
#nei:hover{
transform: rotate(3deg);
transition:transform 0.5s;
}
</style>
</head>
<body>
<div id="wai">
<div id="nei">
</div>
</div>
</body>
</html>
（十三）过渡动画
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 100px;
width: 200px;
background: palegreen;
/*值1 你要过渡属性 过渡时长，延时过渡 过渡的速率*/
/* transition:width 2s 1s linear; */
/* transition-property:width,height; 过渡多个属性*/
transition-property:all;
transition-duration:3s;
transition-delay: 0s;
transition-timing-function:linear;
}
div:hover{
width: 800px;
height: 600px;
background: #DB7093;
/*值1 你要过渡属性 过渡时长，延时过渡 过渡的速率*/
/* transition:width 2s 1s linear; */
/* transition-property:width,height; 过渡多个属性*/
transition-property:all;
transition-duration:3s;
transition-delay: 0s;
transition-timing-function:linear;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（十四）旋转360
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 115px;
background-image:url(img/jiuye1.png) ;
background-size:100% 100% ;
transition:transform 1s;
}
div:hover{
transform: rotate(360deg);
transition:transform 1s;
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（十五）关于字体的CSS样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span {
/* font-style 字体样式
font-variant
font-weight
font-size/line-height
font-family */
/*关于字体的复合属性*/
/* font: italic small-caps 50px 楷体; */
font-style:italic;
/* color:rgb(255,255,0); */
/* rgba(0,0,0,0.1) a 表示透明度 0---1 */
color: rgba(0,0,0,0.3);
font-size:10mm ;
font-family:楷体;
font-weight:900; /*字重*/
}
</style>
</head>
<body>
<span>abcde关于字体的CSS样式</span>
<div id="">
abcde关于字体的CSS样式
</div>
</body>
</html>
（十六）动画
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 200px;
width: 200px;
margin-top: 50px;
}
#div1:hover{
/*位移动画*/
transform: translate(100px,30px);
}
div:first-child{
background: red;
}
div:nth-child(2){
background: #0000FF;
/*旋转动画 deg角度 取负数值 逆时针转*/
transform: rotate(-30deg);
}
div:nth-child(3){
background: palegreen;
/*缩放动画*/
transform: scale(0.5);
}
div:last-of-type{
background:yellow;
/*扭曲动画*/
transform: skew(15deg,20deg);
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
三、自定义动画
（一）自定义动画
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*复合属性*/
animation:myAni 2s 1s linear forwards;
}
/* 自定义一个动画 */
@keyframes myAni{
/*动画的初始状态*/
from{
width: 100px;
height: 100px;
background: red;
}
/*动画的最终状态*/
to{
width: 500px;
height: 500px;
background:yellow;
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（二）自定义动画的拆解属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: red;
/*复合属性*/
/* animation:myAni 2s 1s linear forwards; */
animation-name:myAni; /*动画名称*/
animation-duration: 2s; /*动画的执行时长*/
animation-delay: 1s; /*动画延时*/
animation-timing-function:ease-out; /*动画的执行速率*/
animation-iteration-count:2;/*动画执行的次数 infinite永远执行*/
animation-direction: reverse; /*动画反向播放*/
/* animation-fill-mode:forwards; *//*停留在最后一帧*/
animation-play-state:running /*动画运行或暂停*/
}
@keyframes myAni{
from{
width: 100px;
height: 100px;
background: red;
}
to{
width: 1100px;
height: 100px;
background: red;
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（三）自定义动画2
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
/*复合属性*/
/* animation:myAni 2s 1s linear forwards; */
/*动画名称*/
animation-name: myAni;
/*动画的执行时长*/
animation-duration: 2s;
/*动画延时*/
animation-delay: 0s;
/*动画的执行速率*/
animation-timing-function: ease-out;
/*动画执行的次数 infinite永远执行*/
animation-iteration-count: infinite;
/*动画反向播放*/
/* animation-direction: reverse; */
/*停留在最后一帧*/
/* animation-fill-mode:forwards; */
/*动画运行或暂停*/
/* animation-play-state: running */
}
@keyframes myAni {
1% {
width: 100px;
height: 120px;
background: red;
}
10% {
width: 500px;
height: 120px;
background:green;
}
30% {
width: 500px;
height: 320px;
background:yellow;
}
40% {
width: 500px;
height: 400px;
background:yellow;
}
60% {
width: 700px;
height: 400px;
background:blueviolet;
}
80% {
width: 800px;
height: 600px;
background:blueviolet;
}
100% {
width: 800px;
height: 600px;
background:gold;
}
}
</style>
</head>
<body>
<div id="">
</div>
</body>
</html>
（四）漂浮广告
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wai {
width: 200px;
height: 300px;
position: absolute;
background-image: url(img/girl1.jpg);
background-size: 100% 100%;
animation-name: guanggao;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/*动画的执行速率*/
animation-play-state: running;
}
#wai:hover{
animation-play-state:paused;
}
#nei {
width: 100%;
height: 20px;
background: rgba(0, 0, 0, 0.1);
color: white;
}
#gb:hover{
cursor: pointer;
}
@keyframes guanggao {
0% {
left: 100px;
top: 0px;
background-image: url(img/girl1.jpg);
}
10% {
left: 300px;
top: 0px;
background-image: url(img/girl1.jpg);
}
20% {
left: 500px;
top: 100px;
background-image: url(img/girl2.jpg);
}
30% {
left: 500px;
top: 600px;
background-image: url(img/girl2.jpg);
}
40% {
left: 900px;
top: 300px;
background-image: url(img/girl3.jpg);
}
50% {
left: 700px;
top: 300px;
background-image: url(img/girl3.jpg);
}
60% {
left: 200px;
top: 600px;
background-image: url(img/girl4.jpg);
}
70% {
left: 200px;
top: 200px;
background-image: url(img/girl4.jpg);
}
80% {
left: 600px;
top: 400px;
background-image: url(img/girl5.jpg);
}
90% {
left: 900px;
top: 300px;
background-image: url(img/girl5.jpg);
}
100% {
left: 200px;
top: 600px;
background-image: url(img/girl4.jpg);
}
}
</style>
<script type="text/javascript">
function guanBi(){
var waiDiv=document.getElementById("wai");
waiDiv.style.display='none';
}
</script>
</head>
<body>
<div id="wai">
<div id="nei">
<span id="gb" onclick="guanBi()">关闭</span>
</div>
</div>
</body>
</html>
（五）透明度
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:200px;
height: 200px;
background: rgba(255,0,0,0.2);
/* background: red; */
/* opacity: 0.2; /*可以设置透明度 取值 0---1*/
text-transform: uppercase; /*字母转换带小写*/
}
</style>
</head>
<body>
<div id="">
abcdefg
</div>
</body>
</html>
扫一扫
2183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
