您的位置：首页 > Web前端 > HTML5

HTML5基础加强css样式篇（css过度效果）（十八）

2017-03-16 11:02 585 查看
1.css过度效果简介：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #7e64ff;
/*visibility: hidden;*/

}

/*鼠标悬浮在.box时，宽度放大2倍*/
.box:hover{
/*设置有过渡效果的CSS属性*/
/*
对CSS属性的要求：具有“中间值”得CSS样式

中间值: CSS样式是数值或者可以转化成数值

*/
/*transition-property: width;*/
/*transition-property: opacity;*/
/*transition-property: display;*/
/*transition-property: visibility;*/
transition-property: background-color;

/*#f00 = red*/
background-color: red;

/*opacity: 1;*/
/*display: block;*/

/*设置过渡持续的时间*/
transition-duration: 3s;

/*width: 200px;*/

/*opacity: 0;*/

/*display: none;*/

/*visibility: hidden;*/

}

</style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">

</script>
</body>
</html>
2.css过度效果简单应用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #7e64ff;
border: 1px solid green;

}

/*需求：鼠标悬浮在.box时，宽度放大2倍，背景色变成红色，高度放大2倍*/
.box:hover{
/*通过,分割多个样式*/

/*
我们不需要特别设置 transition-property:
浏览器默认为我们增加了 transition-property: all

*/
/*transition-property: width, background-color, height, border;*/
/*transition-property: all;*/

/*仅让宽度产生过渡动画效果*/
transition-property: width;
/*当特指某个CSS样式具有过渡动画效果，需要显示设置 transition-property*/

transition-duration: 3s;

width: 200px;
height: 200px;
background-color: #f00;
border:  19px solid green;

}

</style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">

</script>
</body>
</html>


3.过度时间设置transition-duration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过度时间设置</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #7e64ff;
border: 1px solid green;

}
.box:hover{
/*仅让宽度产生过渡动画效果，过渡时间3ms, 高度4s, 背景色过渡*/
transition-property: width, height, background-color, border;

/*transition-duration: 3s;*/
/*transition-duration: 300ms;*/
transition-duration: 2s, 4s, 10s;

/*
过渡时间值
ms 毫秒
s 秒

*/

width: 200px;
height: 200px;
background-color: #f00;
border: 19px solid green;

}

</style>
</head>
<body>

<div class="box">

</div>

<script type="text/javascript">

</script>
</body>
</html>
4.过度延时时间：transition-delay

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box, .box1 {
width: 100px;
height: 100px;
background-color: #7e64ff;
border: 1px solid green;
}

body:hover .box{

/*transition-property: width, height, background-color, border;;*/
transition-property: width;
transition-duration: 2s;
/*过渡延迟执行*/
/*transition-delay: 1s, .1s;*/

/*可以设置负值*/
transition-delay: -1s;

width: 200px;
/*height: 200px;*/
/*background-color: #f00;*/
/*border: 19px solid green;*/
}
body:hover .box1{
transition-property: width;
transition-duration: 2s;
width: 200px;
}

</style>
</head>
<body>

<div class="box"></div>
<div class="box1"></div>

<script type="text/javascript">

</script>
</body>
</html>


css过度效果：动态边框应用：

效果图：



代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 400px;
height: 150px;
background-color: forestgreen;

position: relative;
}
.border-box{
background-color: orange;
position: absolute;
}

.border-box-top{
height: 8px;
width: 0;
}
.border-box-right{
width: 8px;
height: 0;
right: 0;
}
.border-box-bottom{
height: 8px;
width: 0;
bottom: 0;
right: 0;
}
.border-box-left{
width: 8px;
height: 0;
left: 0;
bottom: 0;
}

/*
触发时机：鼠标悬浮在 .box
过渡时间：每个边的过渡时间是1s
CSS值变化： 0 到指定的大小
*/

.box:hover .border-box-top{
width: 100%;
transition-duration: 1s;
}

.box:hover .border-box-right{
height: 100%;
transition-duration: 1s;
transition-delay: 1s;
}
.box:hover .border-box-bottom{
width: 100%;
transition-duration: 1s;
transition-delay: 2s;
}
.box:hover .border-box-left{
height: 100%;
transition-duration: 1s;
transition-delay: 3s;
}

</style>
</head>
<body>

<div class="box">
<div class="border-box border-box-top"></div>
<div class="border-box border-box-right"></div>
<div class="border-box border-box-bottom"></div>
<div class="border-box border-box-left"></div>
</div>

<script type="text/javascript">

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html5 经验
相关文章推荐
新的分享
章节导航