jquery实现卡片点击切换文字效果代码
代码语言：html
所属分类：其他
代码描述：jquery实现卡片点击切换文字效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
@import "https://fonts.googleapis.com/css?family=Raleway:400,300,200,500,600,700";
body{
padding: 40px;
}
.fa-spin-fast {
-webkit-animation: fa-spin-fast 0.2s infinite linear;
animation: fa-spin-fast 0.2s infinite linear;
}
@-webkit-keyframes fa-spin-fast {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes fa-spin-fast {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.material-card {
position: relative;
height: 0;
padding-bottom: calc(100% - 16px);
margin-bottom: 6.6em;
}
.material-card h2 {
position: absolute;
top: calc(100% - 16px);
left: 0;
width: 100%;
padding: 10px 16px;
color: #fff;
font-size: 1.4em;
line-height: 1.6em;
margin: 0;
z-index: 10;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card h2 span {
display: block;
}
.material-card h2 strong {
font-weight: 400;
display: block;
font-size: 0.8em;
}
.material-card h2:before,
.material-card h2:after {
content: ' ';
position: absolute;
left: 0;
top: -16px;
width: 0;
border: 8px solid;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card h2:after {
top: auto;
bottom: 0;
}
@media screen and (max-width: 767px) {
.material-card.mc-active {
padding-bottom: 0;
height: auto;
}
}
.material-card.mc-active h2 {
top: 0;
padding: 10px 16px 10px 90px;
}
.material-card.mc-active h2:before {
top: 0;
}
.material-card.mc-active h2:after {
bottom: -16px;
}
.material-card .mc-content {
position: absolute;
right: 0;
top: 0;
bottom: 16px;
left: 16px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .mc-btn-action {
position: absolute;
right: 16px;
top: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid;
width: 54px;
height: 54px;
line-height: 44px;
text-align: center;
color: #fff;
cursor: pointer;
z-index: 20;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .mc-btn-action {
top: 62px;
}
.material-card .mc-description {
position: absolute;
top: 100%;
right: 30px;
left: 30px;
bottom: 54px;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 1.2s;
-moz-transition: all 1.2s;
-ms-transition: all 1.2s;
-o-transition: all 1.2s;
transition: all 1.2s;
}
.material-card .mc-footer {
height: 0;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card .mc-footer h4 {
position: absolute;
top: 200px;
left: 30px;
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 700;
-webkit-transition: all 1.4s;
-moz-transition: all 1.4s;
-ms-transition: all 1.4s;
-o-transition: all 1.4s;
transition: all 1.4s;
}
.material-card .mc-footer a {
display: block;
float: left;
position: relative;
width: 52px;
height: 52px;
margin-left: 5px;
margin-bottom: 15px;
font-size: 28px;
color: #fff;
line-height: 52px;
text-decoration: none;
top: 200px;
}
.material-card .mc-footer a:nth-child(1) {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.material-card .mc-footer a:nth-child(2) {
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}
.material-card .mc-footer a:nth-child(3) {
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-ms-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
}
.material-card .mc-footer a:nth-child(4) {
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.material-card .mc-footer a:nth-child(5) {
-webkit-transition: all 0.9s;
-moz-transition: all 0.9s;
-ms-transition: all 0.9s;
-o-transition: all 0.9s;
transition: all 0.9s;
}
.material-card .img-container {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 3;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.material-card.mc-active .img-container {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
left: 0;
top: 12px;
width: 60px;
height: 60px;
z-index: 20;
}
.material-card.mc-active .mc-content {
padding-top: 5.6em;
}
@media screen and (max-width: 767px) {
.material-card.mc-active .mc-content {
position: relative;
margin-right: 16px;
}
}
.material-card.mc-active .mc-description {
top: 50px;
padding-top: 5.6em;
opacity: 1;
filter: alpha(opacity=100);
}
@media screen and (max-width: 767px) {
.material-card.mc-active .mc-description {
position: relative;
top: auto;
right: auto;
left: auto;
padding: 50px 30px 70px 30px;
bottom: 0;
}
}
.material-card.mc-active .mc-footer {
overflow: visible;
position: absolute;
top: calc(100% - 16px);
left: 16px;
right: 0;
height: 82px;
padding-top: 15px;
padding-left: 25px;
}
.material-card.mc-active .mc-footer a {
top: 0;
}
.material-card.mc-active .mc-footer h4 {
top: -32px;
}
.material-card.Red h2 {
background-color: #F44336;
}
.material-card.Red h2:after {
border-top-color: #F44336;
border-right-color: #F44336;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Red h2:before {
border-top-color: transparent;
border-right-color: #B71C1C;
border-bottom-color: #B71C1C;
border-left-color: transparent;
}
.material-card.Red.mc-active h2:before {
border-top-color: transparent;
border-right-color: #F44336;
border-bottom-color: #F44336;
border-left-color: transparent;
}
.material-card.Red.mc-active h2:after {
border-top-color: #B71C1C;
border-right-color: #B71C1C;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Red .mc-btn-action {
background-color: #F44336;
}
.material-card.Red .mc-btn-action:hover {
background-color: #B71C1C;
}
.material-card.Red .mc-footer h4 {
color: #B71C1C;
}
.material-card.Red .mc-footer a {
background-color: #B71C1C;
}
.material-card.Red.mc-active .mc-content {
background-color: #FFEBEE;
}
.material-card.Red.mc-active .mc-footer {
background-color: #FFCDD2;
}
.material-card.Red.mc-active .mc-btn-action {
border-color: #FFEBEE;
}
.material-card.Blue-Grey h2 {
background-color: #607D8B;
}
.material-card.Blue-Grey h2:after {
border-top-color: #607D8B;
border-right-color: #607D8B;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Blue-Grey h2:before {
border-top-color: transparent;
border-right-color: #263238;
border-bottom-color: #263238;
border-left-color: transparent;
}
.material-card.Blue-Grey.mc-active h2:before {
border-top-color: transparent;
border-right-color: #607D8B;
border-bottom-color: #607D8B;
border-left-color: transparent;
}
.material-card.Blue-Grey.mc-active h2:after {
border-top-color: #263238;
border-right-color: #263238;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Blue-Grey .mc-btn-action {
background-color: #607D8B;
}
.material-card.Blue-Grey .mc-btn-action:hover {
background-color: #263238;
}
.material-card.Blue-Grey .mc-footer h4 {
color: #263238;
}
.material-card.Blue-Grey .mc-footer a {
background-color: #263238;
}
.material-card.Blue-Grey.mc-active .mc-content {
background-color: #ECEFF1;
}
.material-card.Blue-Grey.mc-active .mc-footer {
background-color: #CFD8DC;
}
.material-card.Blue-Grey.mc-active .mc-btn-action {
border-color: #ECEFF1;
}
.material-card.Pink h2 {
background-color: #E91E63;
}
.material-card.Pink h2:after {
border-top-color: #E91E63;
border-right-color: #E91E63;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Pink h2:before {
border-top-color: transparent;
border-right-color: #880E4F;
border-bottom-color: #880E4F;
border-left-color: transparent;
}
.material-card.Pink.mc-active h2:before {
border-top-color: transparent;
border-right-color: #E91E63;
border-bottom-color: #E91E63;
border-left-color: transparent;
}
.material-card.Pink.mc-active h2:after {
border-top-color: #880E4F;
border-right-color: #880E4F;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Pink .mc-btn-action {
background-color: #E91E63;
}
.material-card.Pink .mc-btn-action:hover {
background-color: #880E4F;
}
.material-card.Pink .mc-footer h4 {
color: #880E4F;
}
.material-card.Pink .mc-footer a {
background-color: #880E4F;
}
.material-card.Pink.mc-active .mc-content {
background-color: #FCE4EC;
}
.material-card.Pink.mc-active .mc-footer {
background-color: #F8BBD0;
}
.material-card.Pink.mc-active .mc-btn-action {
border-color: #FCE4EC;
}
.material-card.Purple h2 {
background-color: #9C27B0;
}
.material-card.Purple h2:after {
border-top-color: #9C27B0;
border-right-color: #9C27B0;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Purple h2:before {
border-top-color: transparent;
border-right-color: #4A148C;
border-bottom-color: #4A148C;
border-left-color: transparent;
}
.material-card.Purple.mc-active h2:before {
border-top-color: transparent;
border-right-color: #9C27B0;
border-bottom-color: #9C27B0;
border-left-color: transparent;
}
.material-card.Purple.mc-active h2:after {
border-top-color: #4A148C;
border-right-color: #4A148C;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Purple .mc-btn-action {
background-color: #9C27B0;
}
.material-card.Purple .mc-btn-action:hover {
background-color: #4A148C;
}
.material-card.Purple .mc-footer h4 {
color: #4A148C;
}
.material-card.Purple .mc-footer a {
background-color: #4A148C;
}
.material-card.Purple.mc-active .mc-content {
background-color: #F3E5F5;
}
.material-card.Purple.mc-active .mc-footer {
background-color: #E1BEE7;
}
.material-card.Purple.mc-active .mc-btn-action {
border-color: #F3E5F5;
}
.material-card.Deep-Purple h2 {
background-color: #673AB7;
}
.material-card.Deep-Purple h2:after {
border-top-color: #673AB7;
border-right-color: #673AB7;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Deep-Purple h2:before {
border-top-color: transparent;
border-right-color: #311B92;
border-bottom-color: #311B92;
border-left-color: transparent;
}
.material-card.Deep-Purple.mc-active h2:before {
border-top-color: transparent;
border-right-color: #673AB7;
border-bottom-color: #673AB7;
border-left-color: transparent;
}
.material-card.Deep-Purple.mc-active h2:after {
border-top-color: #311B92;
border-right-color: #311B92;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Deep-Purple .mc-btn-action {
background-color: #673AB7;
}
.material-card.Deep-Purple .mc-btn-action:hover {
background-color: #311B92;
}
.material-card.Deep-Purple .mc-footer h4 {
color: #311B92;
}
.material-card.Deep-Purple .mc-footer a {
background-color: #311B92;
}
.material-card.Deep-Purple.mc-active .mc-content {
background-color: #EDE7F6;
}
.material-card.Deep-Purple.mc-active .mc-footer {
background-color: #D1C4E9;
}
.material-card.Deep-Purple.mc-active .mc-btn-action {
border-color: #EDE7F6;
}
.material-card.Indigo h2 {
background-color: #3F51B5;
}
.material-card.Indigo h2:after {
border-top-color: #3F51B5;
border-right-color: #3F51B5;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Indigo h2:before {
border-top-color: transparent;
border-right-color: #1A237E;
border-bottom-color: #1A237E;
border-left-color: transparent;
}
.material-card.Indigo.mc-active h2:before {
border-top-color: transparent;
border-right-color: #3F51B5;
border-bottom-color: #3F51B5;
border-left-color: transparent;
}
.material-card.Indigo.mc-active h2:after {
border-top-color: #1A237E;
border-right-color: #1A237E;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Indigo .mc-btn-action {
background-color: #3F51B5;
}
.material-card.Indigo .mc-btn-action:hover {
background-color: #1A237E;
}
.material-card.Indigo .mc-footer h4 {
color: #1A237E;
}
.material-card.Indigo .mc-footer a {
background-color: #1A237E;
}
.material-card.Indigo.mc-active .mc-content {
background-color: #E8EAF6;
}
.material-card.Indigo.mc-active .mc-footer {
background-color: #C5CAE9;
}
.material-card.Indigo.mc-active .mc-btn-action {
border-color: #E8EAF6;
}
.material-card.Blue h2 {
background-color: #2196F3;
}
.material-card.Blue h2:after {
border-top-color: #2196F3;
border-right-color: #2196F3;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Blue h2:before {
border-top-color: transparent;
border-right-color: #0D47A1;
border-bottom-color: #0D47A1;
border-left-color: transparent;
}
.material-card.Blue.mc-active h2:before {
border-top-color: transparent;
border-right-color: #2196F3;
border-bottom-color: #2196F3;
border-left-color: transparent;
}
.material-card.Blue.mc-active h2:after {
border-top-color: #0D47A1;
border-right-color: #0D47A1;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Blue .mc-btn-action {
background-color: #2196F3;
}
.material-card.Blue .mc-btn-action:hover {
background-color: #0D47A1;
}
.material-card.Blue .mc-footer h4 {
color: #0D47A1;
}
.material-card.Blue .mc-footer a {
background-color: #0D47A1;
}
.material-card.Blue.mc-active .mc-content {
background-color: #E3F2FD;
}
.material-card.Blue.mc-active .mc-footer {
background-color: #BBDEFB;
}
.material-card.Blue.mc-active .mc-btn-action {
border-color: #E3F2FD;
}
.material-card.Light-Blue h2 {
background-color: #03A9F4;
}
.material-card.Light-Blue h2:after {
border-top-color: #03A9F4;
border-right-color: #03A9F4;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Light-Blue h2:before {
border-top-color: transparent;
border-right-color: #01579B;
border-bottom-color: #01579B;
border-left-color: transparent;
}
.material-card.Light-Blue.mc-active h2:before {
border-top-color: transparent;
border-right-color: #03A9F4;
border-bottom-color: #03A9F4;
border-left-color: transparent;
}
.material-card.Light-Blue.mc-active h2:after {
border-top-color: #01579B;
border-right-color: #01579B;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Light-Blue .mc-btn-action {
background-color: #03A9F4;
}
.material-card.Light-Blue .mc-btn-action:hover {
background-color: #01579B;
}
.material-card.Light-Blue .mc-footer h4 {
color: #01579B;
}
.material-card.Light-Blue .mc-footer a {
background-color: #01579B;
}
.material-card.Light-Blue.mc-active .mc-content {
background-color: #E1F5FE;
}
.material-card.Light-Blue.mc-active .mc-footer {
background-color: #B3E5FC;
}
.material-card.Light-Blue.mc-active .mc-btn-action {
border-color: #E1F5FE;
}
.material-card.Cyan h2 {
background-color: #00BCD4;
}
.material-card.Cyan h2:after {
border-top-color: #00BCD4;
border-right-color: #00BCD4;
border-bottom-color: transparent;
border-left-color: transparent;
}
.material-card.Cyan h2:before {
border-top-color: transparent;
border-right-color: #006064;
border-bottom-color: #006064;
border-left-color: transparent;
}
.material-card.Cyan.mc-active h2:before {
border-top-color: transparent;
border-right-color: #00BCD4;
border-bottom-color: #.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0