书小宅网页设计CSS3——animation动画

书小宅

已于 2022-07-13 10:26:22 修改

阅读量404

点赞数

分类专栏：前端文章标签： CSS3椭圆到方形的渐变钟摆动画 animation

于 2019-07-28 19:31:31 首次发布

本文链接：https://blog.csdn.net/qq_36447261/article/details/97617704

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Animation

在这里插入图片描述

矩形向椭圆的渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3矩形向椭圆的渐变</title>
<style>
	.shape-1{
		animation-name:rad;/*绑定*/
		animation-duration:5s;/*运行的时间*/
		animation-iteration-count:infinite;/*运行的次数*/
		animation-direction:alternate-reverse;/*轮播*/
		width: 400px;
		height:300px; 
		background-color:#5c0240;
	    margin:30px auto; 
		border-radius:50%
	} 
	/*长宽不同时，border-radius属性值为百分比则是椭圆，是像素值则形如胶囊*/
	
	/*加动画：制作动画的关键词keyframe：关键帧*/
	@keyframes rad{
		0%{border-radius:0}/*开始帧*/
		100%{border-radius:50%}/*结束帧*/
		/*动画的名字必须和相应的类或值绑定*/
	}
</style>
</head>

<body>
<section>
    <div class="shape-1"></div>
</section>
<script>
</script>
</body>
</html>

在这里插入图片描述
###钟摆

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3钟摆动画</title>
<style>
	.swing{
		width:630px; 
		height:400px; 
		border:1px solid #aaa;
		margin:auto
	} 
	.line{
		/*动画的简写格式：*/
		/*animation:name duration timing-function delay iteration-count direction*/
		animation:swing 5s infinite;
		animation-direction:alternate;
		animation-timing-function:ease-in-out;
		
		width:2px;
		height:260px;
		background-color:#333;
		margin:auto;
		position:relative;
		/*旋转中心从摆线转移到旋转点*/
		transform-origin:center top;
	}
	/*画固定线的小圆，径向渐变填充*/
	.line:before{
		content:"";
		width:10px;
		height:10px;
		/*中心亮点，颜色渐变到外侧*/
		background:radial-gradient(#fff 0%,#333 100%);
		position:absolute;/*定位之后变成块*/
		left:-5px;/*固定点向中间定位*/
		border-radius:50%;/*利用圆角矩形的实现原理将方形变成圆*/
	}
	/*作摆钟的大圆*/
	.line:after{
		content:"";
		width:50px;
		height:50px;
		background:radial-gradient(#fff 0%,#ff9900 100%);
		border-radius:50%;
		position:absolute;
		/*大圆移动到末端*/
		left:50%;
		transform:translate(-50%);
		top:100%;
	}
	@keyframes swing{
		0%{transform:rotate(-90deg)}
		100%{transform:rotate(+90deg)}
	}
</style>
</head>

<body>
<section>
<!--swing类中有钟摆类line-->
    <div class="swing">
    	<div class="line"></div>
     </div>
<ction>
<script>
</script>
</body>
<ml>

在这里插入图片描述

书小宅

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
书小宅网页设计CSS3——animation动画

Animation矩形向椭圆的渐变<!doctype html><html><head><meta charset="utf-8"><title>CSS3矩形向椭圆的渐变</title><style> .shape-1{ animation-name:rad;/*绑定*/ animatio...
复制链接

扫一扫

专栏目录