动画实现始终效果案例（动画的使用，居中的使用）

最新推荐文章于 2022-09-22 11:12:49 发布
最新推荐文章于 2022-09-22 11:12:49 发布
阅读量539 收藏
点赞数
分类专栏： h5 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqiitan/article/details/88397195
版权
h5 同时被 2 个专栏收录
48 篇文章 0 订阅
订阅专栏
CSS
27 篇文章 0 订阅
订阅专栏 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟案例</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.clock {
				width: 300px;
				height: 300px;
				border: 10px solid #CCCCCC;
				/* border-radius: 160px; */
				/* 百分比参照元素的实际宽高 */
				border-radius: 50%;
				margin: 100px auto;
				position: relative;
			}

			/* 先设置共同的样式 */
			.line {
				width: 8px;
				height: 300px;
				background-color: #CCCCCC;
				position: absolute;
				left: 50%;
				/* 参照父元素 */
				top: 0;
				/* 参照元素本身 */
				transform: translate(-50%, 0);
			}
			.line1, .line4 {
				/* 统一针对线条1，4设置宽一些 */
				width: 10px;
			}
			.line2 {
				/* 要把之前的transform值也写一份，不然会有UI异常。 */
				transform: translate(-50%, 0) rotate(30deg);
			}
			.line3 {
				transform: translate(-50%, 0) rotate(60deg);
			}
			.line4 {
				transform: translate(-50%, 0) rotate(90deg);
			}
			.line5 {
				transform: translate(-50%, 0) rotate(120deg);
			}
			.line6 {
				transform: translate(-50%, 0) rotate(150deg);
			}

			.cover {
				width: 250px;
				height: 250px;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			.hour {
				width: 6px;
				height: 80px;
				background-color: red;
				position: absolute;
				/* 定位 */
				left: 50%;
				/* 水平居中 */
				top: 50%;
				transform: translate(-50%, -100%);
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 43200s linear infinite ;
			}
			.minute {
				width: 4px;
				height: 100px;
				background-color: green;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -100%);
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 3600s linear infinite ;
			}
			.second {
				width: 2px;
				height: 120px;
				background-color: gray;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -100%);
				/* 设置旋转轴心 */
				transform-origin: center bottom;
				/* 添加动画 */
				animation: clockAnimation 60s linear infinite ;
				/* steps与animation-timing-function的其他属性冲突 */
				animation-timing-function: steps(60);
			}
			.center {
				width: 20px;
				height: 20px;
				background-color: #CCCCCC;
				position: absolute;
				left: 50%;
				top: 50%;
				border-radius: 10px;
				transform: translate(-50%, -50%);
			}
			/* 创建动画 */
			@keyframes clockAnimation {
				from {
					transform: translate(-50%, -100%) rotate(0deg);
				}
				to {
					transform: translate(-50%, -100%) rotate(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="clock">
			<div class="line line1"></div>
			<div class="line line2"></div>
			<div class="line line3"></div>
			<div class="line line4"></div>
			<div class="line line5"></div>
			<div class="line line6"></div>
			<!-- 覆盖物 -->
			<div class="cover"></div>
			<div class="hour"></div>
			<div class="minute"></div>
			<div class="second"></div>
			<div class="center"></div>
		</div>
		</div>
	</body>
</html>

 

xqiitan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css动画属性+垂直居中
weixin_43859703的博客
09-23 851
css动画属性
杂记（animate方法实现元素居中）
banmao8461的博客
09-05 254
1 动画实现margin:auto; 想要使用动画效果令元素居中，我首先反应到的是使用transition或者animate()方法，然而animate()只接受数值作为参数，即如 $("#div").animate({margin:'20px auto'},'slow') 是无效的，同样的使用transition这个CSS属性也是对于直接定义margin:2...
URL到页面加载；css3动画与js动画；水平、垂直居中
TangJing_的博客
11-13 1261
输入URL到页面加载全过程 域名解析 通过DNS将域名解析成IP地址（域名到IP地址的转换） 本地的DNS服务器向域名的解析服务器发送请求，会收到域名与IP地址的对应关系。本地DNS服务器将IP地址返回给用户电脑，同时将此对应关系保存在缓存中，使得用户在下次查询时若对应关系相同则可以直接返回结果，加快网络访问。 建立TCP连接（3次握手） 浏览器发出HTTP请求 服务器响应HTTP请求 浏览器渲染页面 关闭连接（4次挥手） css3动画和js动画 水平居中 垂直居中 水平..
绝对定位居中、动画
qq_41827365的博客
09-22 425
绝对定位居中、动画
动画和flex布局
weixin_33850890的博客
12-06 273
动画 transition 缓动 transition-property：变化属性 transition-duration：时间 transition-timing-function：缓动函数/步数step() transition-delay:延迟时间，当为负数的时候会有渐变效果。transition: height 4s linear -2s直接渐变到为2s的值。 animation 动画...
[前端案例03]六个css动画相关案例
最新发布
06-21
2.三栏居中方式：将中间div置于结构最下方，分别给左右两侧内容设置左右浮动，这时由于左右两侧内容高度塌陷，最下方的div会向上位移，给该元素设置居中。 html代码： <div class="left"></div> ...
使用div+css开发个人网站毕业设计.doc
05-26
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
point_drawing:这是一个用于绘制、动画和生成形状的桌面应用程序
07-12
使动画在小部件中居中，并使其更显眼 添加一个主窗口并让显示小部件占据顶部的 2/3，底部有一个配置面板 添加复杂的形状（例如 4 朵花瓣） 添加对从文件中读取点的支持 (LARGE) 实现一个回归算法，将文件中的点与...
HtmlDemo:一些平时学习 HTML、CSS 的案例
05-24
学习前端时练习的html案例 ...过渡动画效果 一列固定布局 一列自适应布局 三列左右固定 三列自适应布局 两列居中固定布局 两列居中自适应布局 两列自适应布局 混合布局1 混合布局2 混合布局3 混合布局4 混合自适应布局
css3中居中的主流做法，css中居中
imkaifan的博客
02-20 307
css3中居中的主流做法，css中居中
CSS水平居中和垂直居中的方法总结-形变及动画的基本使用
m0_71485750的博客
05-29 393
transform属性值(掌握) 位移 transform: tanslate(x, y) ; 一个值表示设置x轴上的位移 两个值表示设置x轴和y轴上的位移 单独设置x轴位移 transform: tanslateX(x) ; 单独设置y轴位移 transform: tanslateY(y); x 和 y 的值为百分比时 如果x轴设置为百分比: 那么参考的是自身的宽度 如果y轴设置为百分比: 那么参考的是自身的高度 缩放 transform-scale(x, y) 一个值表示设置x轴
2-10 CSS动画（transform全解、绝对定位元素居中、transition过渡、animation）
前端知识库
04-15 1831
浏览器渲染原理 1.概念 帧：每个静止的画面叫做帧 播放速度：每秒24帧（影视）或者每秒30帧（游戏） 2.浏览器渲染过程 步骤 1.根据HTML构件HTML树 2.根据CSS构件CSS树 3.将两棵树合并成一棵渲染树（render tree） 4.Layout布局（文档流、盒模型、计算大小和位置）：相当于布局框架，一幅画的素描结构 5.Paint绘制（把边框颜色、文字颜色、阴影等画出来） 6.Compose合成（根据层叠关系展示画面）：就像ps绘图一样，把每一层的内容合并拍平成一层。 树： 3.如何更新
css360度无限循环
荆轲刺秦王
02-14 361
.xuanzhuan{ -webkit-animation: rotate 60s linear infinite; -moz-animation: rotate 60s linear infinite; -o-animation: rotate 60s linear infinite; animation: rotate 60s linear infinite;...
元素增加animation后，绝对定位居中失效解决办法
薛小科的博客
09-02 1843
以下是绝对定位的垂直居中代码，但是加上animation后发现元素居然不居中了。（这里实现的是 loading 动画，可以放到 run 上看看效果） .container{ width: 400px; height: 400px; background: #eee; position: relative; } .center{ background: blue; position:absolute; top: 50%; left: 50%; transform: tran
CSS定位实现图片居中效果
weixin_41879063的博客
03-31 505
Document } .out{ width: 100%; height: 2000px; background-color: #abcdef }
bootstrap实战（五）- 按钮动画和图片并列居中显示
鲸鱼姐的专栏
11-19 693
技术要点: 1. 按钮变化 由圆角变成直角border-radius:0px; 边框加粗 {border:1pxsolid#3cbfb8}; 背景透明 background:transparent; 按钮内文字颜色：color:#40d2b1; 2.按钮动画transition: all 0.3s; 变换后的效果：.course3 .btn:hover...
css3上下居中
热门推荐
周家大小姐
10-16 1万+
第三种是给父级添加样式。先写这几种， 够大家用了，还有通过伪类实现居中的效果，有兴趣的可以自己敲下试试 第一种 css3的transform写在子级上 .ele{ display:inline-block; /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 50%;...
缩放动画（ScaleTransform）
weixin_30376453的博客
07-25 1715
在Silverlight的动画框架中，ScaleTransform类提供了在二维空间中的坐标内进行缩放操作，通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象，以实现一个简单的缩放动画效果，故此我将其称为缩放动画（ScaleTransform）。使用ScaleTransform需要特别关注的有两点：中心点坐标和X、Y轴方向的缩放比例，比例值越小则对象元素就越小（既收缩），比例值越...
css让div居中使用动画
05-24
可以使用以下CSS样式将一个 div 元素居中，并添加过渡动画效果： ```css div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.5s ease-in-out; } div:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值