CSS动画

Dear 丶 2023-01-14 12:58 196阅读 0赞

效果图：

![20210420183258301.gif][]

实现效果描述:

子元素相对父元素水平垂直居中并重复循环放大缩小

实现代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.block {
    				height: 300px;
    				width: 300px;
    				border: 1px solid #FF0000;
    				align-items: center;
    				display: flex;
    				justify-content: center;
    			}
    
    			.item {
    				width: 100px;
    				height: 100px;
    				border-radius: 50%;
    				border: 1px solid #FF0000;
    				color: red;
    				animation: mymove 5s infinite;
    			}
    
    			@keyframes mymove {
    				0% {
    					width: 100px;
    					height: 100px;
    				}
    
    				50% {
    					width: 210px;
    					height: 210px;
    				}
    				100% {
    					width: 100px;
    					height: 100px;
    				}
    			}
    
    			@-webkit-keyframes mymove
    
    			/* Safari and Chrome */
    				{
    				from {
    					top: 0px;
    				}
    
    				to {
    					top: 200px;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div class="block">
    			<div class="item">
    			</div>
    		</div>
    	</body>
    </html>

[20210420183258301.gif]: /images/20221022/7bfe18582cc04179b03ce7bd38d643c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

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

相关阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 199 阅读

相关 CSS动画

效果图： ![20210420183258301.gif][] 实现效果描述: 子元素相对父元素水平垂直居中并重复循环放大缩小实现代码： <!DOCTYPE

Dear 丶/ 2023年01月14日 12:58/ 0 赞/ 197 阅读

相关 css 动画

上下滑动 html <div class="kaiqi">点击开启</div> css .kaiqi { color: ffffff;

川长思鸟来/ 2022年11月05日 05:24/ 0 赞/ 173 阅读

相关 css动画

在CSS中主要通过@keyframes和animation来实现的： @keyframes制定了一个元素的css样式变化的方式，也就是通过css央视的逐步改变，让它动起来，也

怼烎@/ 2022年10月29日 13:20/ 0 赞/ 394 阅读

相关【CSS 】动画animation

作为博主简单记录：深入学习请查看文末参考资料前面有提到过过渡效果[css transition][],实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的，而且

╰半橙微兮°/ 2022年07月13日 08:14/ 0 赞/ 315 阅读

相关 CSS动画

CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @keyframes

Bertha 。/ 2022年06月07日 02:51/ 0 赞/ 292 阅读

相关 css动画

纯CSS3实现的8种Loading动画效果<div class="load1" > <div class="loader">加载中</div>

系统管理员/ 2022年06月05日 08:42/ 0 赞/ 243 阅读

相关 css动画

动画移动时间 animation: move 13s; 一直移动,无限循环 animation-iteration-count: infinite; 从A移动到

叁歲伎倆/ 2022年06月05日 00:53/ 0 赞/ 269 阅读

相关 CSS动画

摘自阮一峰老师的博客 [http://www.ruanyifeng.com/blog/2014/02/css\_transition\_and\_animation.html]

喜欢ヅ旅行/ 2022年05月10日 00:54/ 0 赞/ 250 阅读

相关 CSS-动画

前言本文主要内容：过渡：transition 2D 转换 transform（scale，translate，rotate）

冷不防/ 2022年05月03日 09:30/ 0 赞/ 251 阅读