CSS3(4)

已于 2022-01-29 11:45:37 修改
阅读量564 收藏
点赞数
文章标签： css html 前端
于 2021-12-26 13:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60179418/article/details/122077214
版权
本文通过实例展示了如何使用HTML5和CSS3创建扇形导航、时钟动画以及2D开机动画，详细解析了CSS3的关键帧动画属性如animation-name、animation-duration等，并提供了兔斯基和开机动画的实现代码。通过这些示例，读者可以深入理解HTML5和CSS3在网页动态效果和交互设计中的应用。
摘要由CSDN通过智能技术生成

目录

扇形导航

时钟

动画

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

关键帧

兔斯基

开机动画（2D）

扇形导航

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扇形导航</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: absolute;
				right: 15px;
				bottom: 15px;
				width: 50px;
				height: 50px;
			}
			#wrap > #inner > img{
				left: 0;
				top: 0;
				margin: 4px;
				position: absolute;
				border-radius: 50%;
			}
			#wrap > #inner{
				height: 100%;
			}
			#wrap > .home{
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: url(img/home.png) no-repeat;
				border-radius: 50%;
				transition: 1s;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				<img src="img/clos.png"/>
				<img src="img/full.png"/>
				<img src="img/open.png"/>
				<img src="img/prev.png"/>
				<img src="img/refresh.png"/>
			</div>
			<div class="home">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var homeEle = document.querySelector(".home");
			var imgs=document.querySelectorAll("#wrap > #inner > img");
			var flag=true;
			var c=140;
			//第二部分：
			function fn(){
				this.style.transition="0.3s ";
				//恢复原样
				this.style.transform="rotate(-720deg) scale(1)";
				this.style.opacity=1;
				//解除绑定
				this.removeEventListener("transitionend",fn);
			}
			for(var i=0;i<imgs.length;i++){
				imgs[i].onclick=function(){
					this.style.transition="0.5s ";
					//点击时，放大并且透明
					this.style.transform="rotate(-720deg) scale(2)";
					this.style.opacity=0.1;
					//绑定事件
					this.addEventListener("transitionend",fn);
				}
			}
			
			//第一部分：旋入与旋出
			homeEle.onclick=function(){
				if(flag){
					this.style.transform="rotate(-720deg)";
					for(var i=0;i<imgs.length;i++){
						//图片旋转的动画效果
						imgs[i].style.transition="1s "+(i*0.1)+"s";
						imgs[i].style.transform="rotate(-720deg) scale(1)";
						//图片旋出的动画效果
						imgs[i].style.left=-getPoint(c,90*i/(imgs.length-1)).left+"px";
						imgs[i].style.top=-getPoint(c,90*i/(imgs.length-1)).top+"px";
					}
				}else{
					this.style.transform="rotate(0deg)";
					for(var i=0;i<imgs.length;i++){
						//图片旋转的动画效果
						imgs[i].style.transition="1s "+((imgs.length-1-i)*0.1)+"s";
						imgs[i].style.transform="rotate(0deg) scale(1)";
						//图片回到原来位置的动画效果
						imgs[i].style.left=0+"px";
						imgs[i].style.top=0+"px";
					}
				}
				flag=!flag;
			}
			
			//已知第三边和一个角，计算left,top
			//c表示第三边，deg表示已知角
			function getPoint(c,deg){
				var x = Math.round(c * Math.sin(deg*Math.PI/180));
				var y = Math.round(c * Math.cos(deg*Math.PI/180));
				
				return {left:x,top:y};
			}

		}
	</script>
</html>

时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时钟</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.wrap{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -100px;
				margin-top: -100px;
				height: 200px;
				width: 200px;
				border: 1px solid;
				border-radius: 50%;
			}
			ul > li{
				position: absolute;
				left: 99px;
				top:0;
				width: 2px;
				height: 10px;
				background: black;
				transform-origin: center 100px;
			}
			ul > li:nth-child(5n+1){
				height: 15px;
			}
			.wrap > .hour{
				position: absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background: black;
				transform-origin: center bottom;
			}
			.wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background: gray;
				transform-origin: center bottom;
			}
			.wrap > .sec{
				position: absolute;
				left: 99px;
				width: 2px;
				top: 30px;
				height: 70px;
				background: red;
				transform-origin: center bottom;
			}
			.wrap > .icon{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var hourNode=document.querySelector(".wrap > .hour");
			var minNode=document.querySelector(".wrap > .min");
			var secNode=document.querySelector(".wrap > .sec");
			var ulNode=document.querySelector(".wrap > ul");
			var styleNode=document.createElement("style");
			var liHtml="";
			var cssText="";

			for(var i=0;i<60;i++){
				liHtml +="<li></li>";
				cssText +="ul > li:nth-child("+(i+1)+"){transform: rotate("+(i*6)+"deg);}";
			}
			ulNode.innerHTML=liHtml;
			styleNode.innerHTML = cssText;
			document.head.appendChild(styleNode);
			
			move();
			setInterval(move,1000)
			function move(){
				//获取现在的时间
				var date=new Date();
				var s=date.getSeconds();
				var m = date.getMinutes()+s/60;
				var h = date.getHours()+m/60;
				
				hourNode.style.transform="rotate("+(30*h)+"deg)";
				minNode.style.transform="rotate("+(6*m)+"deg)";
				secNode.style.transform="rotate("+(6*s)+"deg)";
			}
		}
	</script>
