css 涟漪,CSS3 涟漪形图案动效

Love The Way You Lie 2022-09-03 01:28 219阅读 0赞

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes pulse \{

0% \{

box-shadow: 0 0 0 0;

color: \#fff;

background: \#fff;

@keyframes pulse \{

0% \{

box-shadow: 0 0 0 0;

color: \#fff;

background: \#fff;

@-webkit-keyframes pulse-invert \{

0% \{

box-shadow: 0 0 0 0;

color: \#000;

background: \#000;

@keyframes pulse-invert \{

0% \{

box-shadow: 0 0 0 0;

color: \#000;

background: \#000;

@-webkit-keyframes slide \{

from \{

left: 35vw;

color: \#fff;

to \{

left: 65vw;

color: transparent;

@keyframes slide \{

from \{

left: 35vw;

color: \#fff;

to \{

left: 65vw;

color: transparent;

main \{

\-webkit-box-flex: 1;

\-webkit-flex: 1;

\-ms-flex: 1;

flex: 1;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-box-align: center;

\-webkit-align-items: center;

\-ms-flex-align: center;

align-items: center;

position: relative;

overflow: hidden;

cursor: none;

main div:not(.i) \{

pointer-events: none;

\-webkit-box-flex: 0;

\-webkit-flex: none;

\-ms-flex: none;

flex: none;

position: absolute;

padding: .05em;

border-radius: 1em;

\-webkit-animation: pulse 3s ease-out;

animation: pulse 3s ease-out;

will-change: box-shadow, color, background;

color: transparent;

background: transparent;

box-shadow: 0 0 0 7em;

main .i \{

position: relative;

color: transparent;

border: 0;

padding: 1em;

\-webkit-user-select: none;

\-moz-user-select: none;

\-ms-user-select: none;

user-select: none;

left: 30vw;

font-size: .3em;

\-webkit-animation: slide 10s ease-out;

animation: slide 10s ease-out;

main.inverse \{

background: \#fff;

main.inverse div:not(.i) \{

\-webkit-animation: pulse-invert 3s ease-out;

animation: pulse-invert 3s ease-out;

main + footer .circle \{

display: none;

main.square div \{

border-radius: 0;

main.square + footer .square \{

display: none;

main.square + footer .circle \{

display: inline;

html.invert body \{

background: \#fff;

html.invert body::after \{

mix-blend-mode: screen;

html.invert main div:not(.i) \{

\-webkit-animation: pulse-invert 3s ease-out;

animation: pulse-invert 3s ease-out;

html.invert main.inverse \{

background: \#000;

html.invert main.inverse div:not(.i) \{

\-webkit-animation: pulse 3s ease-out;

animation: pulse 3s ease-out;

body \{

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

font-size: calc(120% + 2.5vmax);

body::after \{

mix-blend-mode: multiply;

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

pointer-events: none;

body.one::after \{

body.two::after \{

body.three::after \{

body.four::after \{

body.five::after \{

footer \{

position: absolute;

top: 0;

right: 0;

left: 0;

cursor: pointer;

font-size: .7em;

mix-blend-mode: exclusion;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

\-webkit-transition: background .3s ease-out;

transition: background .3s ease-out;

footer:hover \{

background: \#333;

footer span \{

padding: .5em;

\-webkit-box-flex: 1;

\-webkit-flex: 1;

\-ms-flex: 1;

flex: 1;

text-align: center;

\-webkit-transition: background .3s ease-out;

transition: background .3s ease-out;

footer span:hover \{

background: \#666;

html,

body \{

height: 100%;

body \{

margin: 0;

color: \#fff;

background: \#000;

font-family: helvetica, FontAwesome, sans-serif;

css 涟漪,CSS3 涟漪形图案动效

发表评论取消回复

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

相关阅读

相关 vue3 composition-api实现波纹涟漪

相关涟漪扩散效果（呼吸灯效果）

相关从浏览器渲染层面解析css3动效优化原理

相关 css代码皮卡丘动效

相关 css 涟漪,CSS3 涟漪形图案动效

相关 css 外圆角旋转,CSS3 图片圆角旋转滤镜动效

相关 CSS3 缓动函数

相关前端必须珍藏六个CSS3动效库

相关地图涟漪效果

相关涟漪_三