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

古城微笑少年丶 2023-02-17 08:56 10阅读 0赞

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 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

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

web前端学习11-css动画实例 <html> <head> <meta charset="utf-8"> <title>HTML

古城微笑少年丶/ 2023年02月17日 08:56/ 0 赞/ 11 阅读

相关 web前端学习10-css盒子模型

学习10-css盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

我就是我/ 2023年02月17日 06:29/ 0 赞/ 170 阅读

相关 web前端学习9-css动画变换

css动画变换 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

朱雀/ 2023年02月17日 05:13/ 0 赞/ 183 阅读

相关 web前端学习7-css动画过渡

学习7-css动画过渡 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

待我称王封你为后i/ 2023年02月17日 05:05/ 0 赞/ 29 阅读

相关前端常用动画CSS代码

/ animation / .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-we

红太狼/ 2022年12月27日 02:17/ 0 赞/ 236 阅读

相关 CSS前端动画

CSS动画（animation）结构： @keyframes test { / from或者0% /

旧城等待，/ 2022年09月04日 09:45/ 0 赞/ 167 阅读

相关 Web前端学习（2）_css

Web前端学习（2）\_css 1.CSS入门 > 1.1 引入 > > html：负责网页的结构 > > css：负责网页的样式 > > > > > 1

野性酷女/ 2022年06月14日 11:49/ 0 赞/ 203 阅读

相关前端性能优化（css动画篇）

1、原理： css3动画绘制效率高的方法： ☆改变位置 ☆改变大小 ☆旋转 ☆改变透明度 2、CSS的图层的概念（Chrome浏览器）（1）浏览器所做的

墨蓝/ 2022年04月22日 13:34/ 0 赞/ 399 阅读

相关 WEB前端笔记CSS-3D动画，网友：很细节，优秀！

![WEB前端笔记CSS-3D动画，网友：很细节，优秀！][WEB_CSS-3D] 3D在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加

悠悠/ 2022年01月29日 09:13/ 0 赞/ 238 阅读

相关 web前端---CSS 学习（一）

在学习牛腩系统的过程中涉及到了CSS的相关知识，CSS是使用较多的而且当下很多面试的公司都需要CSS。所以今天小编就带大家来简单了解一

朱雀/ 2021年11月23日 07:14/ 0 赞/ 386 阅读