HTML-浮动与清除浮动、文字属性、动画效果

一、浮动与清除浮动

1.浮动可以解决文字保卫图片的问题
2.浮动可以解决莫名其妙的间隔问题
3.浮动可以向左，向右进行排版对齐
浮动: 可以设置元素，脱离正常的文档流，向左或者向右，靠近父元素的边缘，或者设置了浮动的其他元素的边缘靠拢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
.parent{
    width: 300px;
    height: 300px;
    background-color:gold;
    margin: 0 auto;
}
.child{
    width: 100px;
    height: 100px;
    background-color: skyblue;
    float: left;
}
</style>
<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

html5 字体动态浮现 html字体浮动代码_字体颜色

左浮动后

html5 字体动态浮现 html字体浮动代码_html5 字体动态浮现_02

浮动的高度塌陷问题

1.设定父元素高度
2.最佳解决方案，伪元素清除

.clear:after{
content="";
display:block;
clear:both;
}
二、文字属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
#d1{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '宋体';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:red;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 5px 5px 5px black;
}
#d2{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '宋体';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:#fff;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 0px 0px 5px black;
}
#d3{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '宋体';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:#fff;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 0px 0px 10px skyblue;
}
#d4{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '宋体';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:#fff;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 0px 0px 10px skyblue,0 0 5px red,0 0 5px red;
}
*{
    padding-top: 10px;
}
#d5{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '宋体';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:#fff;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 2px 2px 10px rgb(13, 180, 247),2px 2px 5px rgb(230, 217, 217),2px 2px 5px rgb(146, 247, 52);
}
#d6{
/* 设置字体大小 */
font-size: 40px;
/* 设置字体样式 */
font-family: '微软雅黑';
/* 设置字体粗细，100-9000，
lighter细  normal bold加粗
默认正常的字体粗细 */
font-weight: 100;
/* 设置字体颜色 */
color:#fff;
/* 设置字体排布，默认向左 */
text-align: center;
/* 设置文字行高 */
line-height: 35px;
/* 设置文字阴影 水平偏移距离 垂直偏移距离 模糊度 阴影的颜色*/
text-shadow: 2px 2px 0px rgb(178, 183, 236),3px 3px 0px rgb(167, 229, 240),4px 4px 0px orangered,5px 5px 0px rgb(240, 4, 4);
/* 动画 */
animation:cooturn 3s infinite alternate
}
@keyframes cooturn{
    from{
        text-shadow: 2px 2px 0px rgb(224, 178, 236),3px 3px 0px rgb(236, 139, 193),4px 4px 0px orangered,5px 5px 0px rgb(123, 100, 253);
    }
    to{
        text-shadow: 0px 0px 10px rgb(144, 152, 240),0px 0px 4px rgb(128, 151, 250),0px 0px 5px rgb(0, 102, 255),0px 0px 2px rgb(240, 4, 4);
    }
}
</style>
<body>
    </div> 
    <div id="d1">
        你好，可可！
    </div><br>
    <div id="d2">
        你好，可可！
    </div><br>
    <div id="d3">
        你好，可可！
    </div><br>
    <div id="d4">
        你好，可可！
    </div>
    <div id="d5"><br>
        你好，可可！
    </div>
    <div id="d6"><br>
        你好，可可！
    </div>
</body>
</html>

html5 字体动态浮现 html字体浮动代码_html5 字体动态浮现_03

三、过度效果

设置过度的时间
设置过度的属性
设置过度的速度
设置过度的延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
.blur{
    width: 100px;
    height: 100px;
    background-color: pink;
    transition: 2s;
    /*
    设置具有过度效果的属性
    transition-property: width,background;
    transition-property: all;
    设置整个过度的时间长度
    transition-duration: 2s,10s; 
    transition-duration: 2s; */
    /* 设置整个过度动画变化的速度 ease先慢后快在慢下来
    linear 均速
    ease-in 从慢到快
    ease-on 从快到慢
    */
    transition-timing-function: ease;
    transition-delay:3s;
}
.blur:hover{
    background-color: rgb(177, 226, 85);
    width: 200px;
    height: 200px;
}
</style>
<body>
    <div class="blur"></div>
</body>
</html>

阴影例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
.linear_1{
    width: 300px;
    height: 400px;
    margin: 20px auto;
    background-color: skyblue;
    box-shadow: 0 0 0 #ccc;
    transition: all 0.5s ease;
}
.linear_1:hover{
    box-shadow: 0px 5px 20px #999;
}
</style>
<body>
    <div class="linear_1"></div>
</body>
</html>

html5 字体动态浮现 html字体浮动代码_html_04