精华内容
下载资源
问答
  • CSS动画效果

    万次阅读 多人点赞 2019-05-28 20:21:11
    07三列等宽布局 1 2 3 07、css3伸缩布局 css3伸缩布局 1 2 3 08、css3伸缩布局固定 css3伸缩布局固定宽度 1 2 3 09、css3伸缩布局垂直分布 ...

    继上篇文章之后,先对之前学的内容进行复习一下
    01、过渡

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	div {
    		width: 100px;
    		height: 100px;
    		background-color: pink;
    		transition: all .3s;    /* 过渡写再本身是 谁做动画写再谁身上  s  ms*/
    	}
    	div:hover {
    		/*background: green no-repeat url();*/
    		background: green ;
    		/*transform: translate(100px, 100px);   只有 x  y 默认为0 
    		transform: scale(1.3);   只有 x  y  默认 等比例缩放  */	
    		transform: translate(100px, 100px) scale(0.3) rotate(45deg);  /*顺序有关系 先 移动后缩放*/
    	}
    	</style>
    </head>
    <body>
    	<div>
    		
    	</div>
    </body>
    </html>
    

    在这里插入图片描述
    02、体会动画

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>03体会动画</title>
    		<style>
    			div{
    				width: 100px;
    				height: 100px;
    				background-color: pink;
    				position: absolute;
    				left: 0;
    				/*调用动画 */
    				/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
    				animation: move 2s ease 0s infinite alternate;
    				-webkit-animation: move 2s ease 0s infinite alternate;
    			}
    			
    			/* 声明动画 关键帧 @keyframes 动画名称{} */
    			@keyframes move{
    				from{
    					left: 0;
    					background-color: pink;
    				}
    				to{
    					left: 1000px;
    					background-color: yellow;
    				}
    			}
    			@-webkit-keyframes move{
    				from{
    					left: 0;
    					background-color: yellow;
    				}
    				to{
    					left: 1000px;
    					background-color: yellow;
    				}
    			}
    			@-ms-keyframes move{
    				from{
    					left: 0;
    					background-color: pink;
    				}
    				to{
    					left: 1000px;
    					background-color: yellow;
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    03、心跳

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>04心跳</title>
    		<style>
    			img{
    				width: 400px;
    				height: auto;
    				/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
    				animation: heart 0.5s infinite;
    			}
    			
    			div{
    				width: 100px;
    				height: 100px;
    				background-color: pink;
    				margin: 100px auto;
    				animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
    			}
    			@keyframes heart{
    				0%{
    					transform: scale(1);
    				}
    				50%{
    					transform: scale(1.1);
    				}
    				100%{
    					transform: scale(1);
    				} 
    			}
    		</style>
    	</head>
    	<body>
    		<img src="../images/1.jpg" height="744" width="800" alt="loading" />
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    05、sea大海

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	html, body {
    		width: 100%;
    		height: 100%;
    		background-color: #0EA9B1;
    		overflow: hidden;
    	}
    
    	img {
    		width: 100%;
    		height: auto;
    		position: absolute;
    		bottom: 0;
    		left: 0;
    	}
    
    	img:first-child {
    		animation: move 2s linear infinite;
    	}
    	img:last-child {
    		animation: move 2s linear 0.3s infinite;
    	}
    
    
    	.sun {
    		width: 100px;
    		height: 100px;
    		/*background-color: pink;*/
    		margin: 100px;
    		position: relative;
    	}
    	.sun::before, .sun::after {
    		content: "";
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		width: 50px;
    		height: 50px;
    		transform: translate(-50%, -50%);
    		background: rgba(255, 255, 255, 0.8);
    		border-radius: 50%;
    		animation: sun 2s infinite;
    	}
    	.sun::after {
    		width: 80px;
    		height: 80px;
    		background: rgba(255, 255, 255, 0.6);
    		animation: sun 3s infinite;
    	}
    
        @keyframes move {
    		0% {
    			bottom: 0;
    		}
    
    		50% {
    			bottom: -50px;
    		}
    
    		100% {
    			bottom: 0;
    		}
    	}
    
    	@keyframes sun {
    		0% {
    			transform:translate(-50%, -50%) scale(1);
    			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
    		}
    
    		50% {
    			transform:translate(-50%, -50%) scale(1.1);
    			box-shadow: 0px 0px 30px rgba(255,255,255,0.7);
    		}
    
    		100% {
    			transform:translate(-50%, -50%) scale(1);
    			box-shadow: 0px 0px 5px rgba(255,255,255,0.7);
    		}
    	}
    	</style>
    </head>
    <body>
    	<div class="sun"></div>
    	<img src="../images/1.png" height="211" width="2000" alt="loading">
    	<img src="../images/2.png" height="211" width="2000" alt="loading">
    </body>
    </html>
    

    在这里插入图片描述
    06、三列等宽布局

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>07三列等宽布局</title>
    		<style>
    			section{
    				width: 80%;
    				height: 150px;
    				margin: 100px auto;
    			}
    			section div{
    				width: 30%;
    				height: 100%;
    				float: left;
    				margin: 0 10px;
    			}
    			section div:nth-child(1){
    				background-color: pink;
    			}
    			section div:nth-child(2){
    				background-color: purple;
    			}
    			section div:nth-child(3){
    				background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<section>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    		</section>
    	</body>
    </html>
    
    

    在这里插入图片描述
    07、css3伸缩布局

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>css3伸缩布局</title>
    		<style>
    			section{
    				width: 80%;
    				height: 150px;
    				margin: 100px auto;
    				/* 父亲添加 伸缩布局 */
    				display: flex;
    			}
    			section div{
    				height: 100%;
    				flex: 1;//孩子的份数
    			}
    			section div:nth-child(1){
    				background-color: pink;
    				flex: 2;
    			}
    			section div:nth-child(2){
    				background-color: purple;
    				margin: 0 10px;
    			}
    			section div:nth-child(3){
    				background-color: blue;
    				flex: 3;
    			}
    		</style>
    	</head>
    	<body>
    		<section>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    		</section>
    	</body>
    </html>
    
    

    在这里插入图片描述
    08、css3伸缩布局固定

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>css3伸缩布局固定宽度</title>
    		<style>
    			section{
    				width: 80%;
    				height: 150px;
    				margin: 100px auto;
    				
    				/* 父亲添加 伸缩布局 */
    				display: flex;
    				min-width: 500px;//section最小的宽度就是500px
    			}
    			section div{
    				height: 100%;
    				/* flex:1 孩子的份数 */
    			}
    			section div:nth-child(1){
    				background-color: pink;
    				width: 200px;
    			}
    			section div:nth-child(2){
    				background-color: purple;
    				margin: 0 10px;
    				flex: 2;
    			}
    			section div:nth-child(3){
    				background-color: blue;
    				flex: 1;
    			}
    		</style>
    	</head>
    	<body>
    		<section>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    		</section>
    	</body>
    </html>
    
    

    在这里插入图片描述
    09、css3伸缩布局垂直分布

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>css3伸缩布局垂直分布</title>
    		<style>
    			section{
    				width: 80%;
    				height: 150px;
    				margin: 100px auto;
    				/* 父亲添加 伸缩布局 */
    				display: flex;
    				min-width: 500px; //section最小的宽度就是500px
    				flex-direction: column;//垂直分布
    			}
    			section div{
    				flex: 1;//孩子的份数
    			}
    			section div:nth-child(1){
    				background-color: pink;
    			}
    			section div:nth-child(2){
    				background-color: purple;
    			}
    			section div:nth-child(3){
    				background-color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<section>
    			<div>1</div>
    			<div>2</div>
    			<div>3</div>
    		</section>
    	</body>
    </html>
    
    

    在这里插入图片描述
    10、携程网

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>11携程网</title>
    		<style>
    	* {
    		margin: 0;
    		padding: 0;
    		box-sizing: border-box;
    	}
    	html, body {
    		min-width: 320px; 
    		max-width: 540px;
    		margin: 0 auto;
    		font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
    	}
    	header {
    		height: 108px;
    	}
    	header img {
    		height: 100%;
    		width: auto;
    	}
    	nav {
    		border: 1px solid #ccc;
    		padding: 4px;
    	}
    	nav  a  {
    		text-decoration: none;
    		color: #fff;
    		text-shadow: 0 2px 1px rgba(0,0,0,.2);
    		/*text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;*/
    	}
    	.row {
    		height: 90px;
    		display: flex; /*伸缩布局*/
    		border-radius: 5px; 
    		overflow: hidden;
    		margin-bottom: 5px;
    	}
    	.row div {
    		height: 100%;
    		flex: 1;
    		background-color: #FF697A;
    		border-right: 1px solid #fff;
    	}
    	.row div:nth-child(3) {
    		border-right: 0;
    	}
    	.row div a {
    		display: block;
    		width: 100%;
    		height: 100%;
    	}
    	.row33 {
    		display: flex;
    		flex-direction: column;
    	}
    	.row33 a {
    		flex: 1;
    		text-align: center;
    		line-height: 45px;
    	}
    	.row33 a:first-child {
    		border-bottom: 1px solid #fff;
    	}
    	.row em {
    		display: block;
    		height: 45px;
    		text-align: center;
    		line-height: 45px;
    		font-style: normal;
    	}
    	.row i {
    		display: block;
    		width: 43px;
    		height: 43px;
    		margin: -5px auto 0;
    		background: url(../images/ctrip.png) no-repeat 0 -127px;
    		-webkit-background-size: 104px;  /* 前缀 */
    		-moz-background-size: 104px;  /* 前缀 火狐 */
    		-ms-background-size: 104px;  /* 前缀 ie */
    		-o-background-size: 104px;  /* 前缀 ie */
    		background-size: 104px;
    
    	}
    	.row .icon-flight {
    		background-position: 0 -288px;
    	}
    
    	</style>
    
    	</head>
    	<body>
    		<header>
    			<img src="../images/banner.jpg" height="307" width="1536" alt="">
    		</header>
    		<nav>
    			<div class="row">
    				<div>
    					<a href="#">
    						<em>酒店</em>
    						<i></i>
    					</a>
    				</div>
    				<div class="row33">
    					<a href="#">海外酒店</a>
    					<a href="#">特价酒店</a>
    				</div>
    				<div class="row33">
    					<a href="#">团购</a>
    					<a href="#">同福客栈</a>
    				</div>
    				
    			</div>
    			<div class="row">
    				<div>
    					<a href="#">
    						<em>酒店</em>
    						<i class="icon-flight"></i>
    					</a>
    				</div>
    				<div class="row33">
    					<a href="#">海外酒店</a>
    					<a href="#">特价酒店</a>
    				</div>
    				<div class="row33">
    					<a href="#">团购</a>
    					<a href="#">同福客栈</a>
    				</div>
    				
    			</div>
    			<div class="row">
    				<div>
    					<a href="#">
    						<em>酒店</em>
    						<i></i>
    					</a>
    				</div>
    				<div class="row33">
    					<a href="#">海外酒店</a>
    					<a href="#">特价酒店</a>
    				</div>
    				<div class="row33">
    					<a href="#">团购</a>
    					<a href="#">同福客栈</a>
    				</div>
    				
    			</div>
    			<div class="row">
    				<div class="row33">
    					<a href="#">海外酒店</a>
    					<a href="#">特价酒店</a>
    				</div>
    				<div class="row33">
    					<a href="#">海外酒店</a>
    					<a href="#">特价酒店</a>
    				</div>
    				<div class="row33">
    					<a href="#">团购</a>
    					<a href="#">同福客栈</a>
    				</div>
    				
    			</div>
    		</nav>
    
    	</body>
    </html>
    
    

    在这里插入图片描述
    11、背景缩放

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>12背景缩放</title>
    		<style>
    			div{
    				width: 400px;
    				height: 400px;
    				background: url(../images/x.jpg) no-repeat;
    				/* 颜色 图片 平铺 位置 滚动 */
    				border: 1px solid red;
    				/* background-size: w h 规定背景图像的尺寸; */
    				/* background-size:100px 100px;  */
    				/* background-size:100px; 如果只有一个值 后面一个值默认为auto 等比例缩放 */
    				/* background-size:cover; */
    				background-size: contain;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    12、背景渐变

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>13背景渐变</title>
    		<style>
    			div{
    				width: 300px;
    				height: 100px;
    				/* background:-webkit-linear-gradient(渐变的起始位置,颜色位置,颜色位置) */
    				background: -webkit-linear-gradient(top,red 0%,green 50%,blue 100%);
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    13、多背景

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>14多背景</title>
    		<style>
    			div{
    				border: 1px solid #000;
    				width: 600px;
    				height: 600px;
    				background: url(../images/2.jpg) no-repeat top left,url(../images/3.jpg) no-repeat bottom right;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    14、泡泡

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>15泡泡</title>
    		<style>
    			div{
    				width: 300px;
    				height: 80px;
    				border-radius: 20px;
    				
    				background:url(../images/paopao.png) no-repeat top left,url(../images/paopao.png) no-repeat right bottom;
    				background-color: blue;
    				transition: all 3s; 
    			}
    			div:hover{
    				background-position: right bottom,top left; 
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    
    

    在这里插入图片描述
    15、透明度

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>16透明度</title>
    		<style>
    			div{
    				width: 100px ;
    				height: 100px;
    				background-color: red;
    				/* background:rgba(255,0,0,.2) 盒子的背景透明*/
    				opacity: 0.2;//盒子半透明
    				/* filter:alpha(opacity=20) ie 6写法*/
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    		<p>12312312</p>
    	</body>
    </html>
    
    

    在这里插入图片描述
    16、rotateX

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>17rotateX</title>
    		<style>
    			img{
    				transition: all 2s;
    			}
    			img:hover{
    				transform: rotateX(360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<img src="../images/x.jpg" height="226" width="300" alt="loading" />
    	</body>
    </html>
    
    

    在这里插入图片描述
    17、rotateY

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>18rotateY</title>
    		<style>
    			body{
    				perspective: 500px;
    			}
    			img{
    				transition: all 2s;
    			}
    			img:hover{
    				transform: rotateY(360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<img src="../images/1498446043198.png" alt="loading" />
    	</body>
    </html>
    
    

    b
    18、两面翻转的盒子

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>18rotateY</title>
    		<style>
    			body{
    				perspective: 500px;
    			}
    			img{
    				transition: all 2s;
    			}
    			img:hover{
    				transform: rotateY(360deg);
    			}
    		</style>
    	</head>
    	<body>
    		<img src="../images/1498446043198.png" alt="loading" />
    	</body>
    </html>
    
    

    在这里插入图片描述
    好用的话,关注一下我的公众号支持一下吧
    在这里插入图片描述

    展开全文
  • css动画效果网站集合

    千次阅读 2020-07-09 14:01:27
    http://ianlunn.github.io/Hover/ Hover.css https://two.js.org/examples/ Two.js https://www.swiper.com.cn/demo/index.html Swiper中文网 http://www.100sucai.com/tag/75/ 100素材网 ...
    展开全文
  • html+css 动画效果

    2019-04-11 18:50:46
    html+css 实现动画效果,包括渐变、旋转、翻转、显示隐藏等.
  • CSS动画效果无限循环放大缩小

    千次阅读 2021-03-15 16:43:09
    CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image> .anima { animation-name: likes; // 动画名称 animation-direction:...

    效果图:

    CSS动画效果无限循环放大缩小

    <image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image>
    	
    
    	.anima {
    		animation-name: likes; // 动画名称
    		animation-direction: alternate; // 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
    		animation-timing-function: linear; // 动画执行方式,linear:匀速;ease:先慢再快后慢;ease-in:由慢速开始;ease-out:由慢速结束;ease-in-out:由慢速开始和结束;
    		animation-delay: 0s; // 动画延迟时间
    		animation-iteration-count: infinite; //  动画播放次数,infinite:一直播放
    		animation-duration: 1s; // 动画完成时间
    	}
    
    	@keyframes likes {
    		 0%{
    		      transform: scale(1);
    		   }
    		   25%{
    		      transform: scale(0.9);
    		   }
    		   50%{
    		      transform: scale(0.85);
    		   }
    		   75%{
    		      transform: scale(0.9);
    		   }
    		   100%{
    		      transform: scale(1);
    		   }
    	}

     

    展开全文
  • CSS3模拟风车转动效果纯css3云彩动画效果css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人原生纯CSS3鼠标悬停抖动效果css3点击动画效果css3...
  • 几个炫酷且实用的CSS动画效果

    千次阅读 多人点赞 2019-07-11 16:20:09
    效果图: 鼠标滑入文字逐个渐入鼠标滑入按钮时,按钮中原本的文字从下方滑走,同时在原位置上,按钮文字单个挨个浮现。(原本文字和后面单个浮现的文本内容可不一致,可根据需要进行调整)。 实现思路: 用div...

    一、鼠标滑入文字逐个渐入

    效果图:

    鼠标滑入文字逐个渐入

    鼠标滑入按钮时,按钮中原本的文字从下方滑走,同时在原位置上,按钮文字单个挨个浮现。(原本文字和后面单个浮现的文本内容可不一致,可根据需要进行调整)。

    实现思路:

    用div模拟button按钮,并将按钮文本单个单个的放在其子元素span中,用于后面的单个显示。而鼠标没有触发时的静止状态文本则由div按钮的伪类::before来承担。在静态状态下将所有span元素的opacity透明度设置为0(元素不可见了,但仍占据原来的空间),当鼠标滑入按钮时,设置所有span元素的透明度为1,但从前往后给span设置不同的延时时间,即形成了上图中文字依次渐入的效果。鼠标滑入时原来的文本也是一样,通过设置opacity为0隐藏,且给一个竖直方向移动的动画即可。

    代码:

    1) HTML结构

    <div class="btn" data-text="Get Started Now">
        <span>G</span>
        <span>e</span>
        <span>t</span>
        <span>&nbsp;</span>
        <span>S</span>
        <span>t</span>
        <span>a</span>
        <span>r</span>
        <span>t</span>
        <span>e</span>
        <span>d</span>
        <span>&nbsp;</span>
        <span>N</span>
        <span>o</span>
        <span>w</span>
    </div>

    2)CSS

    /* 静态按钮的文本 */
    .btn::before {
        content: attr(data-text);    /* 划重点!这样可多次复用本段CSS */
        opacity: 1;
        position: absolute;          /* 使其不占据空间,不将子元素span挤到后面去 */
        -webkit-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        -ms-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        -moz-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
    }
    .btn:hover::before {
        opacity: 0;
        transform: translateY(100%);
    }
    /* 鼠标滑入逐个渐入的文字 */
    .btn>span {
        opacity: 0;
        -webkit-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        -ms-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        -moz-transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
        transition: all 0.4s cubic-bezier(0.75, 0, 0.125, 1) 0s;
    }
    .btn:hover>span {
        opacity: 1;
    }
    .btn:hover>span:nth-child(1) {
        -webkit-transition-delay: 0.01s;
        -ms-transition-delay: 0.01s;
        -moz-transition-delay: 0.01s;
        transition-delay: 0.01s;
    }
    .btn:hover>span:nth-child(2) {
        -webkit-transition-delay: 0.05s;
        -ms-transition-delay: 0.05s;
        -moz-transition-delay: 0.05s;
        transition-delay: 0.05s;
    }
    .btn:hover>span:nth-child(3) {
        -webkit-transition-delay: 0.10s;
        -ms-transition-delay: 0.10s;
        -moz-transition-delay: 0.10s;
        transition-delay: 0.10s;
    }
    /* ...有多少个字就写多少个延时,每次递增0.05s差不多,可自行调整,空格最好也算上,不然效果会不太顺畅 */
    

    【TIPS】cubic-bezier是定义贝赛尔曲线,一般用于描述速率曲线,不详述,感兴趣的可自行百度。

    【兼容性】上述涉及transition的加了很多浏览器前缀,是因为它存在兼容性问题(主要是针对IE),其浏览器兼容支持如下表:

    数据来源于: Can I Use

    要是嫌手动写浏览器前缀很麻烦,可以下载一些插件,自动补全(例如:Autoprefixer)。此外,这里还有一个问题:我们通常习惯将带前缀的属性写在对应不带前缀的属性之前,这是为了在所有浏览器统一标准时,我们的通用属性覆盖前面的hack。

    二、气泡上升效果

    效果图:

    气泡上升效果

     一共用了三张气泡的图片(png格式,背景透明)作为背景图,需自己提前绘制,或者也可以用CSS绘制(前提是环形气泡中间不要求是透明的)。

    实现思路:

    用6个li模拟出现的所有气泡(数量自定,但数目较多一些显得自然一些,建议四五个及以上),设定两个不同的动画效果(移动translate、大小scale变化),随机赋给6个li作为动画animation,并分别给定不同的延时时间(思路同上述效果),营造出随意的感觉即可。

    代码:

    1)HTML结构:

    <ul class="bubble">
        <li class="b-1"></li>
        <li class="b-2"></li>
        <li class="b-3"></li>
        <li class="b-4"></li>
        <li class="b-5"></li>
        <li class="b-6"></li>
    </ul>

    2)CSS:

    .bubble .b-1 {
      width: 6px;
      height: 6px;
      background: url(../../image/welcome/bubble3.png) no-repeat;
      animation: bubble1 7s linear infinite;
    }
    .bubble .b-2 {
      width: 8px;
      height: 8px;
      background: url(../../image/welcome/bubble2.png) no-repeat;
      animation: bubble2 5s linear infinite;
    }
    .bubble .b-3 {
      width: 12px;
      height: 12px;
      background: url(../../image/welcome/bubble1.png) no-repeat;
      animation: bubble1 4s linear infinite;
    }
    .bubble .b-4 {
      width: 8px;
      height: 8px;
      background: url(../../image/welcome/bubble2.png) no-repeat;
      animation: bubble2 5s linear infinite;
    }
    .bubble .b-5 {
      width: 6px;
      height: 6px;
      background: url(../../image/welcome/bubble3.png) no-repeat;
      animation: bubble2 7s linear infinite;
    }
    .bubble .b-6 {
      width: 12px;
      height: 12px;
      background: url(../../image/welcome/bubble1.png) no-repeat;
      animation: bubble1 6s linear infinite;
    }
    /* 比赛入口气泡动画 */
    @keyframes bubble1 {
      0% {
        opacity: 0;
        transform: translate(0px,0) scale(.8);
      }
      50% {
        opacity: 1;
        transform: translate(10px,-20px) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translate(5px,-50px) scale(.9);
      }
    }
    @keyframes bubble2 {
      0% {
        opacity: 0;
        transform: translate(0px,0) scale(.8);
      }
      50% {
        opacity: 1;
        transform: translate(3px,-20px) scale(1.1);
      }
      100% {
        opacity: 0;
        transform: translate(5px,-50px) scale(.9);
      }
    }

    【TIPS】bubble-x中的宽高是小气泡背景图片本身的宽高,为了使图片变形失真不那么明显,气泡scale值不要太大。

    【TIPS】keyframes中0%和100%时必须设opacity为0,才有渐入渐出的效果,不然会直愣愣地消失,体验不好。

    【兼容性】animation和transform都涉及兼容性问题(为了整洁起见,上述CSS未添加带浏览器前缀的兼容代码):

    animation兼容性
    transform2D兼容性

    三、渐变边框动画效果

    效果图:

    渐变边框动画效果

    上图实现了三个渐变边框的动画效果,且上一个的边框阴影覆盖在下一个上面(调整各div的z-index),营造出“百叶窗”的突出显示效果。

    实现思路:

    先讲其中一个框的实现:每一个框一个div,每一个“框”分三部分组成,::before实现渐变边框(实际上是渐变背景),::after实现内部白色背景,最后div的其他子元素作为框内的文字内容显示。使用animation动画实现::before渐变背景旋转,即可模拟边框动画:

    这个时候会遇到li内部子元素被::after覆盖显示不了的问题(::after的显示层级高于正常流元素),给内部子元素加position: relative;z-index: 1;即可(若有其他更好的解决办法,望告知)。

    代码:

    1)HTML结构

    <div class="con">
        <div class="box">
            <p>123</p>
        </div>
        <div class="box">
        	<p>456</p>
        </div>
        <div class="box">
        	<p>789</p>
        </div>
    </div>

    2)CSS:

    .con {
        width: 500px;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(#5b53fd,#87a8fb);
    }
    .box {
        width: 300px;
        height: 50px;
        margin: 4px auto;
        position: relative;
        overflow: hidden;       /* 动画的关键之一,使渐变背景仅显示需要的那一部分 */
        border-radius: 4px;
        box-shadow: 0 10px 15px rgba(0,0,0,.7);
        color: #000;
        font-size: 16px;
        vertical-align: middle;
    }
    .box>* {                   /* 此处调整层级是为了使div.box子元素显示(不被::after覆盖) */
        position: relative;
        z-index: 1;
        padding-left: 20px;
    }
    .box:nth-child(1) {        /* 层级的调整是为了使上一层div.box阴影覆盖下一个div.box */
        z-index: 3;
    }
    .box:nth-child(2) {
        z-index: 2;
    }
    .box:nth-child(3) {
        z-index: 1;
    }
    .box::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 310px;
        height: 310px;
        margin-top: -125px;    /* 当元素absolute时,可使用margin调整其位置,而不影响其他元素布局 */
        margin-left: -5px;
        background-image: linear-gradient(45deg,#51f4fa 35%,#da7efc 60%);
        border-radius: 50%;
        animation: rotate 5s linear infinite 0s;    /* 动画关键之一,使渐变背景旋转 */
    }
    .box::after {
        content: "";
        display: inline-block;
        position: absolute; 
        top: 3px;bottom: 3px;  /* 重点!设置对立方位的值,使元素具有填充特性,且跟随父元素大小变化 */
        left: 3px;right: 3px;
        background: #fff;
        border-radius: 3px;
    }
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(355deg);
        }
    }

    【TIPS】当不需要外面那层渐变边框有border-radius圆角效果和上述动画效果的话,可以使用border-image的渐变来实现渐变边框。

    【TIPS】为了边框动画效果中颜色过渡自然一点,linear-gradient的颜色值不要设置两个颜色直接从0%到100%显示,亲测 linear-gradient(45deg,#51f4fa 35%,#da7efc 60%) 下表现较好。

    【TIPS】为了使上述动画效果适用于不同尺寸的“框”,建议::after和::before元素的宽高设置相对单位(当然是相对于外层元素div.con),这样其他地方需要用到这个效果时,直接加上类名即可完美适配。当然,此时需要给外层li position:relative,而::after和::before position:absolute。

    【兼容性】background-image(左)和border-image(右)

      

    展开全文
  • 27个精致的CSS3动画效果源代码下载
  • 内容索引:脚本资源,CSS特效,CSS动画 google_sprite模拟谷歌使用的css动画效果,是谷歌为纪念现代舞先驱玛莎·葛兰姆 117 周年诞辰的时候所使用的LOGO,别以为那是一张具备动画效果的GIF图片,谷歌当然不会搞这么一...
  • vue中的css动画效果

    2019-02-24 17:08:59
    一般来说想要哪个元素有动画效果,就要在外面包裹一层transition标签,如下: &lt;div id="root"&gt; &lt;transition name="fade"&gt; &lt;div v-if="show"&...
  • 这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果
  • CSS动画效果 목록
  • 用LESS编写的用于Angular,React,Jquery,Bootstrap和QuantumUI的PURE CSS动画效果 ###超过200个关键帧动画效果 ### 280很棒CSS3动画类 ### 5动画速度选项 ###用于jquery兼容性的扩展程序包 ###用于引导程序兼容性...
  • 写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果 对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再在...
  • jQ CSS3创意动画添加删除效果是一款基于jquery css3实现的创意动画列表项添加删除效果
  • 代码简介:CSS3 Animation文字动画特效里面包含7款不同效果的文字动画特效。
  • css动画效果:鼠标移上去底部线条从中间往四周动画延伸如图:.top-nav a:after { content: ' '; position: absolute; z-index: 2; bottom: 0; left: 50%; display: block; width: 165px; height: 1px; ...
  • 主要给大家介绍了关于如何利用CSS3动画实现圆圈由小变大向外扩散效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 它使用简单只需要将相关效果对应的class加入页面元素中,就能实现翻转、滑动、旋转等等复杂超炫的跨浏览器的动画效果,让开发这制作页面动画变得非常简单,本文给大家介绍基于css3 animate制作绚丽的动画效果,...
  • css3动画效果

    2017-12-13 13:52:25
    css3动画效果,js动画效果,wow动画说明以及在网站中的应用
  • 主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • CSS3流光动画下载页面酷炫流光动画特效
  • Animation.css动画效果属性

    千次阅读 2020-01-06 17:17:24
    Animation.css动画效果属性安装使用写法规则animation.css支持的动画种类支持延时效果(delay效果延时执行)和加速(speed效果执行所花费的时间)使用示例 安装 npm install animate.css --save 或者 yarn add ...
  • 好玩的css3动画效果

    2017-08-22 00:33:26
    只适合菜鸟
  • css3动画图标效果

    2017-10-31 16:20:49
    css3动画图标效果 css3动画图标效果 css3动画图标效果
  • css3特效,css3动画
  • css动画切换效果

    2018-08-15 10:18:25
    css动画切换效果案例,纯css3实现动画切换,代码简单易懂,注释清晰,下载后直接可以点击运行
  • 写了一个文字渐变的动画效果,纯CSS动画.文字加了一点阴影效果,看起来有发光哒感觉~ 效果如下图 这里因为是截图,所以没有办法看到动态的效果.大家可以拷贝我下面的代码自己试一试 代码看下面 html <div ...
  • css 3 动画实实现点赞动画,技术栈使用到了css 中的transform这个属性,项目中有需要的修改之处,请即使之处,这里会即使修改,
  • CSS动画效果——语音播放小喇叭

    万次阅读 2019-03-29 09:38:35
    写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果:语音播放效果对于这个有几种实现方案:一种是直接把图标.png文件放在下面,然后再在上面覆盖一层...
  • 菜单栏下划线动画 body{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background-color:#2D3E50; } header nav ul{ width: 50%; padding: 0; margin: 0 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 125,710
精华内容 50,284
关键字:

css动画效果