你不知道的CSS特效
2024-06-07 12:06:50
| 文字两边添加中间线 | 鼠标移除下拉箭头旋转 | 鼠标移入图片放大 | 鼠标移入-进度条 | 扫描二维码 | 页面底部走动的卡通 | 热点新闻持续滚动 |
|---|---|---|---|---|---|---|
| 速度曲线步长 | 旋转木马 | 美的导航搜索 | 小米产品 | 耳机按钮 | 事件进度条 | 炫酷盒子效果 |
| 炫酷鼠标悬停效果 | 炫酷气泡漂浮效果 | 炫酷动态流线条按钮 | 加载中Loading效果 | |||
1. 文字两边添加中间线
<!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>* {margin: 0;padding: 0;}.w {width: 1200px;margin: 0 auto;}.box {width: 1200px;height: 70px;line-height: 70px;/* background-color: pink; */text-align: center;}.fl {float: left;width: 500px;height: 37px;border-bottom: 10px dotted #ccc;}.fr {float: right;width: 500px;height: 37px;border-bottom: 10px dotted #ccc;}</style>
</head>
<body><div class="box w"><div class="fl"></div>oppo享受品质<div class="fr"></div></div>
</body>
</html>
2. 鼠标移除下拉箭头旋转
<!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. 鼠标移入图片放大
<!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;float: left;margin: 20px;width: 200px;height: 200px;border: 2px solid pink;}div img {width: 100%;height: 100%;transition: all.4s;}div:hover img {transform: scale(1.1);}</style>
</head><body><div><img src="media/scale.jpg" alt=""></div><div><img src="media/scale.jpg" alt=""></div><div><img src="media/scale.jpg" alt=""></div><div><img src="media/scale.jpg" alt=""></div>
</body></html>
4. 鼠标移入-进度条
<!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="data:images/二维吗.png" alt=""><img class="line" src="data: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.cssbody {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>
// 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.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. 热点新闻持续滚动
<!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. 速度曲线步长
<!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>
// 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;
}11. 小米产品（重点）
<!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="data: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. 耳机按钮
<!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
* {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;
}.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. 事件进度条
一直想做一个事件进度效果，在网上找了好久没找到。最终在一个视频网站上看到这样的效果。果断扒下来经过一番修改，具体代码如下
<!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. 炫酷盒子效果
<!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. 炫酷鼠标悬停效果
<style>@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700');body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;font-family: 'Poppins', sans-serif;height: 100vh;background: #333;}ul {margin: 0;padding: 0;display: flex;}ul li {position: relative;list-style: none;width: 20px;height: 20px;background: #777;margin: 0 20px;border-radius: 50%;transition: 0.5s;cursor: pointer;}/* 核心代码 */ul li:hover {background: #86ff3b;box-shadow: 0 0 0 4px #333,0 0 0 6px #86ff3b;}ul li .content::before {content: '';position: absolute;width: 30px;height: 30px;background: #fff;bottom: -15px;left: 194px;transform: rotate(45deg);}ul li .content h2 {margin: 0;padding: 0;}ul li .content {position: absolute;bottom: 55px;width: 400px;background: #fff;padding: 20px;box-sizing: border-box;border-radius: 4px;visibility: hidden;opacity: 0;transition: 0.5s;transform: translateX(-50%) translateY(-50px);}ul li:hover .content {visibility: visible;opacity: 1;transform: translateX(-50%) translateY(0px);}</style><body><ul><li><div class="content"><h2>周一</h2><p>洗衣服</p></div></li><li><div class="content"><h2>周二</h2><p>拖地</p></div></li><li><div class="content"><h2>周三</h2><p>抹桌子</p></div></li></ul>
</body>16. 炫酷气泡漂浮效果
<style>body,html {width: 100%;height: 100%;}body {margin: 0;padding: 0;background: #9b59b6;}.bubbles {position: absolute;width: 100%;height: 100%;z-index: 0;overflow: hidden;top: 0;left: 0;}.bubble {position: absolute;bottom: 0;background: #f1f1f1;border-radius: 50%;opacity: 0.5;animation: flying 10s infinite ease-in;}.bubble:nth-child(1) {width: 40px;height: 40px;left: 10%;animation-duration: 8s;}.bubble:nth-child(2) {width: 20px;height: 20px;left: 20%;animation-duration: 5s;animation-delay: 1s;}.bubble:nth-child(3) {width: 50px;height: 50px;left: 35%;animation-duration: 10s;animation-delay: 2s;}.bubble:nth-child(4) {width: 80px;height: 80px;left: 50%;animation-duration: 7s;animation-delay: 0s;}.bubble:nth-child(5) {width: 35px;height: 35px;left: 55%;animation-duration: 6s;animation-delay: 2s;}.bubble:nth-child(6) {width: 45px;height: 45px;left: 65%;animation-duration: 8s;animation-delay: 3s;}.bubble:nth-child(7) {width: 25px;height: 25px;left: 75%;animation-duration: 7s;animation-delay: 2s;}.bubble:nth-child(8) {width: 80px;height: 80px;left: 80%;animation-duration: 6s;animation-delay: 1s;}.bubble:nth-child(9) {width: 15px;height: 15px;left: 70%;animation-duration: 9s;animation-delay: 0s;}.bubble:nth-child(10) {width: 50px;height: 50px;left: 85%;animation-duration: 5s;animation-delay: 3s;}@keyframes flying {0% {bottom: -100px;transform: translateX(0);}50% {transform: translateX(100px);}100% {bottom: 1080px;transform: translateX(-200px);}}</style><body><div class="bubbles"><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div><div class="bubble"></div></div>
</body>17. 炫酷动态流线条按钮
<!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效果
<!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>
你不知道的CSS特效相关推荐
- 特效html布局,一些好玩的css特效
html5 css3有哪些新特效 html5: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.f ...
- 【正在完善】高级CSS特效解析其示范案例
高级CSS特效解析其示范案例 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?sp ...
- 【CSS特效扫盲】精选40种纯CSS特效应用实例，肝了10个晚上整理纯CSS特效（上）（附源码下载）
[写在前面]其实有时候经常会在某一天用到某种特效,然后就去网上找demo,千篇一律的CSS特效代码不说,更多的是滥竽充数,而且还没有特效预览图,因此针对我之前整理的CSS特效在这里做一个总结,希望给你 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- html字体怎么是什么属性,你不知道的CSS字体属性
原标题:你不知道的CSS字体属性 如果你对于CSS技巧没有深入地了解,这篇文章会让你知道一些控制字体加载的技巧. CSS的字体显示属性在Blink-based浏览器中可以被使用.它使你能够发现浏览器的 ...
- 炫彩流光CSS特效按钮
炫彩流光CSS特效按钮 教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载 效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存 ...
- css特效2：流光边框
作为流光系列之一,流光边框和流光背景只有在::after上设置存在区别,所以本文中将不会有与流光背景相同的代码,如果您还没有看流光背景时怎么做的话,建议先看我前面的文章 css特效1:流光背景?我不允 ...
- css特效实现表情包
用css特效写的表情包,可以直接复制看效果哟,块来试试吧! *{padding:0;margin:0;} ul{list-style: none; }.container{/* background- ...
最新文章
- 互联网协议 — 使用 Wireshark 调试 HTTPS 及 HTTP/2 流量
- 【C++】C++自学旅程(5)：指针和引用
- 《那些年啊，那些事——一个程序员的奋斗史》——126
- r 数据框选子集_在带有组合框的值列表的下拉列表中显示显示属性的子集
- 前端学习（2230）：react条件渲染实现登录二
- windows mysql4.1安装_Windows下，MySql的安装及配置（Install and Config of MySQL in Windows）...
- 9.特殊权限 软连接 硬链接
- SQL Server中追踪器Trace的介绍和简单使用-----（转）
- osharp3使用经验：整合DbContextScope 文章 1
- 加个ing是什么意思_用quot;ing形式quot; 统称 动名词 和 现在分词 可以吗
- 什么是重绘repaint?什么是回流reflow?
- HDU2148 Score【序列处理】
- JavaSE入门学习10：Java修饰符
- LaTeX 公式编辑器（网页版）
- C语言求100以内素数
- java使用RXTX的详细总结
- EditText属性整理
- Unity3D制作塔防类游戏
- java反向代理开源_树莓派反向代理方法大全
- 在centos中安装qq音乐