浮动举报按钮html,Css浮动按钮

川长思鸟来 2022-10-07 04:45 234阅读 0赞

css

body \{

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: crimson;

\* \{

box-sizing: border-box;

button \{

position: relative;

background: none;

cursor: pointer;

border: 0;

padding: 0;

outline: 0;

font-family: 'Chewy', cursive;

color: crimson;

width: 250px;

span \{

display: block;

.shadow:before,

.shadow:after \{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100px;

background: red;

z-index: -1;

background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

opacity: .4;

transform: rotateX(0);

transform-origin: center 30px;

filter: blur(1px);

animation: shadowLeft 2s ease-in-out alternate infinite;

transition: all 1s cubic-bezier(0.875, -0.555, 0.190, 1.640);

@keyframes shadowLeft \{

to \{

opacity: .1;

filter: blur(5px);

.shadow:after \{

background: linear-gradient(to left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);

opacity: .1;

filter: blur(5px);

animation: shadowRight 2s ease-in-out alternate infinite;

@keyframes shadowRight \{

to \{

opacity: .4;

filter: blur(1px);

button:focus .shadow:before,

button:focus .shadow:after \{

transform: rotateX(180deg);

.vert \{

transform: translateY(-20px);

animation: vert 1s ease-in-out alternate infinite;

@keyframes vert \{

to \{

transform: translateY(-25px);

.floating \{

background-color: transparent;

\-webkit-perspective: 800;

\-webkit-transform-style: preserve-3d;

transform: rotateY(-3deg) skewY(-3deg);

animation: swing 2s cubic-bezier(0.420, 0.000, 0.580, 1.000) alternate infinite;

@keyframes swing \{

to \{

transform: rotateY(3deg) skewY(3deg);

.floating span \{

display: block;

padding: 10px 0;

border-radius: 100px;

font-size: 30px;

background: \#fff;

transition: all 1s cubic-bezier(0.875, -0.555, 0.190, 1.640);

transform: translateY(-3px) translateZ(5px) rotateX(0);

width: 100%;

span.back \{

position: absolute;

top: 0;

left: 0;

background: \#aaa;

transform: translateY(3px) translateZ(-5px) rotateX(-180deg);

button:focus .front \{

transform: translateY(3px) translateZ(-5px) rotateX(180deg);

background: \#aaa;

button:focus .back \{

transform: translateY(-3px) translateZ(5px) rotateX(0);

background: \#fff;

浮动举报按钮html,Css浮动按钮

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 (android 地图开发) 高德地图添加浮动按钮

相关浮动举报按钮html,Css浮动按钮

相关 FloatingDragButton:炫酷的拖拽浮动按钮

相关 Android中浮动按钮

相关 bootstrap按钮，浮动，显示

相关浮动按钮制作教程及源代码

相关 Flutter中的浮动按钮 FloatingActionButton

相关浮动+清除浮动

相关 vue浮动按钮

相关 flutter 利用浮动按钮,实现导航栏中间放置圆形按钮效果