css分享按钮点击翻转显示更多效果代码
代码语言：html
所属分类：表单美化
代码描述：css分享按钮点击翻转显示更多效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--dark-color: rgb(41, 41, 41);
--light-color: rgb(255, 255, 255);
}
/* CAN GET RID OF THIS IN PROD */
body,
html {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: rgb(233, 233, 233);
font-family: Arial, Helvetica, sans-serif;
}
.share-widget {
margin: 10px;
}
/* END */
.share-widget .share-widget-title {
display: flex;
justify-content: center;
align-items: center;
}
.share-widget .share-widget-title svg {
width: 20px;
margin-right: 10px;
}
.share-widget .share-widget-title div {
font-size: 14px;
letter-spacing: 1px;
}
.share-widget a {
text-decoration: none;
}
.share-widget a svg {
width: 24px;
margin: 7px;
transition: .2s ease-in-out;
}
.share-widget a svg:hover {
transform: scale(1.1);
transition: .2s ease-in-out;
}
/* FLIP ANIMATION */
.share-widget-container {
perspective: 300px;
width: 220px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.share-widget-container .share-widget {
width: 100%;
max-width: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: -webkit-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.share-widget .share-widget-title,
.share-widget .share-widget-icons {
position: absolute;
width: 100%;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.share-widget .share-widget-icons {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.share-widget.flipped {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* LIGHT & DARK STYLES */
.share-widget.dark a svg {
fill: var(--light-color);
}
.share-widget.light a svg {
fill: var(--dark-color);
}
.share-widget.light .share-widget-title,
.share-widget.light .share-widget-icons {
background-color: var(--light-color);
}
.share-widget.dark .share-widget-title,
.share-widget.dark .share-widget-icons {
background-color: var(--dark-color);
}
.share-widget.light {
color: var(--dark-color);
}
.share-widget.dark {
color: var(--light-color);
}
.share-widget.light .share-widget-title svg {
fill: var(--dark-color);
}
.share-widget.dark .share-widget-title svg {
fill: var(--light-color);
}
</style>
</head>
<body >
<body>
<div class="share-widget-container">
<div class="share-widget dark">
<div class="share-widget-title">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<path
d='M384 336a63.78 63.78 0 00-46.12 19.7l-148-83.27a63.85 63.85 0 000-32.86l148-83.27a63.8 63.8 0 10-15.73-27.87l-148 83.27a64 64 0 100 88.6l148 83.27A64 64 0 10384 336z' />
</svg>
<div>
SHARE
</div>
</div>
<div class="share-widget-icons">
<a href="#">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<path
d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z'
fill-rule='evenodd' />
</svg>
</a>
<a href="#">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<path
d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z' />
</svg>
</a>
<a href="#">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<path
d='M256.05 32c-123.7 0-224 100.3-224 224 0 91.7 55.2 170.5 134.1 205.2-.6-15.6-.1-34.4 3.9-51.4 4.3-18.2 28.8-122.1 28.8-122.1s-7.2-14.3-7.2-35.4c0-33.2 19.2-58 43.2-58 20.4 0 30.2 15.3 30.2 33.6 0 20.5-13.1 51.1-19.8 79.5-5.6 23.8 11.9 43.1 35.4 43.1 42.4 0 71-54.5 71-119.1 0-49.1-33.1-85.8-93.2-85.8-67.9 0-110.3 50.7-110.3 107.3 0 19.5 5.8 33.3 14.8 43.9 4.1 4.9 4.7 6.9 3.2 12.5-1.1 4.1-3.5 14-4.6 18-1.5 5.7-6.1 7.7-11.2 5.6-31.3-12.8-45.9-47-45.9-85.6 0-63.6 53.7-139.9 160.1-139.9 85.5 0 141.8 61.9 141.8 128.3 0 87.9-48.9 153.5-120.9 153.5-24.2 0-46.9-13.1-54.7-27.9 0 0-13 51.6-15.8 61.6-4.7 17.3-14 34.5-22.5 48a225.13 225.13 0 0063.5 9.2c123.7 0 224-100.3 224-224S379.75 32 256.05 32z' />
</svg>
</a>
<a href="#">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'>
<path
d='M496 109.5a201.8 201..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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