元素显示和隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:150px;
height:40px;
background-color: #cccccc;
text-align: center;
color:#eeeeee;
line-height: 40px;
/*鼠标样式：cursop*/
cursor: pointer;
position: relative;
}
img {
/*定位和浮动会把块级元素和行内元素均转化为行内块*/
position: absolute;
left:150px;
top:0px;
display: none;
}
.box:hover img {
/*显示属性 display：block*/
display: block;
}
</style>
</head>
<body>
<div class="box">我的京东
<!--：hover只能做到鼠标移入父元素让里面的子元素从隐藏转换为显示，不能为兄弟关系-->
<img src="images/1.jpg" alt="">
</div>
</body>
</html>动画：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$美少女战士$</title>
<style>
/*
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3次 infinite 无限
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。alternate 反向播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。*/
.box {
width: 200px;
height: 200px;
background-color: skyblue;
/*动画 先定义后使用*/
/*动画属性 animation:动画名字 动画持续时间s 延时时间 s 运动曲线 往返运动 */
animation: ani 10s 2s linear infinite alternate ;
}
@keyframes ani {
/*0% 最初
20% 50% 75%
100% 最终
*/
0% {
background-color: #a71d5d;
}
20% {
border-radius: 30px;
border: 2px solid black;
}
50% {
transform: translateX(400px);
border-radius: 50%;
}
100% {
opacity: 0.3;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>动画--过渡：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:200px;
background-color: red;
border-radius: 50%;
position: absolute;
left:0;
top:0;
transition: all 5s linear 2s;
}
.box:hover{
width:30px;
border-radius: 50%;
}
</style>
</head>
<body>
<!--c3动画
过渡：从一个状态到另一个状态(时间)
transtion:
动画：多个状态的变化
先定义后使用-->
<div class="box"></div>
</body>
</html>
扫描二维码关注公众号，回复：
5813642 查看本文章
变形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:200px;
}
/*变形 transform 所有变形均以中心点为原点变形
1：平移 translate
2：缩放 scale
3：倾斜 skew
4：旋转 rotate
所有变形均会回到最初状态*/
.box1 {
background-color: orangered;
transition: transform 5s linear 0s;
}
.box1:hover {
transform: translateX(400px);
}
.box2 {
background-color: #00a4ff;
transition: transform 2s linear 0s;
}
.box2:hover{
transform: scale(0.5); /*大于1就是变大*/
}
.box3 {
background-color: mediumvioletred;
transition: transform 2s linear 0s;
}
.box3:hover {
transform:skew(45deg) ; /*正数为逆时针*/
}
.box4 {
background-color: yellow;
transition: transform 2s linear 0s;
}
.box4:hover {
transform:rotateX(45deg) ; /*正数为逆时针*/
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</body>
</html>显示和隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:100px;
border:5px double red;
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<!--
1.overflow:hidden 溢出的隐藏
scroll 出现滚动条（不管内容是否溢出，都会出现）
auto 出现滚动条（如果内容溢出，出现滚动条，如果内容不溢出就不出现）
2.
-->
<div class="box">
sdasdsaaaaaaadddddddddddddddasdsa
sdsafdghfsxcvrxscxwq
dsafgdsfsafdsa
dsadv
ad
a
a
a
a
a
a
s
fs
f
d
ew
</div>
</body>
</html>盒子阴影：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:300px;
height:200px;
margin:100px auto;
background-color: white;
font-size: 50px;
text-align: center;
line-height: 200px;
}
.box:hover {
box-shadow:0 0 10px 0 rgba(233,34,45,0.5) inset;
text-shadow: 0px 0px 10px rgba(233,34,45,0.5);
}
/*盒子阴影：box.shadow
水平阴影的尺寸 h-shadow
垂直阴影的尺寸 v-shadow
阴影的模糊距离 spread
阴影的尺寸 px
阴影的颜色 rgba（）
内外阴影 外（outside默认）
内（inside）*/
</style>
</head>
<body>
<div class="box">
文字阴影
</div>
</body>
</html>颜色表示法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: gray;
}
.box {
position: relative;
width:200px;
height:200px;
/*6位16进制，每2位为一组*/
/*background-color: #ff00ff;*/
background-color: rgb(255,0,255);
margin:0 auto;
/*a alpha 透明度0-1的一位小数 0全透明，1不透明*/
/*background-color: rgba(255,0,255,0.5);*/
/*rgba指的是背景透明*/
opacity: 0.4;
/*opacity:背景内容都透明*/
}
</style>
</head>
<body>
<div class="box">
<div style="width: 100px;height: 100px;background-color: orange;
position: absolute;left:50%;top:50%;margin-left:-50px;margin-top: -50px "></div>
</div>
</body>
</html>黄色弹球：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width:200px;
height:200px;
border-radius: 50%;
background-color: yellow;
animation: ani 8s linear infinite alternate
}
@keyframes ani {
0% {
margin-top:0;
margin-left:0;
}
25% {
margin-top:400px;
margin-left:300px;
}
50% {
margin-top:0;
margin-left:600px;
}
75% {
margin-top:400px;
margin-left:900px;
}
100% {
margin-top:0;
margin-left:1200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>