你不知道的CSS特效

雨点打透心脏的1/2处 2022-11-05 11:51 206阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th align="center"><a rel="nofollow">文字两边添加中间线</a></th> 
   <th align="center"><a rel="nofollow">鼠标移除下拉箭头旋转</a></th> 
   <th align="center"><a rel="nofollow">鼠标移入图片放大</a></th> 
   <th align="center"><a rel="nofollow">鼠标移入-进度条</a></th> 
   <th align="center"><a rel="nofollow">扫描二维码</a></th> 
   <th align="center"><a rel="nofollow">页面底部走动的卡通</a></th> 
   <th align="center"><a rel="nofollow">热点新闻持续滚动</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><a rel="nofollow">速度曲线步长</a></td> 
   <td align="center"><a rel="nofollow">旋转木马</a></td> 
   <td align="center"><a rel="nofollow">美的导航搜索</a></td> 
   <td align="center"><a rel="nofollow">小米产品</a></td> 
   <td align="center"><a rel="nofollow">耳机按钮</a></td> 
   <td align="center"><a rel="nofollow">事件进度条</a></td> 
   <td align="center"><a rel="nofollow">炫酷盒子效果</a></td> 
  </tr> 
  <tr> 
   <td align="center"><a rel="nofollow">炫酷鼠标悬停效果</a></td> 
   <td align="center"><a rel="nofollow">炫酷气泡漂浮效果</a></td> 
   <td align="center"><a rel="nofollow">炫酷动态流线条按钮</a></td> 
   <td align="center"><a rel="nofollow">加载中Loading效果</a></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
  <tr> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

### 1. 文字两边添加中间线 ###

![在这里插入图片描述][2021030611201798.png]

### 2. 鼠标移除下拉箭头旋转 ###

![在这里插入图片描述][20210306112044868.gif]

<!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-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { position: absolute; top: 10px; right: 10px; content: ""; width: 10px; height: 10px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); transition: all .4s; } div:hover::after { bottom: 10px; transform: rotate(225deg); } </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

### 3. 鼠标移入图片放大 ###

![在这里插入图片描述][20210306112829336.gif]

### 4. 鼠标移入-进度条 ###

![在这里插入图片描述][20210306113121376.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style> .progress { position: absolute; margin: auto; } .progress li { position: relative; display: inline-block; width: 40px; height: 20px; margin: 0 4px; text-align: center; z-index: 3; cursor: pointer; } .progress li span { position: absolute; width: 40px; height: 2px; left: 50%; margin-left: -20px; bottom: 0; background-color: rgba(0, 0, 0, .2); -webkit-transition: all .3s .1s ease-out; transition: all .3s .1s ease-out; } .progress li span::after { content: ""; position: absolute; width: 0; height: 100%; left: 0; bottom: 0; background-color: red; -webkit-transition: all .3s .1s ease-out; transition: all .3s .1s ease-out; } .progress li:hover span { height: 5px; } .progress li:hover span::after { width: 100%; -webkit-transition: width 5s ease; transition: width 5s ease; } </style>
    
    <body>
        <div class="progress">
            <ul>
                <li>
                    <span></span>
                </li>
                <li>
                    <span></span>
                </li>
            </ul>
        </div>
    </body>
    
    </html>

### 5. 扫描二维码 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/base.css">
    	<link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    	<div class="v-code">
    		<img class="erweima" src="images/二维吗.png" alt="">
    		<img class="line" src="images/线条.png" alt="">
    	</div>
    </body>
    </html>

// base.css * { 
    	margin: 0;
    	padding: 0;
    }
    
    ul, ol { 
    	list-style: none;
    }
    
    input, button { 
    	outline: none;
    	border: none;
    }
    
    a { 
    	text-decoration: none;
    }
    
    .clearfix::before, .clearfix::after { 
    	content: "";
    	height: 0;
    	line-height: 0;
    	display: block;
    	visibility: hidden;
    }
    
    .clearfix::after { 
    	clear: both;
    }

