html+css3实现动画demo

最新推荐文章于 2023-03-03 14:17:52 发布

源码plus

最新推荐文章于 2023-03-03 14:17:52 发布

阅读量736

点赞数 2

本文链接：https://blog.csdn.net/qq_38310446/article/details/103615293

版权

CSS3  2D转换----x y
  css3转换可以对元素进行移动，缩放，转动，拉长或者拉伸
  转换的效果是让某个元素改变形状，大小和位置
  3D转换则是X,Y,Z
  2D转换
  translate(x,y)    移动像素
  rotate()          旋转角度
  scale(x,y)        缩放拉伸  
  skew()            旋转倾斜
  matrix()
过渡
		 * 2D转换  transform 一定要和transition配合
		 * transition   设置过度的时间，过度的类型
		 *                              width,height,transform(改变)

动画：
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果
@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式
 @keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
 还可以用百分比来标识时间
 @keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

当你鼠标放入上面，会显示另一种图片

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>

		<style>
			.myCard {
				position: relative;
				cursor: pointer;
				width: 240px;
				height: 300px;
				transition: 1s ease-in-out;
				transform-style: preserve-3d;
			}
			
			.myCard:hover {
				transform: rotateY(0.5turn);
			}
			
			.card_img {
				position: absolute;
				height: 100%;
				width: 100%;
				left: 0px;
				top: 0px;
				transition: 1s ease-in-out;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				transition: 1s ease-in-out;
				-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
			}
			
			.card_img img {
				width: 240px;
				height: 300px;
			}
			
			.myCard .card_before {
				transform: rotateY(180deg);
			}
		</style>
		<div class="myCard">

			<div class="card_img card_before">
				<img src="../../img/1.jpg" />
			</div>
			<div class="card_img card_after">
				<img src="../../img/0.jpg" />
			</div>

		</div>

	</body>

</html>

圆形无限旋转

	
		<style>
			/**
			 * 特别注意：动画是from一个css样式
			 *            to  一个css样式
			 */
			@keyframes towFrames{
				from{
					transform: rotate(0deg);
				}
				to{
					transform:rotate(360deg);
				}
			}
			.two{
				height: 100px;
				width: 100px;
				background-color: olivedrab;
				border-radius: 50% 50%;
				animation: towFrames 5s linear infinite;
				text-align: center;line-height: 100px;
			}
		</style>
		
		<div class="two">
			旋转
		</div>

源码plus

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html+css3实现动画demo

CSS3 2D转换----x y css3转换可以对元素进行移动，缩放，转动，拉长或者拉伸转换的效果是让某个元素改变形状，大小和位置 3D转换则是X,Y,Z 2D转换 translate(x,y) 移动像素 rotate() 旋转角度 scale(x,y) 缩放拉伸 skew() 旋转倾斜...
复制链接

扫一扫