vue时钟+vue旋转特效

最新推荐文章于 2024-07-03 14:05:29 发布

月夜流心

最新推荐文章于 2024-07-03 14:05:29 发布

阅读量1k

点赞数

分类专栏： vue css3 文章标签： vue.js css3 vue旋转动画

本文链接：https://blog.csdn.net/qq_33883147/article/details/122175065

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

旋转关键css3

使用keyframes 指定旋转角度和旋转动画时间百分比

@keyframes changDeg {
				0% {
					transform: rotate(0deg);
				}

				50% {
					transform: rotate(250deg);
				}

				70% {
					transform: rotate(150deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			#需要旋转的类ID {
				animation: changDeg 5s linear 0s infinite;
			}

时钟

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue.js数字时钟</title>
		<style>
			html,
			body {
				height: 100%;
			}

			body {
				background: #0f3854;
				background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
				background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
				background-size: 100%;
			}

			p {
				margin: 0;
				padding: 0;
			}

			#clock {
				font-family: 'Share Tech Mono', monospace;
				color: #ffffff;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				color: #daf6ff;
				text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
			}

			@keyframes changDeg {
				0% {
					transform: rotate(0deg);
				}

				50% {
					transform: rotate(250deg);
				}

				70% {
					transform: rotate(150deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			#clock .time {
				letter-spacing: 0.05em;
				font-size: 80px;
				padding: 5px 0;
				animation: changDeg 5s linear 0s infinite;
			}

			#clock .date {
				letter-spacing: 0.1em;
				font-size: 24px;
			}

			#clock .text {
				letter-spacing: 0.1em;
				font-size: 12px;
				padding: 20px 0 0;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<div id="clock">
			<p class="date">{{ date }}</p>
			<p class="time">{{ time }}</p>
			<p class="text">数字时钟</p>
		</div>
		<script>
			var clock = new Vue({
				el: '#clock',
				data: {
					time: '',
					date: ''
				}
			});

			var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			var timerID = setInterval(updateTime, 1000);
			updateTime();

			function updateTime() {
				var cd = new Date();
				clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd
					.getSeconds(), 2);
				clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd
					.getDate(), 2) + ' ' + week[cd.getDay()];
			};

			function zeroPadding(num, digit) {
				var zero = '';
				for (var i = 0; i < digit; i++) {
					zero += '0';
				}
				return (zero + num).slice(-digit);
			}
		</script>
	</body>
</html>