web前端学习11-css动画实例

最新推荐文章于 2024-07-26 08:00:00 发布

修罗_

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量93

点赞数

分类专栏： web前端新手必看16篇文章标签： css html html5 web

本文链接：https://blog.csdn.net/weixin_45843676/article/details/106729840

版权

web前端新手必看16篇专栏收录该内容

16 篇文章 1 订阅

订阅专栏

web前端学习11-css动画实例

<html>
	<head>
		<meta charset="utf-8">
		<title>HTML动画过渡实例</title>
		<style type="text/css">
			.div{
				text-align: center;
			}
			.image{
				margin-top: 20px;
				width: 20%;
				height: 20%;
			}
			html:hover .image{/* 鼠标就如网页界面就会改变image */
				animation-name: img;/* 动画名称 */
				animation-delay: 100ms;/* 延迟时长 */
				animation-duration: 5s;/* 动画时长 */
				animation-fill-mode: forwards;/* 设置这个forwards,
				当鼠标不移出区域就会使动画停留在to阶段 */
			}
			@keyframes img{
				from{}
				to{
					margin-top: 0px;
					margin-bottom: 0px;
					padding:0px;
					width: 50%;
					height: 50%;
				}
			}
			
			.hero{
				font-family: "arial, helvetica, sans-serif";
				font-size: 40px;
				text-shadow: 1px 1px 5px red ;/* 水平偏移1px,垂直偏移1px,模糊程度2px,色值 */
				margin-top: 0px;
				opacity: 0;
			}
			html:hover .hero{
				transition-delay: 0.5s;/* 动画时长 */
				transition-duration: 0s;/* 延迟时间 */
				font-family: "arial, helvetica, sans-serif";
				font-size: 40px;
				text-shadow: 1px 1px 5px blue ;
				margin-top: 0px;
				opacity: 0.9;
			}
			html:
		</style>
	</head>
	<body>
		<div class="div">
			<img class="image" src="image/weizh.jpg"/>
			<p class="hero">英雄皮肤</p>
			<img class="image2" src="image/u=1340842496,1488220004&fm=26&gp=0.jpg"/>
		</div>
	</body>
</html>

文章仅供参考

修罗_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端学习11-css动画实例

界面浏览 HTML动画过渡实例 <html> <head> <meta charset="utf-8"> <title>HTML动画过渡实例</title> <style type="text/css"> .div{ text-align: center; } .image{ margin-top: 20px; width: 20%; height
复制链接

扫一扫