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

css3 transition 实例及分析图片hover出现文字 sidebar平滑过渡(动画系列3）

2016-04-05 15:01 766 查看

<span style="background-color: rgb(255, 0, 0);"><span style="font-size:24px;">一、</span></span>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-property属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:#14C7F3;

}
div:hover
{
height:100px;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0;
}
</style>
</head>
<body>
<div></div>
</body></html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 transition-property属性</title>
<style type="text/css">
div
{
display:inline-block;
width:100px;
height:50px;
background-color:#14C7F3;
transition-property:height;
transition-duration:0.5s ;
transition-timing-function:linear;
transition-delay:0;
}
div:hover
{
height:100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

这两者的区别是一个transition写在了div里，一个写在了div:hover里，这两者的区别是，第1个是鼠标移上去，移开都有过渡效果；第2个只有鼠标移上去有过渡效果，鼠标移开时没有过渡，而是直接变化，所以一般transition是写在元素中，而不是元素的伪类里。二、

这里事实上height元素的高并没有过渡，而是直接变化，应该是div里并没有设置高度，事实上在div里加了height后，height也平滑过渡了

三、

这个例子是把方形渐变成了圆形，当鼠标移动到div元素上面时，div元素圆角半径在0.5秒内从0过渡到50px
四、

这是图片文字介绍滑动效果，它的原理是<p>top为300px,<span>里的文字介绍就会看不到;然后

.wrap:hover
p {

top

;}，文字介绍就会出现了，这里成功的关键就是position，overflow用的好。过程用了过渡。

五、

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3实现图片文字介绍滑动展示效果</title>
<style type="text/css">
#info
{
width:760px;
margin:0 auto;
}
/*定义外层样式*/
.wrap
{
width:220px;
height:330px;
float:left;
position:relative;
overflow:hidden;
font-family:arial, sans-serif;
}
.wrap img
{
border:0;
width:220px;
height:330px;
}
.wrap p
{
display:block;
width:220px;
height:30px;
position:absolute;
left:0;
top:330px;
background-color:rgba(0,0,0,0.3);/*使用CSS3 RGBA颜色值*/
font-size:12px;
color:#FFFFFF;
padding:0;
margin:0;
line-height:16px;
transition: all 0.3s ease-in-out;/*定义CSS3过渡效果,all表示过渡属性针对所有值有变化的CSS属性*/
}
.wrap p b
{
display:block;
font-size:22px;
color:#fc0;
text-align:center;
margin:0;
padding:0;
line-height:30px;
}

.wrap:hover p {top:300px;}
</style>
</head>
<body>
<div id="info">
<div class="wrap">
<img src="#" alt="">
<p>
<b>Red Eye Frog</b>

</p>
</div>
<div class="wrap">
<img src="#" alt="">
<p>
<b>Emperor Penguin</b>

</p>
</div>
<div class="wrap">
<img src="#" alt="">
<p>
<b>Pelicans</b>

</p>
</div>
</div>
</body>
</html>

模仿了第五个

六、

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{margin:0;padding:0;}
p
{
width:100px;
height:100px;
position:absolute;
top:30px;
background-color: rgba(255,255,255,0.5);
transform:translate(-100px);
-moz-transform:translate(-100px); /* Firefox 4 */
-webkit-transform:translate(-100px); /* Safari and Chrome */
-o-transform:translate(-100px); /* Opera */</span>
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition:all 2s; /* Opera */
}
img
{
border:0;
width:600px;
height:300px;
}
div
{
width:100px;
height:100px;
background:red;

}
div:hover p
{

<span style="color:#ff0000;">transform:translate(0px);
-moz-transform:translate(0px); /* Firefox 4 */
-webkit-transform:translate(0px); /* Safari and Chrome */
-o-transform:translate(0px); /* Opera */</span>
}
</style>
</head>
<body>
<div><img src="bg_3.jpg"><p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p></div>
</body>
</html>

这是transform的变化引起的好玩的效果，文字从无到有，从左边缘滑到图片上，很不错的效果。

七、图片的由灰色变成彩色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
body{}
#container{
width:1000px;height:400px;
margin:20px auto;
}
a img{
-webkit-filter:grayscale(80%);

-webkit-transition:-webkit-filter 1s ease-in-out;
}
a:hover img{
-webkit-filter:grayscale(0);
}
</style>
<body>
<div id="container">
<a href="#"><img src="bg_1.jpg"></a>
<a href="#"><img src="bg_2.jpg"></a>
<a href="#"><img src="bg_3.jpg"></a>
<a href="#"><img src="bg_4.jpg"></a>
<a href="#"><img src="bg_5.jpg"></a>
</div>
</body>
</html>

用到了滤镜filter,改变其灰度值

八、sidebar

<span style="background-color: rgb(255, 255, 204);"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0px;
padding: 0px;
font-family: '微软雅黑',Roboto
}

#header{
position: absolute;
display: block;
width: 100%;
height:10%;
top:0px;
box-shadow: 0px 2px 4px #aaa;
overflow: hidden;
}
#header #hamburger-icon,#more-icon{
cursor: pointer;
margin-top: 1.6%;
}
#header #hamburger-icon{
float: left;
margin-left: 30px;

}
#header #more-icon{
float: right;
margin-right: 30px;
}

#title{
width:100%;
height: 60px;
margin-top: 0px;
background-color:#5CC595;
box-shadow: 0px 2px 4px #aaa;
}
#title h2{
line-height: 60px;
color: #fff;
text-align: center;
}
#title button{
position: absolute;
top:80%;
left:37.5%;
background-color: #5CC595;
width:25%;
height:30px;
border: 0px;
border-radius: 5px;
box-shadow: 0px 2px 4px #aaa;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 21px;
cursor: pointer;
}

#pageBody{
position: absolute;
width: 100%;
height: 90%;
top:10%;

}

#sidebar{
position: absolute;
width: 20%;
height: 100%;
left: 0;
box-shadow: 2px 2px 4px #aaa;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari 和 Chrome */
-o-transition: width 0.5s; /* Opera */
}

#content{
position: absolute;
width: 80%;
height: 90%;
top:10%;
right: 0;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari 和 Chrome */
-o-transition: width 0.5s; /* Opera */
}
</style>
<body>
<div id="container">
<div id="header"><img onclick="change()" src="./images/hamburger.png" alt="" id="hamburger-icon"><img src="./images/more.png" alt="" id="more-icon"></div>
<div id="pageBody">
<div id="sidebar">
<div id="title">
<h2>Title</h2>
<button>more</button>
</div>
</div>
<div id="content">
</div>
</div>
</div>
<script>
function change(){
var sidebar=document.getElementById('sidebar');
var content=document.getElementById('content');
width_sidebar=sidebar.style.width ||sidebar.offsetWidth || sidebar.clientWidth;
if(width_sidebar!='0px'){
sidebar.style.width='0';
content.style.width='100%';
}
else{
sidebar.style.width='20%';
content.style.width='80%';
}
};
</script>
</body>
</html></span>

这是sidebar平滑过渡效果，他们的状态改变不是用伪类hover,而是使用了js事件改变宽度，值得学习

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 transition 实例及分

相关文章推荐

新的分享

章节导航

css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3）

css3 transition 实例及分析图片hover出现文字 sidebar平滑过渡(动画系列3）