精华内容
下载资源
问答
  • css动画效果
    千次阅读
    更多相关内容
  • css动画效果

    千次阅读 2022-03-23 21:42:41
    动画1(沿着椭圆转动) 其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

    动画1(沿着椭圆转动)

     其实是个2D转动,只不过咱们设置椭圆,然后加上scale缩放(近大远小),看上去就是3D效果

    代码:

    <!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>动画1</title>
    </head>
    
    <body>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    
        body {
          width: 100vw;
          height: 100vh;
          position: relative;
        }
    
        /* 位置 */
        .container {
          position: absolute;
          width: 800px;
          height: 180px;
          top: 20%;
          left: 50%;
          transform: translateX(-60%);
          /* border: 1px solid red; */
        }
    
        /* 动画的容器(椭圆) */
        .box {
          width: 100%;
          height: 100%;
          position: relative;
          /* border: 1px solid blue; */
          box-sizing: border-box;
          border-radius: 50%;
        }
    
        /*  椭圆线 */
        .border {
          position: absolute;
          width: 800px;
          height: 180px;
          top: 65px;
          left: 60px;
          border: 1px solid #0084ff;
          box-sizing: border-box;
          border-radius: 50%;
        }
    
        /* 以下是转动的动画 */
        .circle {
          width: 200px;
          height: 130px;
          position: absolute;
          z-index: 999;
        }
    
        .circle img {
          width: 100%;
          height: 100%;
        }
    
        .circle1 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -5.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
        }
    
        .circle2 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -7.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -2s infinite alternate;
        }
    
        .circle3 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -9.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
        }
    
        .circle4 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -11.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
        }
    
        .circle5 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -13.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
        }
    
        .circle6 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -15.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -10s infinite alternate;
        }
    
        .circle7 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -17.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
        }
    
        .circle8 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -19.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -14s infinite alternate;
        }
    
        .circle9 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -21.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
        }
    
        .circle10 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -23.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -18s infinite alternate;
        }
    
        .circle11 {
          animation: animX 11s cubic-bezier(0.36, 0, 0.64, 1) -25.5s infinite alternate,
            animY 11s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
            scale 22s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
        }
    
        @keyframes animX {
          0% {
            left: -4%;
          }
    
          100% {
            left: 96%;
          }
        }
    
        @keyframes animY {
          0% {
            top: -4%;
          }
    
          100% {
            top: 96%;
          }
        }
    
        @keyframes scale {
          0% {
            transform: scale(0.4);
            opacity: 0.5;
          }
    
          50% {
            transform: scale(1);
            opacity: 1;
          }
    
          100% {
            transform: scale(0.4);
            opacity: 0.5;
          }
        }
      </style>
    
      <div class="container">
        <div class="box">
          <div class="circle circle1">
            <img src="./img/步数.png" alt="">
          </div>
          <div class="circle circle2">
            <img src="./img/胆固醇.png" alt="">
          </div>
          <div class="circle circle3">
            <img src="./img/肺呼吸.png" alt="">
          </div>
          <div class="circle circle4">
            <img src="./img/尿酸.png" alt="">
          </div>
          <div class="circle circle5">
            <img src="./img/睡眠.png" alt="">
          </div>
          <div class="circle circle6">
            <img src="./img/体脂.png" alt="">
          </div>
          <div class="circle circle7">
            <img src="./img/跳绳.png" alt="">
          </div>
          <div class="circle circle8">
            <img src="./img/握力.png" alt="">
          </div>
          <div class="circle circle9">
            <img src="./img/心率.png" alt="">
          </div>
          <div class="circle circle10">
            <img src="./img/血糖.png" alt="">
          </div>
          <div class="circle circle11">
            <img src="./img/血氧.png" alt="">
          </div>
    
          <!-- 椭圆线 -->
          <div class="border"></div>
        </div>
      </div>
    </body>
    
    </html>

    1. scale去设置的总时间(也就是转一圈用的时间), 这里设置 22秒

    2. X轴和Y轴用的时间是一样的,都为总时间的一半,也就是11秒

    3. 相差的时间是 总时间/图片的个数  这里也就是 22/11 = 2秒

    4.  X轴和Y轴的延时时间相差 11/2 = 5.5秒

    可以把代码拷贝过去,修改一下试试就可以啦 

    动画2 (旋转木马特效)

     代码:

    <!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>动画2</title>
    </head>
    <body>
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
    
        body {
          width: 100vw;
          height: 100vh;
          position: relative;
        }
        .container {
          position: absolute;
          width: 1000px;
          height: 500px;
          top: 15%;
          left: 50%;
          transform: translateX(-50%);
          z-index: 999;
          display: flex;
          justify-content: center;
          align-items: center;
          perspective: 1000px;
        }
        .box {
          width: 150px;
          height: 150px;
          position: relative;
          transform-style: preserve-3d;
          animation: run 11s linear infinite;
        }
        .circle {
          position: absolute;
          top: 0;
          left: 0;
          width: 150px;
          height: 150px;
        }
    
        /*设置图像大小、边框、圆角、位置*/
        .circle img {
          width: 150px;
          height: 200px;
          border: 1px solid #ccc;
          border-radius: 5px;
          box-sizing: border-box;
        }
    
        .circle1 {
          transform: translateZ(500px);
        }
        .circle2 {
          transform: rotateY(36deg) translateZ(500px);
        }
        .circle3 {
          transform: rotateY(72deg) translateZ(500px);
        }
        .circle4 {
          transform: rotateY(108deg) translateZ(500px);
        }
        .circle5 {
          transform: rotateY(144deg) translateZ(500px);
        }
        .circle6 {
          transform: rotateY(180deg) translateZ(500px) ;
        }
        .circle7 {
          transform: rotateY(216deg) translateZ(500px);
        }
        .circle8 {
          transform: rotateY(252deg) translateZ(500px);
        }
        .circle9 {
          transform: rotateY(288deg) translateZ(500px);
        }
        .circle10 {
          transform: rotateY(324deg) translateZ(500px);
        }
        @keyframes run {
          0% {
            transform: rotateY(0);
          }
    
          100% {
            transform: rotateY(360deg);
          }
        }
      </style>
      <div class="container">
        <div class="box">
          <div class="circle circle1">
            <img src="./img/1.jpg" alt="">
          </div>
          <div class="circle circle2">
            <img src="./img/2.jpg" alt="">
          </div>
          <div class="circle circle3">
            <img src="./img/3.jpg" alt="">
          </div>
          <div class="circle circle4">
            <img src="./img/4.jpg" alt="">
          </div>
          <div class="circle circle5">
            <img src="./img/5.jpg" alt="">
          </div>
          <div class="circle circle6">
            <img src="./img/6.jpg" alt="">
          </div>
          <div class="circle circle7">
            <img src="./img/7.jpg" alt="">
          </div>
          <div class="circle circle8">
            <img src="./img/8.jpg" alt="">
          </div>
          <div class="circle circle9">
            <img src="./img/9.jpg" alt="">
          </div>
          <div class="circle circle10">
            <img src="./img/10.jpg" alt="">
          </div>
        </div>
      </div>
    </body>
    </html>

    动画3 (沿X、Y、Z轴自转)

    <!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>动画3</title>
    </head>
    <body>
      <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        body {
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .container img {
          width: 150px;
          height: 150px;
          margin: 0 20px;
        }
        .container > img:nth-of-type(1) {
          animation: rotate1 5s linear infinite;
        }
        .container > img:nth-of-type(2) {
          animation: rotate2 5s linear infinite;
        }
        .container > img:nth-of-type(3) {
          animation: rotate3 5s linear infinite;
        }
        /* 绕着Y轴转 */
        @keyframes rotate1 {
          0% {
            transform: rotateY(0);
          }
    
          100% {
            transform: rotateY(360deg);
          }
        }
        /* 绕着X轴转 */
        @keyframes rotate2 {
          0% {
            transform: rotateX(0);
          }
    
          100% {
            transform: rotateX(360deg);
          }
        }
        /* 绕着Z轴转 */
        @keyframes rotate3 {
          0% {
            transform: rotateZ(0);
          }
    
          100% {
            transform: rotateZ(360deg);
          }
        }
      </style>
      <div class="container">
        <img src="./img/1.png" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
      </div>
    </body>
    </html>

     动画4(点击收缩隐藏)

     

    <!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>
    </head>
    
    <body>
      <style>
        * {
          padding: 0;
          margin: 0;
          box-sizing: border-box;
        }
        .box {
          width: 500px;
          height: 500px;
          border: 1px solid red;
          margin: 100px 0 0 100px;
          position: relative;
          overflow: hidden;
        }
        .move {
          width: 30%;
          height: 70%;
          border: 1px solid blue;
          border-radius: 10px;
          position: absolute;
          right: -150px;
          top: 15%;
        }
        #btn {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        .show {
          animation: rotate1 0.4s linear;
          /* 动画执行一次 */
          animation-iteration-count: 1;
          /* 停留在最后一帧 */
          animation-fill-mode: both;
        }
        .hide {
          animation: rotate2 0.4s linear;
          /* 动画执行一次 */
          animation-iteration-count: 1;
          /* 停留在最后一帧 */
          animation-fill-mode: both;
        }
        /* 向左移动 */
        @keyframes rotate1 {
          0% {
            transform: translateX(0);
          }
    
          100% {
            transform: translateX(-150px);
          }
        }
        /* 向右移动 */
        @keyframes rotate2 {
          0% {
            transform: translateX(-150px);
          }
    
          100% {
            transform: translateX(0);
          }
        }
      </style>
      <div class="box">
        <div class="move"></div>
        <button id="btn"></button>
      </div>
      <script>
        //  DOM.classList -> 返回一个元素的类属性的实时 DOMTokenList 集合。
        //  DOM.classList.add('class1', 'class2', 'class3')  // 添加一个或多个类名
        //  DOM.classList.remove('class1', 'class2', 'class3')  // 删除一个或多个类名
        //  DOM.classList.toggle('class1', 'class2', 'class3')  // 切换类名(有则移除,没有则添加(切换效果))
    
        let flag = true  // true -> 点击展示, false -> 点击隐藏
        const $ = name => document.querySelector(name)
        $('#btn').innerHTML = '点击展开'
        $('#btn').onclick = () => {
          if (flag) {
            $('.move').classList.remove('hide');
            $('.move').classList.add('show');
            setTimeout(() => {
              $('#btn').innerHTML = '点击收起'
            }, 400)
          } else {
            $('.move').classList.remove('show');
            $('.move').classList.add('hide');
            setTimeout(() => {
              $('#btn').innerHTML = '点击展开'
            }, 400)
          }
          flag = !flag
        }
      </script>
    </body>
    </html>
    展开全文
  • 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>
    
    

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

    展开全文
  • html+css 动画效果

    2019-04-11 18:50:46
    html+css 实现动画效果,包括渐变、旋转、翻转、显示隐藏等.
  • CSS动画效果(animation属性)解析

    千次阅读 2021-10-21 09:51:53
    CSS动画效果(animation属性)解析动画与变形和过渡的区别@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction...

    动画与变形和过渡的区别

    在CSS3中, 过渡 变形 只能设置元素的变换过程,并不能对过程中的某一环节进行精确控制,例如 过渡 变形 实现的动态效果不能够重复播放。为了实现更加丰富的动画效果,CSS3提供了 animation属性 ,使用 animation属性 可以定义复杂的动画效果。

    @keyframes

    在CSS3中,@keyframes规则用于创建动画。
    基本语法格式:
    @keyframes animationname { keyframes-selector{css-styles;} }

    animationname :表示 当前动画的名称 ,它将作为引用时的 唯一标识 ,因此不能为空。

    keyframes-selector 关键帧 选择器,即指定当前关键帧要应用到整个动画过程中的位置,值可以是一个 百分比 from 或者 to 。其中, from和0% 效果相同表示动画的开始, to和100% 效果相同表示动画的结束。

    css-styles :定义执行到当前 关键帧 时对应的 动画状态 ,由 CSS样式属性 进行定义,多个属性之间用 分号 分隔,不能为空。

    animation-name属性

    animation-name属性 用于定义要应用的 动画名称
    基本语法格式:

    animation-name: keyframename | none;

    animation-name 属性 初始值为 none ,适用于所有 块元素 行内元素 keyframename 参数用于规定需要绑定到 选择器 的keyframe的 名称 ,如果值为 none ,则表示不应用任何动画,通常用于覆盖或者取消动画。

    animation-duration属性

    animation-duration属性用于定义整个动画效果完成所需要的 时间,以 秒或毫秒计。
    基本语法格式:

    animation-duration: time;

    animation-duration 属性 初始值为 0,适用于所有 块元素和行内元素 。time参数是以秒(s)或者毫秒(ms)为单位的时间,默认值为0,表示没有任何 动画效果 。当值为负数时,则被视为0。

    animation-timing-function属性

    animation-timing-function 用来规定动画的 速度曲线 ,可以定义使用哪种方式来执行动画效果。
    基本语法格式:

    animation-timing-function:value;

    animation-timing-function 包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) 等常用属性值。
    animation-timing-function的常用属性值如下:

    属性值描述
    linear动画从头到尾的速度是相同的。
    ease默认。动画以低速开始,然后加快,在结束前变慢。
    ease-in动画以低速开始。
    ease-out动画以低速结束。
    ease-in-out动画以低速开始和结束。
    cubic-bezier(n,n,n,n)在cubic-bezier函数中自己的值。可能的值是从0到1的数值。

    animation-delay属性

    animation-delay属性用于定义执行动画效果之前 延迟的时间,即规定动画什么时候开始。
    基本语法格式:

    animation-delay:time;

    参数 time 用于定义动画开始前等待的时间,其单位是秒或者毫秒,默认属性值为0。 animation-delay属性 适用于所有的 块元素 行内元素

    animation-iteration-count属性

    animation-iteration-count属性用于定义动画的 播放次数

    基本语法格式:

    animation-iteration-count: number | infinite;

    animation-iteration-count属性 初始值为 1 ,适用于所有的 块元素和行内元素 。如果属性值为 number ,则用于定义播放动画的 次数 ;如果是 infinite ,则指定动画 循环播放

    animation-direction属性

    animation-direction属性 定义当前动画播放的方向,即动画播放完成后是否 逆向交替循环
    基本语法格式:

    animation-direction: normal | alternate;

    animation-direction 属性 初始值为normal,适用于所有的 块元素和行内元素 。该属性包括两个值,默认值normal表示动画每次都会正常显示。如果属性值是 “alternate” ,则动画会在 奇数次数 (1、3、5 等等)正常播放,而在 偶数次数 (2、4、6 等) 逆向播放

    animation属性

    animation属性 也是一个简写属性,用于综合设置以上六个动画属性。(用空格隔开)
    基本语法格式:

    animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

    使用 animation属性 时必须指定 animation-name animation-duration 属性,否则持续的时间为0,并且永远不会播放动画。

    基础练习

    <!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>
    </head>
    <style>
        @keyframes moveAndchange {
            0%{
                left: 0px;
                top: 0px;
            }
            25%{
                left: 200px;
                top: 200px;
                background: orange;
                border-radius: 0;
            }
            50%{
                left: 400px;
                top: 200px;
                background: orangered;
                border-radius: 50%;
            }
            75%{
                left:400px;
                top: 0px;
                background: palegreen;
                border-radius: 0px;
            }
            100%{
                left: 0px;
                top: 0px;
                background: aliceblue;
                border-radius: 50%;
            }
        }
        div{
                width: 200px;
                height: 200px;
                margin: 200px;
                position: absolute;
                background: aqua;
                border-radius: 50%;
                animation: moveAndchange 10s;
                animation-timing-function: ease-out;
                animation-delay :2s;
                animation-timing-function: 2;
            }
    </style>
    <body>
        <div></div>
    </body>
    </html>
    

    总结

    1、keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
    2、在一个“@keyframes”中的样式规则可以由多个百分比构成的。
    如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。
    3、用cubic-bezier设置动画的速度曲线,它是由曲线的斜率决定速度的快慢。

    展开全文
  • css动画效果-animation

    千次阅读 2022-04-21 16:23:22
    本文介绍了使用关键帧动画效果,给网页元素添加动画特效的基础内容,使用animation给网页添加动画效果。 一、定义动画 示例:第一种写法。 @keyframes{ ​ from{} ​ to{} ​ } 示例:第二种写法。 @...
  • CSS3制作的一款简单鼠标经过导航菜单动画效果代码,三种菜单栏效果分别是:前后旋转,上浮,左右旋转。
  • 几个炫酷且实用的CSS动画效果

    千次阅读 多人点赞 2019-07-11 16:20:09
    效果图: 鼠标滑入文字逐个渐入鼠标滑入按钮时,按钮中原本的文字从下方滑走,同时在原位置上,按钮文字单个挨个浮现。(原本文字和后面单个浮现的文本内容可不一致,可根据需要进行调整)。 实现思路: 用div...
  • 这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果
  • 又一个CSS3翻书动画效果,之前发过不少翻书效果,有兴趣的自己搜索下,这一款个人认为翻书效果有些牵强,每个人的眼光不一样吧。
  • Css动画效果旋转图片

    千次阅读 2022-04-17 10:34:28
    这次给大家讲解一个有趣的css动画效果哈,那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果,先给个class设置一下样式加个定位,因为动画效果需要个定 ...
  • Css输入框动画效果

    2021-06-01 19:48:43
    jQuery 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:...
  • css3实现15个动画特效

    2019-04-11 18:39:20
    css3+html实现的15个动画特效,包括淡入淡出、放大、旋转,缩放及各种组合特效等,可分开使用
  • CSS中的动画效果

    千次阅读 2022-01-29 09:30:00
    介绍了css中的动画,包括动画的定义,动画的动作,动画的属性以及动画的实际应用。还有热点图等动画案例。
  • CSS3模拟风车转动效果纯css3云彩动画效果css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人原生纯CSS3鼠标悬停抖动效果css3点击动画效果css3...
  • css3点击动画效果

    2020-06-12 08:45:26
    简单有效的css3动画效果,当然,其中还引入了多个js插件 使用方法: 1、将lanren.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可 (注意保持文件路径正确)
  • 一、平移动画有关的CSS3属性以及相关的属性描述  1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。 2、transition-duration:是用来指定元素转换...
  • 主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 8种超炫css3加载动画代码_css3 loading动画效果代码 8种超炫css3加载动画代码_css3 loading动画效果代码
  • delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果
  • css动画切换效果

    2018-08-15 10:18:25
    css动画切换效果案例,纯css3实现动画切换,代码简单易懂,注释清晰,下载后直接可以点击运行
  • Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似,为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果
  • 27个精致的CSS3动画效果源代码下载
  • 描述: ... 所以呢,html5+css3效果离我们生活已经越来越近了 ... 今天给大家推荐一款非常舒适,且只使用css3实现的效果,无js 使用方法: 1、将附件index.html文件中的css代码以及html代码拷贝到你的网页中即可
  • css动画放大缩小效果

    千次阅读 2021-11-25 10:18:39
    <div class="xing_one my_xing"><img src="~@/static/images/maskscroll/maskscroll_xing.png" class="img...css: @keyframes xing { 0% { transform: scale(1); } 25% { transform: scale(1.8); }
  • 这个是安卓手机在充电的时候的效果,经过一番尝试,发现使用 ...模拟这种动画效果: 单独将两个滤镜拿出来,它们的作用分别是: filter: blur(): 给图像设置高斯模糊效果。 filter: contrast(): 调整图像的对比度。
  • 摘要:脚本资源,CSS特效,CSS3,图标拖动 CSS3动画效果,模仿Mac效果,将图标拖进文件夹CSS3动画文件夹,请注意本效果需要在非IE的浏览器下运行,火狐、Chrome等都可以。
  • CSS3炫酷的多级导航菜单动画效果代码下载 纯CSS3炫酷的多级导航菜单动画效果代码下载 纯CSS3炫酷的多级导航菜单动画效果代码下载

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 145,113
精华内容 58,045
关键字:

css动画效果