</html>

动画

CSS3动画

        使元素从一种样式逐渐变化为另一种样式的效果

animation属性是一个简写属性

在每个动画的定义中，顺序很重要：可以被认为<time>的第一个值被分配给animation-duration，第二个分配给animation-delay

animation-name

该属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列

值：

none

        特殊关键字，表示无关键帧

keyframename

        标识动画字符串

animation-duration

该属性指定动画的持续时间

默认值为0s

animation-timing-function

动画默认效果：由慢变快再慢

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。

linear：线性过渡

ease：平滑过渡

ease-in：由慢到快

ease-out：由快到慢

ease-in-out：由慢到快再慢

steps(n,[start | end])

传入至多两个参数，第一个参数把动画分成n等分，然后动画就会平均地执行

第二参数start表示从动画的开头开始运行，相反，end表示从动画的结尾开始运行（end为默认值）。其中，start看不到第一帧，end看不到最后一帧

animation-delay

定义动画开始的延迟时间（动画外的属性）

animation-iteration-count

定义了动画的执行次数（只作用与动画内的属性）

重复执行关键帧的内容

值：

infinite        无限循环

<number>        动画播放次数

animation-direction

定义了动画的执行方向（关键帧的内容和animation-timing-function）

默认值：normal

值：

normal

        正常

reverse

        反向执行动画，同时带时间功能的函数也反向

alternate

        动画交替运行

alternate-reverse

        动画反向交替运行

animation-fill-mode

控制元素在动画外的状态

默认值：none

值：

none

        动画外的状态保持在动画之前的位置

backwards

        from之前的状态与form的状态保持一致

forwards

        to之后的状态与to的状态保持一致

both

        backwards+forwards

animation-play-state

定义了动画执行的运行和暂停

默认值：running

值：

running        运行

pause        暂停

关键帧

语法：

        @keyframes animationName{

                keyframes-selector{

                        css-style;

                }

        }

animationName：必写项，定义动画的名称

keyframes-selector：必写项，动画持续时间的百分比

        from：0%

        to：100%

css-style：css声明

兔斯基

<!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-scale=1.0">
    <title>Document</title>
    <style>
        .tsj{
            background: url(img/animation.png);
            background-position: 0 0;
            animation: move .5s steps(12,end) infinite;
        }
        @keyframes move {
            from{
                background-position: 0 0;
            }
            to{
                background-position: -576px 0;
            }
        }
    </style>
</head>
<body>
    <div class="tsj">
    </div>
</body>
</html>