// index.css body { 
    	padding: 50px;
    }
    
    .v-code { 
    	width: 145px;
        height: 240px;
        padding-top: 47px;
        float: left;
        position: relative;
        background: url(../images/index_z_71df05e.png);
        background-position: 0px 0px;
        background-repeat: no-repeat;
    	
    }
    
    .v-code .erweima { 
    	display: block;
    	margin: 0 auto;
    	width: 107px;
    }
    
    .v-code .line { 
    	position: absolute;
        left: 12px;
        top: 45px;
        -webkit-animation: mainbarcode 4s linear infinite;
        -moz-animation: mainbarcode 4s linear infinite;
        -ms-animation: mainbarcode 4s linear infinite;
        animation: mainbarcode 4s linear infinite;
    }
    
    @keyframes mainbarcode { 
    	0% { 
    	    -webkit-transform: translate3d(0,0,0);
    	    -moz-transform: translate3d(0,0,0);
    	    -ms-transform: translate3d(0,0,0);
    	    transform: translate3d(0,0,0);
    	}
    	50% { 
    	    -webkit-transform: translate3d(0,100px,0);
    	    -moz-transform: translate3d(0,100px,0);
    	    -ms-transform: translate3d(0,100px,0);
    	    transform: translate3d(0,100px,0);
    	}
    	100% { 
    	    -webkit-transform: translate3d(0,0,0);
    	    -moz-transform: translate3d(0,0,0);
    	    -ms-transform: translate3d(0,0,0);
    	    transform: translate3d(0,0,0);
    	}
    }

### 6. 页面底部走动的卡通 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/base.css">
    	<link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    	<div class="f4_box">
    		<div class="walk01">
    			<div class="west-01"></div>
    		</div>
    		<div class="walk02">
    			<div class="west-02"></div>
    		</div>
    		<div class="walk03">
    			<div class="west-03"></div>
    		</div>
    		<div class="walk04">
    			<div class="west-04"></div>
    		</div>
    	</div>
    </body>
    </html>

