CSS_跳动的心

最新推荐文章于 2023-11-12 00:15:00 发布

有园人

最新推荐文章于 2023-11-12 00:15:00 发布

阅读量453

点赞数 1

分类专栏：网页编程和设计不忘初心，方得始终文章标签： CSS_跳动的心

本文链接：https://blog.csdn.net/qq_42031653/article/details/99477342

版权

不忘初心，方得始终同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

网页编程和设计

33 篇文章 0 订阅

订阅专栏

详细教程CSS3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>	
		<style type="text/css">
		body{
			background-color: #ffa5a5;
		}
			.cen{
				width: 200px;
				height:200px;
				background-color: #d5093c;
				
				
				/*阴影效果：   水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
				box-shadow: 10px -10px 70px #D5093C;
				animation: 1s aj infinite;
			}
			
			/*倒圆角指令*/
			.lef{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 180px;
			}
			.rig{
				border-radius: 100px;
				position: absolute;
				top: 200px;
				left: 320px;
			}
			
			/*旋转角度*/
			.c{
				transform: rotate(45deg);
				position: absolute;
				top: 270px;
				left: 250px;
				
			}
			
			/*div:hover{*/
				/*放大原有图形*/
				/*transform: scale(1.3);*/
				
				/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/
				/*transform: skew(45deg);*/
				
				/*移动 显示水平位移，然后是垂直位移  （负数就是向上）*/
				/*transform: translate(0px,-5px);*/
			/*}*/
			
			/*动画标签*/
			@-webkit-keyframes aj{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.2) rotate(45deg);}
				100%{transform: scale(1.) rotate(45deg);}
			}
			
		</style>
	</head>
	<body>
		<div class="cen lef"></div>
		<div class="cen c"></div>
		<div class="cen rig"></div>
	</body>
</html>

用到CSS3的标签 :

/*阴影效果：水平方向的偏移，垂直方向的偏移，模糊度，颜色*/

box-shadow: 10px -10px 70px #D5093C;

/*倒圆角指令*/

border-radius: 100px;

/*旋转角度 deg就是角度的意思*/

transform: rotate(45deg);

/*放大原有图形*/

transform: scale(1.3);

/*动画标签*/

@-webkit-keyframes aj{
				0%{transform: scale(1) rotate(45deg);}
				50%{transform: scale(1.2) rotate(45deg);}
				100%{transform: scale(1.) rotate(45deg);}
			}

/*调用动画的方法*/

animation: 1s aj infinite;

针对不同的浏览器CSS3有不同的方法：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

有园人

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS_跳动的心

详细教程CSS3<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color: #ffa5a5; } ...
复制链接

扫一扫

专栏目录