CSS3-制作一个简单的动画

最新推荐文章于 2021-06-09 10:03:16 发布
最新推荐文章于 2021-06-09 10:03:16 发布
阅读量1.5k 收藏 5
点赞数 2
分类专栏： 前端端端端端端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/william_jzy/article/details/80409251
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			html,body{
				width: 100%;
				background-color: dodgerblue;
				overflow: hidden;
			}
			/*sea*/
			.sea{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 235px;
			}
			.sea>div{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url(img/1.png) no-repeat bottom left;
				opacity: 0.3;
			}
			.sea>.sea1{
				animation: sea 1s linear infinite alternate;
			}
			.sea>.sea2{
				background-image: url(img/2.png);
				animation: sea 1s linear infinite alternate 0.5s;
				
			}
			
			@keyframes sea{
				0%{
					bottom: 0px;
				}
				100%{
					bottom: -30px;
				}
			}
			
			/*sun*/
			.sun{
				position: absolute;
				left: 100px;
				top: 100px;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: #fff;
			}
			.sun>div{
				position: absolute;
				left: 0;
				top: 0;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: #fff;
			}
			.sun .sun1{
				animation: sun 1s infinite;
			}
			.sun .sun2{
				animation: sun 1s infinite 0.5s;
			}
			@keyframes sun{
				0%{
					transform: scale(1);
					opacity: 1;
				}
				100%{
					transform: scale(1.5);
					opacity: 0.1;
				}
			}
			
		</style>
	</head>
	<body>
		<div class="sun">
			<div class="sun1"></div>
			<div class="sun2"></div>
		</div>
		<div class="sea">
			<div class="sea1"></div>
			<div class="sea2"></div>
		</div>
	</body>
</html>

效果如图

这里写图片描述

可乐爆米花
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AE 制作一个简单的动画
sinat_24196195的博客
07-10 1万+
创建一个简单的动画 常用快捷键：command + 3 打开预览界面；空格键 直接预览 1、 command + N 创建一个工作空间，尺寸选择 720 x 1280 或者如图在当前工作空间右键 New Composition 2、在下方工作空间中右键New –> Solid –> ok,新建一个正方形于工作区间。如图3、打开刚刚新建图层的选项，直至最后一级，我们可以看到Anchor Poi
一步一步制作最简单的动画
网壳工作室 www.our3w.cn
10-15 810
 1、新建flash文档菜单选“文件>新建”，弹出对话框选“flash文档” 2、在舞台上绘制一个圆 3、创建元件选中刚才画的圆，惨淡选“修改>转换为元件”弹出对话框键入“名称”为my_circle，默认行为是“影片剪辑” 确定，圆周围将显示一个方形边框新元件将显示在“库”面板（菜单选“窗口>库”） 4、创建动画将圆拖动到舞台区域的左侧
css简易动画制作
weixin_47463009的博客
06-09 233
简单2d动画转换实例：由方形到圆的过渡以及颜色变化。 代码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
CSS动画简单制作
weixin_46421045的博客
03-16 126
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;height: 0;} body,html{height: 100%;} ...
简单的动画制作
用于记录、查询和分享
07-26 493
制作动画比较简单的就是使用ObjectAnimator类来制作，顾名思义，类的动画制作器，这个类特指View类及其子类，算是制作视图的动画类。     ObjectAnimator按照动画的动作有很多种类型，比如滑动动画float型的，属性变化型的int型的，具体的ObjectAnimator类型在创建实例时指定，比如：     ObjectAnimator exampleAnimator =
利用css3-animation实现逐帧动画效果
01-19
本文分享了用css3-animation来制作逐帧动画的实现方法，供大家参考，具体内容如下 常见用法： CSS Code复制内容到剪贴板 :hover{ animation:mymove 4s ease-out 1s backwards;} @-webkit-keyframes mymove...
CSS3-3D动画制作旋转立方体
01-20
本文将详细介绍如何使用CSS3创建一个旋转的立方体动画。这个过程主要依赖于CSS3的3D变换属性，包括`transform`, `perspective`, `transform-style`, 和 `@keyframes`。 首先，制作旋转立方体的核心在于理解3D空间中...
动画制作2.0#CSS-----动画练习
04-13
动画制作2.0#CSS-----动画练习
css3制作的input文本框动画特效
06-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是能创建出各种动态的input文本框动画特效。这款特效专注于提供简单而美观的网址链接和邮箱格式输入框的焦点效果，增强...
CSS-3D悬停相册动画
最新发布
03-21
制作CSS-3D悬停相册动画时，通常会将相册的每个图片封装在一个容器中，并应用3D变换。通过调整`transform`属性和添加悬停事件，当用户将鼠标悬停在相册项上时，可以实现相片的旋转、缩放、平移等效果，营造出立体...
css简单实现环形动画效果，无需js
11-11
简单css实现环形动画效果，无需js；本资源适用于移动端、pc端，兼容性各大浏览器
HTML5+css3动画制作简易魔方模板
08-06
HTML5+css3动画制作简易魔方模板
html5仿微信聊天语音发送话筒录音动画特效.zip
12-18
html5制作手机微信聊天语音发送话筒录音动画效果。手指按住说话，松开结束语音发送特效。内含源码及图片素材
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
css3的简单动画效果（animation和transition）
weixin_37552710的博客
07-18 613
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 （1）    平移translate(x值，y值) （2）    旋转rotate(角度) ex:rotate(45deg); 正数为顺时针旋转。 （3）    倾斜skew(水平倾斜，垂直倾斜) ex:skew(20deg,3odeg) 原点为盒子的中心点（水平方向为y轴，垂直方
使用HTML+css制作简易动画
fffffcc的博客
06-01 655
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title></title> <style type="text/css"> @keyframes mymovie{ 0%{ left:0px; top:0px; } 20%{ left:200px; top:0px; } 70%{
css小动画：圆形1s内从小变大随时间渐变
anliao6401的博客
10-25 600
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .yxdh{ width:200px; height:200...
html动画变大,CSS3 由小变大的过渡动画
weixin_39517520的博客
06-07 1411
一个DIV，由小变大，然后加透视怎么实现啊。单纯的使用scale好像不怎么明显啊。如果加上透视，效果更逼真啊。用动画啊，`<head><meta charset="UTF-8"><title>动画</title><style>.div{width: 100px;height: 100px;position: absolute;backgr...
css3动画产生圆圈从小到大
liying123466的博客
04-21 4777
这里就是通过css3实现了像涟漪一样的效果 >   html>   head>   meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   title>无标题文档title>   style>   @keyframes warn {       0% {           transform:
CSS3 的box-shadow进阶之 - 动画篇 - 制作辐射动画
05-18
CSS3 的box-shadow属性可以用来制作各种各样的阴影效果，包括辐射动画。下面就来介绍一下如何使用box-shadow属性制作辐射动画。 首先，我们需要一个有背景色的元素，并给它设置一个box-shadow属性，如下： ```css ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值