// index.css .f4_box { 
    	position: fixed;
        width: 100%;
        height: 175px;
        left: 0;
        bottom: 0;
        z-index: 99;
        -webkit-transition: all 3.2s ease;
        -moz-transition: all 3.2s ease;
        -ms-transition: all 3.2s ease;
        transition: all 3.2s ease;
    }
    
    .walk01 { 
    	position: absolute;
        left: 0;
        bottom: 0;
        width: 154px;
        height: 121px;
        opacity: 0;
        -webkit-animation: move01 15s linear infinite;
        -moz-animation: move01 15s linear infinite;
        -ms-animation: move01 15s linear infinite;
        animation: move01 15s linear infinite;
    }
    
    .west-01 { 
    	width: 154px;
        height: 121px;
        background-image: url(../images/txgc_6d0e9e5.png);
        background-repeat: no-repeat;
        -webkit-animation: play01 .4s steps(2) infinite;
        -moz-animation: play01 .4s steps(2) infinite;
        -ms-animation: play01 .4s steps(2) infinite;
        animation: play01 .4s steps(2) infinite;
    }
    
    @keyframes move01 { 
    	0% { 
    	    -webkit-transform: translate(-200px,0);
    	    -moz-transform: translate(-200px,0);
    	    -ms-transform: translate(-200px,0);
    	    transform: translate(-200px,0);
    	    opacity: 1;
    	}
    	100% { 
    	    -webkit-transform: translate(1920px,0);
    	    -moz-transform: translate(1920px,0);
    	    -ms-transform: translate(1920px,0);
    	    transform: translate(1920px,0);
    	    opacity: 1;
    	}
    }
    
    
    @keyframes play01 { 
    	0% { 
    	    background-position: 0 0;
    	}
    	100% { 
    		background-position: -308px 0;
    	}
    }
    
    
    .walk02 { 
    	position: absolute;
        left: 0;
        bottom: 0;
        width: 167px;
        height: 176px;
        opacity: 0;
        -webkit-animation: move01 15s linear 2s infinite;
        -moz-animation: move01 15s linear 2s infinite;
        -ms-animation: move01 15s linear 2s infinite;
        animation: move01 15s linear 2s infinite;
    }
    
    .west-02 { 
    	width: 167px;
        height: 176px;
        background-image: url(../images/txgh_fee2457.png);
        background-repeat: no-repeat;
        -webkit-animation: play02 .4s steps(2) infinite;
        -moz-animation: play02 .4s steps(2) infinite;
        -ms-animation: play02 .4s steps(2) infinite;
        animation: play02 .4s steps(2) infinite;
    }
    
    @keyframes play02 { 
    	0% { 
    	    background-position: 0 0;
    	}
    	100% { 
    		background-position: -334px 0;
    	}
    }
    
    
    
    .walk03 { 
    	position: absolute;
        left: 0;
        bottom: 0;
        width: 161px;
        height: 149px;
        opacity: 0;
        -webkit-animation: move01 15s linear 4s infinite;
        -moz-animation: move01 15s linear 4s infinite;
        -ms-animation: move01 15s linear 4s infinite;
        animation: move01 15s linear 4s infinite;
    }
    
    .west-03 { 
    	width: 161px;
        height: 149px;
        background-image: url(../images/txgl_c15cfd8.png);
        background-repeat: no-repeat;
        -webkit-animation: play03 .4s steps(2) infinite;
        -moz-animation: play03 .4s steps(2) infinite;
        -ms-animation: play03 .4s steps(2) infinite;
        animation: play03 .4s steps(2) infinite;
    }
    
    @keyframes play03 { 
    	0% { 
    	    background-position: 0 0;
    	}
    	100% { 
    		background-position: -322px 0;
    	}
    }
    
    
    
    
    .walk04 { 
    	position: absolute;
        left: 0;
        bottom: 0;
        width: 171px;
        height: 157px;
        opacity: 0;
        -webkit-animation: move01 15s linear 6s infinite;
        -moz-animation: move01 15s linear 6s infinite;
        -ms-animation: move01 15s linear 6s infinite;
        animation: move01 15s linear 6s infinite;
    }
    
    .west-04 { 
    	width: 171px;
        height: 157px;
        background-image: url(../images/txgq_d281c9b.png);
        background-repeat: no-repeat;
        -webkit-animation: play04 .4s steps(2) infinite;
        -moz-animation: play04 .4s steps(2) infinite;
        -ms-animation: play04 .4s steps(2) infinite;
        animation: play04 .4s steps(2) infinite;
    }
    
    @keyframes play04 { 
    	0% { 
    	    background-position: 0 0;
    	}
    	100% { 
    		background-position: -342px 0;
    	}
    }

### 7. 热点新闻持续滚动 ###

