a4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
video{
height: 480px;
width: 852px;
}
input::placeholder{
color: violet;
}
ul li:nth-child(even){
line-height: 40px;
text-align: center;
width: 1600px;
height: 40px;
list-style: none;
background-color: blueviolet;
}
ul li:nth-child(odd){
list-style: none;
background-color: violet;
}
ul li:nth-of-type(1){
background-color: yellow;
}
/* ol li:nth-child(n){
background-color: violet;
} */
ol li:nth-child(3n-1){
/* 可套公式! */
background-color: violet;
}
.e{
width: 200px;
height: 200px;
background-color: violet;
}
.e::before{
display: inline-block;
width: 100px;
height: 100px;
background-color: palevioletred;
content: 'wo';
}
.e::after{
content:'shi' ;
}
.r1{
/* CSS麻烦不要紧,要保证html的简洁! */
background-color: salmon;
width: 300px;
height: 60px;
border: 1px solid purple;
line-height: 60px;
font-weight: 700;
color: royalblue;
}
.r1::before{
float: left;
content: 'aaa';
margin-left: 20px;
}
.r1::after{
float: right;
content: 'bbb';
margin-right: 20px;
}
.t{
position: relative;
width: 400px;
height: 400px;
background-color: violet;
}
.t::before{
position:absolute;
content: '';
display: none;
/* 必须要写!!! */
width: 400px;
height: 400px;
background-color: rgba(1, 1, 1, 0.4);
}
.t::before:hover{
display: block;
}
.t:hover::before{
/* 简洁之美! */
display: block;
}
/* 以下为有意思的CSS3新特性! */
img{
filter: blur(5px);
}
img:hover{
filter: blur(0px);
}
.y{
/* width: 100px; */
/* height: 100px; */
width: clac(100% - 100px);
height: clac(10% + 30px);
background-color: purple;
}
</style>
<body>
<video src="med/OMEN15.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop" ></video>
<audio src="music/Lotte Kestner - True Faith.mp3" controls="controls"></audio>
<form action="">
<input type="search" name="aaa" required="required" placeholder="MY3154" autofocus="autofocus">
<input type="submit" value="GOGOGO!">
</form>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<div class="e">111</div>
<div class="r1"></div>
<div class="t"></div>
<!-- 用了伪类选择器,十分的简洁! -->
<img src="pic/1.jpg" alt="">
<div class="y"></div>
</body>
</html>
公式,CSS3新特性,伪类选择器之类的,多百度看看
before,after 的区别在于是否在主题内容之前or之后。
A5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.a{
float: left;
width: 400px;
height: 400px;
background-color:purple;
}
.a1{
float: left;
width: 200px;
height: 200px;
background-color: pink;
transition:height 1.6s ,width .6s ;
}
.a1:hover{
width: 400px;
height: 400px;
}
.b{
width: 400px;
height: 400px;
background-color: red;
/* transition:height 1.6s ,width .6s ; */
/* 下面那个更好! */
transition: all 1.6s;
}
.c{
width: 10px;
height: 40px;
background-color: black;
}
.b:hover{
width: 600px;
height: 1000px;
}
.d{
position: relative;
width: 400px;
height: 50px;border: 10px solid black;
/* background-color: pink; */
border-radius: 25px;
}
.d::before{
content: '';
position:absolute;
margin: 5px 10px;
/* width: 380px; */
width: 0px;
/* 这个必须要写!! */
height: 40px;
border-radius: 20px;
background-color:chartreuse;
transition: width 3s ease-in-out;
/* 多看几遍!!! */
}
.d:hover::before {
width: 380px;
}
.e{
width: 200px;
height: 200px;
background-color: pink;
background: url(pic/1.jpg) no-repeat;
background-size: 400% ;
transition: background-size 1.5s;
}
.e:hover{
background-size: 100% ;
/* 好别扭的方法啊 */
}
.f{
width: 200px;
height: 200px;
background-color: pink;
background: url(pic/1.jpg);
transition: background-position 1.5s;
}
.f:hover{
background-position: center 100%;
}
.g{
width: 200px;
height: 200px;
background-color: pink;
background: url(pic/1.jpg) no-repeat;
/* background-size: 400% ; */
/* 注释后过渡效果就无法起作用了 */
transition: background-size 1.5s;
}
.g:hover{
background-size: 100% ;
/* transform: scale(1.5, 1.5); */
}
</style>
<body>
<div class="a1">123456789</div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<br>
<div class="f"></div>
<br>
<div class="g"></div>
<!-- 元素不会相应变换! -->
</body>
</html>
几个transition的使用,包括一个进度条的制作以及关于其空间占用的研究。
A6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.a1{
background: url(pic/1.jpg);
width: 200px;
height: 200px;
background-color: pink;
transform:translate(50px,100px);
/* transform: translate(x,y);不会影响其他布局! */
transition: all 1s;
}
.a1:hover{
transform: translate(300px,200px);
width: 100px;
}
.a2{
width: 400px;
height: 400px;
background-color: pink;
}
.a3{
width: 100px;
height: 100px;
text-align: center;
background-color: violet;
transform: rotate(45deg);
transition: all 1s;
border-radius: 100px;
word-wrap:break-word;
word-break:break-all;
}
.a3:hover{
transform: rotate(180deg);
}
.a4{
position: relative;
width: 80px;
height: 80px;
background-color: pink;
}
.a4::after{
content: '';
position: absolute;
/* background-color: brown; */
top:0;
left: 0;
height: 12px;
width: 12px;
border-right: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}
</style>
<body>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3">123456789137878</div>
<div class="a4"></div>
</body>
</html>