您的位置: 首页  >  文章  >  页面动画实例1（HTML5+CSS3 通过外边距实现图片的运动）

页面动画实例1（HTML5+CSS3 通过外边距实现图片的运动）

分类: 文章 • 2025-03-07 09:51:28

效 果 图

通过外边距实现图片的运动，同时让文本内容实现动态消失的效果。
页面动画实例1（HTML5+CSS3 通过外边距实现图片的运动）

代码模块：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AnimationInstanceCSS_Test</title>
    <style type="text/css">
        .img {
            /* vertical-align:middle;	 */
            /* 垂直居中 */
            margin-top: 100px;
            /* 通过外边距实现居中效果 */
            width: 500px;
            height: 500px;
        }

        /* .img:hover  */
        html:hover .img
        /* 实现效果，鼠标放在页面内就执行 .img的animation */
        {
            animation-name: image_a; 
            /* nimation 名字 */
            animation-delay: 500ms; 
            /* animation 延迟 */
            animation-duration: 1s;
            /* animation 持续时间 */
            animation-fill-mode: forwards; 
            /* 动画停止在最后一帧   若没进行设置，动画则会在结束后回到起始位置 */
        }

        @keyframes image_a {
            to {
                width: 120px;
                height: 100px;
                margin-top: 0px;
            }
        }

        .div {
            text-align: center; 
            /* 水平居中 */
        }

        .p {
            font-family: 微软雅黑 ;
            font-size:40px; 
            /* 字体大小 */
            text-shadow: 2px 2px 3px #b0b0b0; 
            /* 阴影效果 */
            opacity: 1; 
            /* 表示透明度  1 表示完全不透明  值为  0-1 范围内 */
        }

        .p:hover {
            transition-delay: 500ms; 
            /* 过渡延迟时间500ms */
            transition-duration: 1s;
            /* 过渡持续时间 1s */
            font-family: 微软雅黑;
             font-size:40px; 
             /* 字体大小 */
            text-shadow: 2px 2px 3px #b0b0b0; 
            /* 阴影效果 */
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="div">
        <img src="image.jpg" class="img">
        <p class="p">MelanceXin</p>
    </div>
</body>

</html>

针对鼠标不能跟着图片一起行动的情况

html:hover .img{					//实现效果，鼠标放在页面内就执行 .img的animation
		animation-name:image_a;  	// animation 名字
		animation-delay:500ms;			//animation 延迟
		animation-duration:1s;			//animation 持续时间
		animation-fill-mode:forwards;		//动画停止在最后一帧   若没进行设置，动画则会在结束后回到起始位置
	}

可以不用animation，用 transition 也能实现图片的移动，如下

html:hover .img{
transition-delay:500ms'
transition-duration:1s;
width:100px;
height:100px;
margin-top:0px;
}

对比：animation 使用功能更加详细，但是同transition 相比之下，在简单的实现效果下，写法上显得更加复杂。

相关推荐