学习如何使用纯CSS3实现反应式屏幕动效

CSS only Parallax Hover 鼠标悬停在屏幕某个地方时，会感应到力度，而发生相应的倾斜。

css3, transform

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 1229
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body,
html {
    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;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
    -webkit-perspective: 1000;
    perspective: 1000;
    background: #f2faf3;
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
}
*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
body > div {
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
body > div a {
    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;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    width: calc(100% / 3);
    height: calc(100% / 3);
    cursor: pointer;
    color: transparent;
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
}
body > div a:hover ~ div span,
body > div a:focus ~ div span {
    -webkit-transform: translateZ(20px);
    transform: translateZ(20px);
}
body > div a:active {
    outline: none;
}
body > div a:active ~ div {
    background: #AEBFAF;
}
body > div a:nth-child(1) {
    top: 0;
    left: 0;
}
body > div a:nth-child(1):after {
    content: "1";
}
body > div a:nth-child(1):hover ~ div,
body > div a:nth-child(1):focus ~ div {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotateX(5deg) rotateY(-5deg) translateZ(0);
    transform: rotateX(5deg) rotateY(-5deg) translateZ(0);
}
body > div a:nth-child(2) {
    top: 0;
    left: calc(100% / 3);
}
body > div a:nth-child(2):after {
    content: "2";
}
body > div a:nth-child(2):hover ~ div,
body > div a:nth-child(2):focus ~ div {
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transform: rotateX(5deg) translateZ(0);
    transform: rotateX(5deg) translateZ(0);
}
body > div a:nth-child(3) {
    top: 0;
    right: 0;
}
body > div a:nth-child(3):after {
    content: "3";
}
body > div a:nth-child(3):hover ~ div,
body > div a:nth-child(3):focus ~ div {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotateX(5deg) rotateY(5deg) translateZ(0);
    transform: rotateX(5deg) rotateY(5deg) translateZ(0);
}
body > div a:nth-child(4) {
    top: calc(100% / 3);
    left: 0;
}
body > div a:nth-child(4):after {
    content: "4";
}
body > div a:nth-child(4):hover ~ div,
body > div a:nth-child(4):focus ~ div {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotateY(-5deg) translateZ(0);
    transform: rotateY(-5deg) translateZ(0);
}
body > div a:nth-child(5),
body > div a:nth-child(6),
body > div a:nth-child(7),
body > div a:nth-child(8) {
    width: calc(100% / 6);
    height: calc(100% / 6);
}
body > div a:nth-child(5) {
    top: calc(100% / 3);
    left: calc(100% / 3);
}
body > div a:nth-child(5):after {
    content: "5";
}
body > div a:nth-child(5):hover ~ div,
body > div a:nth-child(5):focus ~ div {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotateX(2.5deg) rotateY(-2.5deg) translateZ(0);
    transform: rotateX(2.5deg) rotateY(-2.5deg) translateZ(0);
}
body > div a:nth-child(6) {
    top: calc(100% / 3);
    left: calc(100% / 6 * 3);
}
body > div a:nth-child(6):after {
    content: "6";
}
body > div a:nth-child(6):hover ~ div,
body > div a:nth-child(6):focus ~ div {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotateX(2.5deg) rotateY(2.5deg) translateZ(0);
    transform: rotateX(2.5deg) rotateY(2.5deg) translateZ(0);
}
body > div a:nth-child(7) {
    top: calc(100% / 6 * 3);
    left: calc(100% / 3);
}
body > div a:nth-child(7):after {
    content: "7";
}
body > div a:nth-child(7):hover ~ div,
body > div a:nth-child(7):focus ~ div {
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: rotateX(-2.5deg) rotateY(-2.5deg) translateZ(0);
    transform: rotateX(-2.5deg) rotateY(-2.5deg) translateZ(0);
}
body > div a:nth-child(8) {
    top: calc(100% / 6 * 3);
    left: calc(100% / 6 * 3);
}
body > div a:nth-child(8):after {
    content: "8";
}
body > div a:nth-child(8):hover ~ div,
body > div a:nth-child(8):focus ~ div {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotateX(-2.5deg) rotateY(2.5deg) translateZ(0);
    transform: rotateX(-2.5deg) rotateY(2.5deg) translateZ(0);
}
body > div a:nth-child(9) {
    top: calc(100% / 3);
    right: 0;
}
body > div a:nth-child(9):after {
    content: "9";
}
body > div a:nth-child(9):hover ~ div,
body > div a:nth-child(9):focus ~ div {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotateY(5deg) translateZ(0);
    transform: rotateY(5deg) translateZ(0);
}
body > div a:nth-child(10) {
    bottom: 0;
    left: 0;
}
body > div a:nth-child(10):after {
    content: "10";
}
body > div a:nth-child(10):hover ~ div,
body > div a:nth-child(10):focus ~ div {
    -webkit-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: rotateX(-5deg) rotateY(-5deg) translateZ(0);
    transform: rotateX(-5deg) rotateY(-5deg) translateZ(0);
}
body > div a:nth-child(11) {
    bottom: 0;
    left: calc(100% / 3);
}
body > div a:nth-child(11):after {
    content: "11";
}
body > div a:nth-child(11):hover ~ div,
body > div a:nth-child(11):focus ~ div {
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: rotateX(-5deg) translateZ(0);
    transform: rotateX(-5deg) translateZ(0);
}
body > div a:nth-child(12) {
    bottom: 0;
    right: 0;
}
body > div a:nth-child(12):after {
    content: "12";
}
body > div a:nth-child(12):hover ~ div,
body > div a:nth-child(12):focus ~ div {
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: rotateX(-5deg) rotateY(5deg) translateZ(0);
    transform: rotateX(-5deg) rotateY(5deg) translateZ(0);
}
body > div div {
    position: relative;
    z-index: 1;
    display: block;
    width: 360px;
    height: 256px;
    background: #F5C8BF;
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    border-radius: 2px;
    padding: 12px;
}
body > div div span {
    display: block;
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    border-radius: 2px;
    border: 2px solid rgba(255, 255, 255, 0.75);
}

HTML

CSS only Parallax Hover 鼠标悬停在屏幕某个地方时，会感应到力度，而发生相应的倾斜。

css3, transform

编辑器支持Emmet

快捷键

CSS only Parallax Hover 鼠标悬停在屏幕某个地方时，会感应到力度，而发生相应的倾斜。

css3, transform

学习如何使用CSS3和图片实现人物奔跑动画

使用纯CSS3实现的云雾动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：