![在这里插入图片描述][20210306112156939.gif]

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; } .container { max-width: 640px; height: 100%; margin: 0 auto; background-color: #f8f8f8; } .gonggao { padding-top: 80px; } .gg-pic { float: left; width: 100px; height: 40px; background-color: sandybrown; } .gg-text { margin-left: 100px; height: 40px; line-height: 40px; font-size: 16px; font-family: 'Microsoft Yahei'; overflow: hidden; } .gg-info { width: 200%; position: relative; animation: gonggao 4s linear infinite; } .gg-info p { position: absolute; top: 0; width: 50%; } .gg-info p:first-child { left: 0; } .gg-info p:last-child { left: 50%; } @keyframes gonggao { from { transform: translateX(0); } to { transform: translateX(-50%); } } </style>
    </head>
    <body>
        <div class="container">
            <div class="gonggao">
                <div class="gg-pic"></div>
                <div class="gg-text">
                    <div class="gg-info">
                        <p>从前有座山，山里有座庙，庙里有个页面找呀找不到 </p>
                        <p>从前有座山，山里有座庙，庙里有个页面找呀找不到 </p>
                    </div>
                </div>
            </div>
        </div>
    
    </body>
    </html>

### 8. 速度曲线步长 ###

![在这里插入图片描述][20210306112323860.gif]

<!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-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> div { overflow: hidden; font-size: 20px; width: 0; height: 30px; background-color: pink; /* 让我们的文字强制一行内显示 */ white-space: nowrap; /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */ animation: w 4s steps(10) forwards; } @keyframes w { 0% { width: 0; } 100% { width: 200px; } } </style>
    </head>
    
    <body>
        <div>世纪佳缘我在这里等你</div>
    </body>
    
    </html>

### 9. 旋转木马 ###

<!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-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> body { perspective: 1000px; } section { position: relative; width: 300px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /* 添加动画效果 */ animation: rotate 10s linear infinite; background: url(media/pig.jpg) no-repeat; } section:hover { /* 鼠标放入section 停止动画 */ animation-play-state: paused; } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { transform: rotateY(0) translateZ(300px); } section div:nth-child(2) { /* 先旋转好了再 移动距离 */ transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3) { /* 先旋转好了再 移动距离 */ transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4) { /* 先旋转好了再 移动距离 */ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5) { /* 先旋转好了再 移动距离 */ transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6) { /* 先旋转好了再 移动距离 */ transform: rotateY(300deg) translateZ(300px); } </style>
    </head>
    
    <body>
        <section>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </section>
    </body>
    
    </html>

### 10. 美的导航搜索 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="css/base.css">
        <style> body { height: 2000px; } header { min-width: 1200px; height: 44px; background-color: #0092d8; } .right-info { float: right; } .right-info li { float: left; height: 44px; position: relative; } .right-info li input { width: 100%; height: 100%; text-indent: 2rem; opacity: 0; } .searchbox { width: 45px; transition: width .4s ease-in; } .searchbox:hover { width: 250px; } .searchbox:hover input { opacity: 1; } </style>
    </head>
    
    <body>
        <header>
            <div class="right-info">
                <ul>
                    <li class="searchbox">
                        <input type="text" placeholder="美的热水器">
                    </li>
                    <li class="loginbox">
                        <span>登录</span>
                    </li>
                </ul>
            </div>
        </header>
    </body>
    
    </html>

### 11. 小米产品（重点） ###

![在这里插入图片描述][20210306112225848.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/base.css">
    	<link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    	<div class="product">
    		<ul>
    			<li>
    				<div class="pro-img">
    					<a href="#">
    						<img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
    					</a>
    				</div>
    				<h3><a href="#">小米电视4A 43英寸青春版</a></h3>
    				<p class="desc">全高清屏 / 人工智能语音</p>
    				<p class="price">
    					<span>1499</span>元
    					<del>1699</del>
    				</p>
    				<div class="review">
    					<a href="#">
    						<span class="msg">一如既往的好，小米情怀</span>
    						<span class="auther"> 来自于 惊喜 的评价 </span>
    					</a>
    				</div>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>

> base.css

* { 
    	margin: 0;
    	padding: 0;
    }
    
    ul, ol { 
    	list-style: none;
    }
    
    input, button { 
    	outline: none;
    	border: none;
    }
    
    a { 
    	text-decoration: none;
    }
    
    .clearfix::before, .clearfix::after { 
    	content: "";
    	height: 0;
    	line-height: 0;
    	display: block;
    	visibility: hidden;
    }
    
    .clearfix::after { 
    	clear: both;
    }

> index.css

body { 
        padding: 100px;
        background-color: #f5f5f5;
    }
    
    .product li { 
        float: left;
        width: 234px;
        height: 246px;
        padding: 34px 0 20px;
        z-index: 1;
        margin-left: 14px;
        margin-bottom: 14px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
        position: relative;
    }
    
    .pro-img { 
        width: 150px;
        height: 150px;
        margin: 0 auto 18px;
    }
    
    .pro-img a { 
        width: 100%;
        height: 100%;
    }
    
    .pro-img img { 
        display: block;
        width: 100%;
        height: 100%;
    }
    
    .product li h3 { 
        margin: 0 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
    }
    
    .product li h3 a { 
        color: #333;
    }
    
    .desc { 
        margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #b0b0b0;
    }
    
    .price { 
        font-size: 14px;
        margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
    }
    
    .price del { 
        color: #b0b0b0;
    }
    
    .review { 
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: 234px;
        height: 0;
        overflow: hidden;
        font-size: 12px;
        background: #ff6700;
        opacity: 0;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }
    
    .review a { 
        color: #757575;
        display: block;
        padding: 8px 30px;
        outline: 0;
    }
    
    .review a span { 
        display: block;
        margin-bottom: 5px;
        color: #fff;
    }
    
    .product li:hover { 
        -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
    }
    
    .product li:hover .review { 
        opacity: 1;
        height: 76px;
    }

### 12. 耳机按钮 ###

![在这里插入图片描述][20210306112254615.gif]

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="css/base.css">
    	<link rel="stylesheet" href="css/index.css">
    </head>
    <body>
    	<div class="button">
    		<ul>
    			<li>
    				<a href="#">
    					<span class="button-inner">
    						探索
    						<span class="a11y"></span>
    					</span>
    					<span class="mask"></span>
    				</a>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>

> base.css

> index.css

body { 
    	padding: 50px;
    }
    
    .button ul li { 
    	float: left;
    }
    
    .button li a { 
    	display: inline-block;
        position: relative;
        line-height: 30px;
        text-align: center;
        color: #1e1e1e;
        /* 文字间距 */
        letter-spacing: 0.5px;
        border-radius: 50px;
        overflow: hidden;
        z-index: 1;
        cursor: pointer;
        vertical-align: middle;
        box-sizing: border-box;
    }
    
    .button-inner { 
    	position: relative;
        z-index: 3;
        display: block;
        border-radius: 22px;
        padding: 5px 37px 0 37px;
        margin-right: 0px;
        box-sizing: border-box;
    }
    
    .a11y { 
        height: 1px;
        overflow: hidden;
        position: absolute !important;
        width: 1px;
        display: block;
        margin: 0;
        padding: 0;
    }
    
    .mask { 
    	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    	z-index: 2;
        background-color: #d6d6d6;
        padding-top: 0px;
        line-height: 46px;
        color: #fff;
        display: block;
        transition: transform 0.2s ease-in;
        transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
    }
    
    .button li a:after, .button li a:after { 
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        top: 1px;
        left: 1px;
        bottom: 1.1px;
        right: 1px;
        box-shadow: inset 0px 0px 0px 2px #d3d2d2;
        border-radius: 50px;
    }
    
    .button li a:hover .mask { 
    	transform: none;
    }

### 13. 事件进度条 ###

![在这里插入图片描述][2021030612253095.gif]

一直想做一个事件进度效果，在网上找了好久没找到。最终在一个视频网站上看到这样的效果。果断扒下来经过一番修改，具体代码如下

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style> li, ol, ul { list-style: none; } .unit-pic-layout ul li { position: relative; width: 180px; float: left; margin: 0 22px 10px 0; } .module-tv-slider .toptit { position: relative; width: 180px; height: 90px; cursor: pointer; } /* 线条 */ .module-tv-slider .toptit .line { position: absolute; top: 48px; left: 0; width: 202px; height: 5px; background: #f0f0f0; } /* 圆圈 */ .module-tv-slider .toptit .arrow { position: absolute; top: 43px; left: 82px; width: 14px; height: 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; border-radius: 14px; background: #ddd; } /* 圆圈hover效果 */ .module-tv-slider ul li.cur .toptit .arrow, .module-tv-slider ul li:hover .toptit .arrow { background: #faa61a; } /* 文字 */ .module-tv-slider .toptit span { display: block; width: 126px; height: 30px; line-height: 30px; padding: 0 14px; margin: 0 auto; font-size: 14px; text-align: center; color: #8c8c8c; border: 1px solid #eee; background: #eee; overflow: hidden; } .module-tv-slider ul li.cur .toptit span:before, .module-tv-slider ul li:hover .toptit span:before { position: absolute; top: 31px; left: 82px; content: ""; border-width: 7px; border-color: #fff6ec transparent transparent; border-style: solid dashed dashed; z-index: 2; } .module-tv-slider ul li.cur .toptit span:after, .module-tv-slider ul li:hover .toptit span:after { position: absolute; top: 32px; left: 82px; content: ""; border-width: 7px; border-color: #faa61a transparent transparent; border-style: solid dashed dashed; z-index: 1; } .module-tv-slider ul li.cur .toptit span, .module-tv-slider ul li:hover .toptit span { color: #faa61a; border: 1px solid #faa61a; background: #fff6ec; } </style>
    </head>
    
    <body>
      <div class="unit-pic-layout module-tv-slider">
        <ul>
          <li class="cur">
            <div class="toptit">
              <span>紫钗奇缘</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
          <li>
            <div class="toptit">
              <span>天涯热土</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
          <li>
            <div class="toptit">
              <span>从将军到士兵</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
          <li>
            <div class="toptit">
              <span>独立纵队2</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
          <li>
            <div class="toptit">
              <span>剧情补给站</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
          <li>
            <div class="toptit">
              <span>伏弩</span>
              <i class="line"></i>
              <i class="arrow"></i>
            </div>
          </li>
        </ul>
      </div>
    </body>
    
    </html>

### 14. 炫酷盒子效果 ###

![在这里插入图片描述][20210306122558701.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style> body { margin: 0; padding: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: consolas; } .container { position: relative; width: 1200px; display: flex; flex-wrap: wrap; justify-content: space-around; } .container .box { position: relative; width: 280px; height: 400px; margin: 20px 0; box-sizing: border-box; overflow: hidden; } .container .box .imgBx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; /* 创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏 */ clip-path: circle(400px at center 100px); transition: 0.5s; transition-delay: 0.5s; } .container .box:hover .imgBx { clip-path: circle(80px at center 100px); transition-delay: 0s; } .container .box:hover .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框 */ object-fit: cover; } .container .box .content { position: absolute; left: 0; bottom: 0; width: 100%; height: 55%; padding: 20px; box-sizing: border-box; text-align: center; } .container .box .content h2 { margin: 0; padding: 0; } .container .box .content a { text-decoration: none; background: #000; color: #fff; padding: 5px; display: inline-block; } .container .box .content h2, .container .box .content p, .container .box .content a { opacity: 0; transition: 0.5s ease; transform: translateY(20px); } .container .box:hover .content h2 { opacity: 1; transform: translateY(0px); transition-delay: 0.5s; } .container .box:hover .content p { opacity: 1; transform: translateY(0px); transition-delay: 0.7s; } .container .box:hover .content a { opacity: 1; transform: translateY(0px); transition-delay: 0.9s; } </style>
    </head>
    
    <body>
      <div class="container">
        <div class="box">
          <div class="imgBx">
            <img src="" />
          </div>
          <div class="content">
            <h2>Title</h2>
            <p>jdfkasjdfkjsdkfjsldkf</p>
            <a href="#">Read More</a>
          </div>
        </div>
      </div>
    
    </body>
    
    </html>

### 15. 炫酷鼠标悬停效果 ###

![在这里插入图片描述][20210306122631822.gif]

### 16. 炫酷气泡漂浮效果 ###

![在这里插入图片描述][20210306122655237.gif]

### 17. 炫酷动态流线条按钮 ###

![在这里插入图片描述][2021030612271763.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style> body { margin: 0; padding: 0; background: #0c002b; font-family: sans-serif; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #1670f0; padding: 30px 60px; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); overflow: hidden; } a::before { content: ''; position: absolute; top: 2px; left: 2px; bottom: 2px; width: 50%; background: rgba(255, 255, 255, 0.05); } a span:nth-child(1) { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, #0c002b, #1779ff); animation: animate1 2s linear infinite; } @keyframes animate1 { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } a span:nth-child(2) { position: absolute; top: 0; right: 0; width: 2px; height: 100%; background: linear-gradient(to bottom, #0c002b, #1779ff); animation: animate2 2s linear infinite; animation-delay: 1s; } @keyframes animate2 { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } a span:nth-child(3) { position: absolute; bottom: 0; right: 0; width: 100%; height: 2px; background: linear-gradient(to left, #0c002b, #1779ff); animation: animate3 2s linear infinite; } @keyframes animate3 { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } a span:nth-child(4) { position: absolute; bottom: 0; left: 0; width: 2px; height: 100%; background: linear-gradient(to top, #0c002b, #1779ff); animation: animate4 2s linear infinite; animation-delay: 1s; } @keyframes animate4 { 0% { transform: translateY(100%); } 100% { transform: translateY(-100%); } } </style>
    </head>
    
    <body>
      <a href="">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Button
      </a>
    </body>
    
    </html>

### 18. 加载中Loading效果 ###

![在这里插入图片描述][20210306122739332.gif]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS3动画实现loading效果</title>
      <style> * { margin: 0; padding: 0; } .circlebox { width: 40px; height: 40px; margin: 100px; position: absolute; } .circlebox p { width: 12px; height: 12px; background-color: #ccc; border-radius: 50%; position: absolute; animation: move 1.5s infinite linear; } .circlebox p:nth-of-type(1) { left: 0; top: 0; } .circlebox p:nth-of-type(2) { right: 0; top: 0; } .circlebox p:nth-of-type(3) { right: 0; bottom: 0; } .circlebox p:nth-of-type(4) { left: 0; bottom: 0; } .circlebox:nth-of-type(2) { transform: rotate(45deg); } /* 动画延迟 */ .circlebox:nth-of-type(1) p:nth-of-type(1) { animation-delay: -0.1s; } .circlebox:nth-of-type(2) p:nth-of-type(1) { animation-delay: -0.3s; } .circlebox:nth-of-type(1) p:nth-of-type(2) { animation-delay: -0.5s; } .circlebox:nth-of-type(2) p:nth-of-type(2) { animation-delay: -0.7s; } .circlebox:nth-of-type(1) p:nth-of-type(3) { animation-delay: -0.9s; } .circlebox:nth-of-type(2) p:nth-of-type(3) { animation-delay: -1.1s; } .circlebox:nth-of-type(1) p:nth-of-type(4) { animation-delay: -1.3s; } .circlebox:nth-of-type(2) p:nth-of-type(4) { animation-delay: -1.5s; } /* 动画 */ @keyframes move { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } </style>
    </head>
    
    <body>
      <div class="circlebox">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <div class="circlebox">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
    </body>
    
    </html>

[2021030611201798.png]: /images/20221023/f53ccdcebf824c28ac2cd879c23997e4.png
[20210306112044868.gif]: /images/20221023/09667543ac0442cdafc8498eecaa800d.png
[20210306112829336.gif]: /images/20221023/6401b176a12d4466b71adf639f1963bd.png
[20210306113121376.gif]: /images/20221023/c725d5c9a4f144c08a030a8cc62f4e16.png
[20210306112156939.gif]: /images/20221023/4e64653c683e4e7891c0a91324bfab14.png
[20210306112323860.gif]: /images/20221023/9627d7f504a249bca3711c8d62fe9792.png
[20210306112225848.gif]: /images/20221023/5e5c3ace4d3d4cc0a7aa6670f5b77eeb.png
[20210306112254615.gif]: /images/20221023/c5c8dfc82e2d42d19889c7a1ec02611a.png
[2021030612253095.gif]: /images/20221023/92144e68bad8495096841087c9c6b0a2.png
[20210306122558701.gif]: /images/20221023/1080a37cc8e44dc8ad6d378ba0fd1c02.png
[20210306122631822.gif]: /images/20221023/657e5406588f41d9b2307f02e6917d4c.png
[20210306122655237.gif]: /images/20221023/9f0910454fe04a6189a0db9cbfc1d763.png
[2021030612271763.gif]: /images/20221023/0f1510b89c08426ea8167b8ebfc7f8c0.png
[20210306122739332.gif]: /images/20221023/3757f995175f48b9bfd3dbf5162380d5.png