开机动画（2D）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				height: 100%;
				position: relative;
				background: gray;
			}
			#wrap > .inner{
				text-align: center;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				white-space: nowrap;
			}
			#wrap > .inner >span{
				position: relative;
			}
			
			@keyframes move{
				from{
					top: 0px;
				}
				to{
					top: -10px;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="inner">
				<span>1</span>
				<span>2</span>
				<span>3</span>
				<span>4</span>
				<span>5</span>
				<span>6</span>
				<span>7</span>
				<span>8</span>
				<span>9</span>
				<span>0</span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		
		window.onload=function(){
			var spanNodes = document.querySelectorAll("#wrap > .inner >span");
			var colors=["red","orange","yellow","green","blue","pink","deeppink","red","orange","yellow","green","blue","pink","deeppink","#1883BA"];
			for(var i=0;i<spanNodes.length;i++){
				spanNodes[i].style.animation="move .3s "+(i*50)+"ms linear infinite alternate";
				spanNodes[i].style.color=colors[i];
			}
		}
	</script>
</html>

____@
关注
css入门之CSS1、CSS2、CSS3、CSS4发展历程
蛐蛐的博客
07-11 2098
CSS 最初于 1996 年发布，由用于添加字体属性的属性组成例如字体和文本的强调颜色、背景和其他元素。CSS2 于 1998 年发布，为其他媒体类型添加了样式，以便可以用于页面布局设计。CSS3 于 1999 年发布，其中添加了演示样式属性，允许从文档构建演示文稿。CSS3 将其规范划分为许多单独的模块，这使得 CSS3 更易于处理。借助 CSS3，设计人员现在可以使用自定义字体，例如 Google Fonts 和 Typecast 中可用的字体。在 CSS 和 CSS2，设计人员只能使用“网络安全字体”
translate3d模糊问题(chrome)
weixin_45152848的博客
03-24 739
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
translate()进行水平垂直居中
前端博客
09-10 2269
html &lt;div class="load_box"&gt; &lt;div class="load_cont"&gt; &lt;div class="load_img"&gt;&lt;/div&gt; 加载失败，稍后再试 &lt;/div&gt; &lt;/div&gt; css
css中的“ transform: translate(-50%, -50%)； “的意思
最新发布
qq_45207162的博客
06-14 6110
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
java球体旋转3d效果_CSS环绕球体的旋转文字-3D效果
weixin_32421297的博客
02-27 273
项目文件结构截图只需要一个html文件既可：项目截图：代码实现原理：该示例的实现过程很简单，主要是使用了CSS3的透视、3D旋转、位移、渐变、阴影，可以说是一次比较全面的练习。HTML部分：这里是文字CSS部分：使用到的CSS属性用法：舞台：* {margin: 0;padding: 0;}.wrapper {width: 400px;height: 400px;margin: 200px;per...
CSS 面试题汇总
筱的博客
05-08 1244
CSS 面试题汇总
css多列布局划分为4列,CSS3 column多列布局介绍
weixin_34754795的博客
08-03 1235
CSS3提供了个新属性columns用于多列布局。在这之前，有些大家习以为常的排版，要用CSS动态实现其实是比较困难的。如竖版报纸在我不知columns这属性之前，第一反应是：这有何难，多弄几个并列的div不就行了？但仔细想想确实很难实现，因为内容是动态的。搞几个div容易，但每个div内放多少文字呢？一篇文章该在哪行哪段剪切进不同的div内呢？你肯定不愿意为每一段文字，都在特定的地方插入div标...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
4种纯CSS3超酷页面切换过渡动画特效
12-13
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成，所有的动画效果和延时都是使用CSS属性，没有任何的javascript timeout()代码。
HTML4+CSS3.md
12-21
html4+css3自学笔记内容
php 弹遮罩层,遮罩层 弹框 页面滚动
weixin_34847632的博客
03-29 135
第一种情况比较简单，弹框和页面都不可滚动this is a boxthis is a boxthis is a box.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;display: none;background: rgba(0,0,0,.7);}.box{position: absolute;...
html怎么做滚动的背景页面,纯CSS实现的页面向下滚动时改变背景图片
weixin_39725118的博客
06-03 912
CSS语言：CSSSCSS确定body {margin: 0;}.content,.wrapper:before {box-sizing: border-box;display: block;font-size: 4em;padding: 1em;width: 6em;height: 3em;position: fixed;top: 50%;left: 50%;-webkit-transform:...
android气球上升的属性动画,CSS3 不断有气球上升的动画背景效果
weixin_39862097的博客
05-25 235
CSS语言：CSSSCSS确定html {font-size: 1.2vh;}body {margin: 0;height: 100vh;width: 100vw;background: -webkit-linear-gradient(white, #e0d1d1);background: linear-gradient(white, #e0d1d1);box-shadow: inset 0 5v...
css loading 转动,CSS loading动画
weixin_42355399的博客
08-04 153
css/** Loaders*//* basic style */.cp-preloader{position: absolute;top: 50%;left: 50%;z-index: 999;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);}.cp-preloader{wid...
CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法
Tycho‘s Blog
02-22 1万+
一、抛出问题 .modal-container { position: fixed; width: 100vw; height: 100vh; z-index: 999; } .modal { position: absolute; top: 50%; right: 50%; margin: auto; transf...
利用translate()进行水平垂直居中
mr_fzz的博客
11-08 2万+
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中. 代码如下://html: <div class='wrap'> 我不知道宽高，但是我就是要水平垂直居中 </div>//css .wrap{ padding:10px; background:green; color:#fff; position:abso
transform:translate(-50%,-50%)实现水平垂直居中
weixin_38203203的博客
01-18 5484
.content {     padding:10px;     background:green;     color:#fff;     position:absolute;     top:50%;     left:50%;     border-radius: 5px;     -webkit-transform: translate(-50%,-50%);     -moz-trans...
高度不定垂直居中_不定宽高垂直居中分析
weixin_39950824的博客
12-24 134
昨天做移动项目是，遇到这样一个案例，如图，图片容器随着视口宽度进行自由拉伸扩张，图片不定宽高，垂直居中：当时做这个布局的时候，我一直想到用display:table-cell通过vertical-align:middle，来实现居中，可以当我在同一个节点用position:absolute，会导致此居中问题失效。最后想到的解决方案，案例如下，不定宽高垂直居中：p{margin:0;padding:...
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
热门推荐
PT - Blog
04-18 3万+
position & transform: translate(-50%, -50%) 实现块元素百分比下居中
CSS3下载字体与设计实例
本章节主要探讨的是CSS3在网页设计中的应用，特别是对于下载字体以及CSS3新技术的理解和使用。CSS3（层叠样式表的第三个版本）是用于定义网页布局和样式的标准，它扩展了许多创新的视觉效果，尽管不是HTML5的一部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值