使qq的图片逐渐从中心向上逐渐变小
<html>
<head>
<title>
css-transition与animation组合练习
</title>
<style>
.div{
text-align: center;
}
.picture{
margin-top: 200px ;
width: 150px;
height: 165px;
}
/* hover与.picture之间一定要加上空格 */
/*********************
*以下为使用transition*
*********************/
html:hover .picture{
transition-delay: 300ms;
transition-duration: 2s;
transition-timing-function: ease;
width: 50px;
height: 55px;
margin-top: 0px;
}
/********************
* 以下为使用animation*
********************/
/*html:hover .picture {
animation-name: img;
animation-delay: 300ms;
animation-duration: 2s;
animation-fill-mode: forwards; // 使之不会重新变化
}
@keyframes img{
to{
width: 50px;
height: 55px;
margin-top: 0px;
}
}
*/
.ten{
color:rgb(36, 63, 219);
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
text-shadow: 3px 3px 3px rgb(90, 160, 226);
opacity: 1;
/* 不透明度0~1 */
}
/* 👇碰到html就会触发效果 */
/*******************
*以下使用transition*
*******************/
html:hover .ten{
transition-delay: 300ms;
transition-duration: 2s;
font-size: 10px;
opacity: 0;
}
/******************
*以下使用animation*
******************/
/*html:hover .ten{
animation-name: font;
animation-delay: 300ms;
animation-duration: 2s ;
animation-fill-mode: forwards;
}
@keyframes font{
to{
font-size: 0px;
margin-top: 0px;
// color: white;
text-shadow: initial;
}
}*/
</style>
</head>
<body>
<p style="text-align:center ;">图片、logo从中心到上部逐渐变小的动画</p>
<div class="div">
<img src="tencent.PNG" alt="qq" class="picture" >
<!-- 放入图片 -->
<p class="ten">Tencent</p>
<!-- 文字说明 -->
</div>
</body>
</html>