Pixso-ai介绍

style> * { margin: 0rem; box-sizing: border-box; } .ai-generation-design-content { background: url('https://cms.pixso.cn/images/px-ai/ai-generation-bg.png') no-repeat center center/cover; background-size: cover; min-width: 100vw; min-height: 100vh; height: fit-content; width: fit-content; overflow: hidden; position: relative; font-family: Inter, -apple-system, San Francisco, PingFang SC, Noto sans SC, Microsoft YaHei; } .ai-generation-design-mobile-content { background: url('https://cms.pixso.cn/images/px-ai/ai-generate-mobile-bg.png') no-repeat center center/cover; } .ai-generation-design-content-warp { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .ai-generation-design-content-left { position: relative; top: -2.5rem; height: 17.625rem; } .ai-generation-design-content-left-icon { margin-top: 1.875rem; } .ai-generation-design-content-left-icon-img { height: 2.625rem; width: 8.0625rem; } .ai-generation-design-content-left-title { margin-top: 0.5rem; color: rgba(255, 255, 255, 1); font-size: 3rem; font-weight: 600; line-height: 4.2rem; } .ai-generation-design-content-left-sub { font-size: 1rem; font-weight: 400; line-height: 1.4rem; color: rgba(255, 255, 255, 0.64); margin-top: 0.5rem; width: 30.8125rem; } .ai-generation-design-content-input-wrap { width: 30rem; height: 3.75rem; border-radius: 0.75rem; position: relative; } .ai-generation-design-content-input-bg { position: absolute; left: 0rem; width: 30rem; height: 3.75rem; z-index: 1; background: #FFFFFF; border: 0.125rem solid #FFFFFF; box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.8), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.512), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.384); border-radius: 1rem; } .ai-input-bg-breathe { animation: breatheLight 5s ease-in-out infinite; } .ai-input-bg-mask-breathe { animation: inputBgMaskBreath 5s ease-in-out infinite; } .ai-generation-design-content-input-bg-mask { position: absolute; background: url("https://cms.pixso.cn/images/px-ai/ai-input-bg-mask.png") no-repeat center center/cover; height: 61.6875rem; width: 53.375rem; mix-blend-mode: overlay; left: -11.75rem; top: -31.875rem; } @keyframes textAnimation { 0% { width: 0rem; } 100% { width: 9.3125rem; } } .ai-generation-design-content-input { font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: rgba(0, 0, 0, 0.64); z-index: 2; display: flex; align-items: center; } .ai-generation-design-content-input-text { display: inline-block; overflow: hidden; white-space: nowrap; animation: textAnimation 1s steps(11) 3s 1 normal both; } @keyframes pointerPop { 0% { background: transparent; } 100% { background: rgba(0, 0, 0, 0.64); } } .ai-generation-design-content-input-pointer { height: 0.9375rem; width: 0.125rem; display: inline-block; background: rgba(0, 0, 0, 0.64); animation: pointerPop .8s ease-in-out infinite; } .ai-generation-design-content-btn-container { position: relative; z-index: 2; border: none; } .ai-generation-design-content-btn { padding: 0.625rem 2.25rem; background: radial-gradient(132.08% 5589.38% at 122.93% -59.62%, #A056FF 0%, #5B21FF 100%); border-radius: 0.625rem; font-family: PingFang SC; font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: rgba(255, 255, 255, 0.91); cursor: pointer; border: 0.125rem solid #FFFFFF; z-index: 2; position: relative; } .ai-generation-design-content-btn:active .ai-generation-design-content-btn-press { opacity: 1; } .ai-generation-design-content-btn:hover .ai-generation-design-content-btn-hover { opacity: 1; } .ai-generation-design-content-btn-press { background: rgba(0, 0, 0, 0.1); position: absolute; right: 0; bottom: 0; left: 0rem; top: 0rem; transition: all 0.25s; opacity: 0; } .ai-generation-design-content-btn-hover { background: rgba(255, 255, 255, 0.1); position: absolute; right: 0; bottom: 0; left: 0rem; top: 0rem; transition: all 0.25s; opacity: 0; } .ai-generation-design-content-right { margin-left: 9.3125rem; } .ai-generation-design-video-box { border-radius: 1.1456rem; text-align: center; padding: 0.5rem; transition: all .35s cubic-bezier(.15, 0.5, 0.65, 1); width: 37.875rem; position: relative; z-index: 2; height: 21.75rem; } .ai-generation-design-video-box-bg { position: absolute; top: 0rem; left: 40.5rem; right: 0rem; bottom: 0rem; mix-blend-mode: overlay; } .video-box-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); mix-blend-mode: overlay; box-shadow: 0rem 0.25rem 5.25rem rgba(0, 0, 0, 0.02); } /* .video-box-bg::before { mix-blend-mode: overlay; content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; margin: -0.125rem; border-radius: inherit; background: linear-gradient(108.96deg, rgba(255, 255, 255, 0) 2.25%, rgba(255, 255, 255, 0.2) 47.47%); } */ .video-box-bg-1 { height: 47.3125rem; width: 65.5625rem; border-radius: 8.125rem; background: url("https://cms.pixso.cn/images/px-ai/video-bg-mask-1.png") no-repeat center center/cover; } .video-box-bg-2 { height: 39.125rem; width: 57.3125rem; border-radius: 5.6875rem; background: url("https://cms.pixso.cn/images/px-ai/video-bg-mask-2.png") no-repeat center center/cover; } .video-box-bg-3 { height: 30.9375rem; width: 49.25rem; border-radius: 3.25rem; background: url("https://cms.pixso.cn/images/px-ai/video-bg-mask-3.png") no-repeat center center/cover; } .video-box-bg-4 { height: 21.75rem; width: 37.875rem; border-radius: 1.125rem; opacity: 0.25; /* outline: solid 0.125rem rgb(255 255 255 / 18%); outline-offset: -0.125rem; */ transform: translate(-50%, -50%); box-shadow: 0rem 0.375rem 3.3125rem 0rem rgba(0, 0, 0, 0.28); background-image: linear-gradient(80deg, #fff0 0%, rgb(255 255 255 / 48%) 40%); } .video-box-bg-4::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 1.125rem; border: solid 0.125rem rgb(255 255 255 / 18%); } .video-box-bg-4::before { display: none; background: transparent; } .ai-generation-design-video-box:hover { transform: scale(1.02); } .ai-generation-design-video { height: 20.75rem; width: 36.875rem; border-radius: 0.8181rem; object-fit: fill; } .dis_none { display: none !important; } .vis_hidden { visibility: hidden; } .ai-generartion-design-tip { font-size: 0.75rem; font-weight: 400; line-height: 1.25rem; color: rgba(255, 255, 255, 0.64); white-space: nowrap; margin: auto; margin-top: 1rem; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0rem; } .ai-generation-mobile-tip-dialog { position: fixed; top: 0rem; left: 0rem; right: 0rem; bottom: 0rem; z-index: 99; background: rgba(6, 8, 10, 0.57); } .ai-generation-mobile-tip-dialog-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('https://cms.pixso.cn/images/px-ai/tip-dialog-bg.png') no-repeat center center/cover; background-color: rgba(33, 33, 33, 1); box-shadow: 0rem 0.5rem 1.5rem rgba(25, 25, 26, 0.06), 0rem 0.25rem 1rem rgba(25, 25, 26, 0.04), 0rem 0rem 0.25rem rgba(25, 25, 26, 0.04); border-radius: 0.5rem; border: 0.0625rem solid; border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); width: 20rem; height: 13.375rem; text-align: center; padding-top: 1.25rem; } .ai-mobile-tip-text { color: rgba(255, 255, 255, 0.64); font-size: 0.875rem; line-height: 1.375rem; font-weight: 400; } .ai-mobile-tip-text-sub { color: rgba(255, 255, 255, 0.91); font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; } .tip-dialog-close-icon { position: absolute; top: 0.5rem; right: 0.5rem } .ai-generation-design-footer { position: fixed; bottom: 0.75rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.33); display: flex; flex-wrap: wrap; min-width: 25.75rem; font-size: 0.75rem; font-weight: 500; line-height: 1.05rem; justify-content: center; } .ai-generation-design-footer a { margin-left: 1rem; color: rgba(255, 255, 255, 0.33); text-decoration: none; position: relative; } .ai-generation-design-footer a::after { content: ''; position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%); height: 0.625rem; width: 0.0625rem; background: rgba(255, 255, 255, 0.33); } .ai-generation-design-footer a:last-child::after { background: transparent; } .ai-generation-design-footer a:hover { color: rgba(255, 255, 255, 0.64); } .ai-generation-design-footer a:first-child { cursor: default; } .ai-generation-design-footer a:first-child:hover { color: rgba(255, 255, 255, 0.33); } .video-close-btn { position: absolute; right: 1rem; top: 1rem; border-radius: 0.25rem; height: 1.75rem; width: 1.75rem; } .video-close-btn:hover { background: rgba(255, 255, 255, 0.1); } .left-content-text-animation { transition: max-height 0.8s cubic-bezier(0.25, 0, 0.4, 1); max-height: 16.875rem !important; height: 15.625rem; } .ai-generation-design-content-left-text { max-height: 0rem; overflow: hidden; padding-top: 0rem; } .input-start-animation { animation: leftInputWrap 0.6s cubic-bezier(0.25, 0, 0.4, 1); } @keyframes leftInputWrap { 0% { opacity: 0; } 33% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 1; } } .ai-generation-design-content-input-content { display: flex; align-items: center; margin-top: 3rem; width: 30rem; height: auto; border-radius: 0.75rem; display: flex; align-items: center; justify-content: space-between; padding: 0 0.375rem 0 1.375rem; position: relative; top: -3rem; min-height: 3.75rem; } @keyframes scale-in-ver-center { 0% { height: 0rem; opacity: 0; } 100% { opacity: 1; height: 2.75rem; } } .input-content-animation { z-index: 2; animation: scale-in-ver-center 0.4s ease-in-out; } @keyframes maskShow { 0% { opacity: 0; } 100% { opacity: 1; } } .input-mask-show { animation: maskShow 0.4s cubic-bezier(0.25, 0, 0.4, 1); } @keyframes scale-in-ver-center2 { 0% { height: 1.75rem; } 100% { height: 3.75rem; } } .input-content-animation2 { animation: scale-in-ver-center2 0.4s cubic-bezier(0.25, 0, 0.4, 1); } .ai-generation-design-content-input-content-box { display: flex; align-items: center; justify-content: space-between; width: 100%; overflow: hidden; border-radius: 0.6rem; } .height_0 { height: 0rem } .transY46 { height: 1.75rem; } @keyframes slide-in-right { 0% { -webkit-transform: translateX(62.5rem); transform: translateX(62.5rem) rotate(-20deg); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0) rotate(0deg); opacity: 1; } } .video-box-animation { animation: slide-in-right 0.8s cubic-bezier(0.25, 0, 0.4, 1); } @keyframes scale-in-center { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes scale-in-center4 { 0% { -webkit-transform: scale(0); transform: translate(-50%, -50%) scale(0); } 100% { -webkit-transform: scale(1); transform: translate(-50%, -50%) scale(1); } } .video-box-bg-animation { animation: scale-in-center 1s cubic-bezier(0.25, 0, 0.4, 1); } .video-box-bg-animation4 { transform: translate(-50%, -50%) scale(1); animation: scale-in-center4 1s cubic-bezier(0.25, 0, 0.4, 1); opacity: 0.25; } @media screen and (max-width: 58.5rem) { .ai-generation-design-footer a:nth-child(2)::after { background: transparent; } } @media screen and (max-width: 61.25rem) { .ai-generation-design-content { display: flex; align-items: center; } .ai-generation-design-content-warp { min-height: 0rem; height: auto; position: relative !important; } .ai-generation-design-content-left { padding-left: 0rem; text-align: center; top: 0rem; } .left-content-text-animation { height: 13.125rem; } .ai-generation-design-content-left-icon { width: 100%; text-align: left; } .ai-generation-design-content-left-title { font-size: 2rem; font-weight: 600; line-height: 2.8rem; } .ai-generation-design-content-left-sub { font-size: 0.875rem; font-weight: 400; line-height: 1.225rem; width: 19.375rem; text-align: left; margin: 0.5rem auto 0; } .ai-generation-design-content { overflow-x: hidden; } .ai-generation-design-content-warp { display: block; position: absolute; top: -2.5rem; left: 0rem; right: 0rem; bottom: 0rem; margin: auto; } .ai-generation-design-content-input-wrap { margin: auto; height: 3rem; width: 20.0625rem; border-radius: 0.5rem; margin-top: 1.5rem; } .ai-generation-design-content-input-content { margin: auto; height: 3rem; width: 20.0625rem; border-radius: 0.5rem; margin-top: 1.5rem; padding-left: 0.75rem; padding-right: 0.25rem; top: 0rem; } .ai-generation-design-content-input-bg { height: 3rem; width: 20.0625rem; border-radius: 0.5rem; } .ai-generation-design-content-input { width: 8.25rem; height: 1.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; } .ai-generation-design-content-btn { border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; height: 2.5rem; width: 8.25rem; padding: 0.375rem 1.9375rem; } .input-wrap-animation-start { height: 1.375rem; } .ai-generation-design-content-right { text-align: center; left: 0rem; margin: auto; margin-top: 2.5rem; height: 14.0625rem; } .left-content-text-animation { max-height: 15.625rem !important; } .ai-generation-design-video-box { padding: 0.375rem; border-radius: 0.6069rem; height: 11.75rem; width: 20.25rem; } .ai-generation-design-video-box:hover { transform: none; } .ai-generation-design-video-box-bg { left: 0px; top: 19rem; } .ai-generation-design-video-box-bg::after { height: 31.5rem; width: 47.8125rem; top: -70%; left: -81%; opacity: 0.4; } .ai-generation-design-video-box.large-play { padding: 0; } .ai-generation-design-video { height: 10.9938rem; width: 19.5313rem; border-radius: 0.4338rem; } .video-box-bg { opacity: 0.25; } .video-box-bg-1 { height: 26rem; width: 36.0625rem; border-radius: 4.4375rem; } .video-box-bg-2 { height: 21.5625rem; width: 31.625rem; border-radius: 3.125rem; } .video-box-bg-3 { height: 17rem; width: 27.125rem; border-radius: 1.8125rem; } .video-box-bg-4 { height: 11.5rem; width: 20.0625rem; border-radius: 0.625rem; } .video-box-bg-4::after { border-radius: 0.625rem; } .ai-generation-design-content-input-bg-mask { opacity: 0.25; } } @media screen and (min-width: 100rem) { body { overflow-x: hidden; } .ai-generation-design-video-box { height: 32.375rem; width: 56.375rem; padding: 0.75rem; border-radius: 1.6875rem; } .video-box-bg-1 { height: 76.0625rem; width: 101.25rem; } .video-box-bg-2 { height: 64.5625rem; width: 89.75rem; } .video-box-bg-3 { height: 53.3125rem; width: 78.5rem; } .video-box-bg-4 { height: 32.375rem; width: 56.375rem; border-radius: 1.6875rem; opacity: 0.25; } .video-box-bg-4::after { border-radius: 1.6875rem; } .ai-generation-design-video-box.large-play { padding: 0.75rem; } .ai-generation-design-video { width: 54.875rem; height: 30.875rem; border-radius: 1.22rem; } .ai-generation-design-content-left { top: -4.375rem; } .ai-generation-design-video-box-bg { left: 40rem; } } @media screen and (min-width: 160rem) { /* */ } @keyframes breatheLight { 0% { box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.8), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.512), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.384); } 33% { box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.5), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.32), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.24); } 53% { box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.7), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.448), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.336); } 80% { box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.5), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.32), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.24); } 100% { box-shadow: 0rem 0rem 10rem 0rem rgba(255, 255, 255, 0.8), 0rem 0rem 4rem 0rem rgba(255, 255, 255, 0.512), 0rem 0rem 2rem 0rem rgba(255, 255, 255, 0.384); border-radius: 1rem; } } @keyframes inputBgMaskBreath { 0% { opacity: 1; } 33% { opacity: 0.1; } 53% { opacity: 0.6; } 80% { opacity: 0.1; } 100% { opacity: 1; } } .video-large-play-mask { width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); } .large-play { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.8); transform-origin: 50% 50%; z-index: 100; padding: 0.5rem; transition: all .35s cubic-bezier(.34, 1.1, 0.64, 1); } .large-play::after { background: none; } .large-play:hover { transform: translate(-50%, -50%) scale(1.8); } .large-play-mobile { position: fixed; transform: scale(1.1) !important; transform-origin: 50% 50%; z-index: 100; padding: 0.375rem; } .large-play-mobile:hover { transform: scale(1.1) !important; } .large-play-mobile::after { background: none; } .ai-generation-design-header-btn { z-index: 1; position: fixed; top: 1.5rem; right: 1.375rem; height: 2rem; width: 6.1875rem; padding: 0.3125rem 0.625rem 0.3125rem 0.75rem; display: flex; align-items: center; border-radius: 0.375rem; color: rgba(255, 255, 255, 0.91); white-space: nowrap; cursor: pointer; text-decoration: none; } .ai-generation-design-header-btn span { font-size: 0.875rem; font-weight: 500; line-height: 1.375rem; } .ai-generation-design-header-btn:hover { background: rgba(255, 255, 255, 0.1); } .ai-generation-design-header-btn-icon { margin-left: 0.5rem; } .height_28 { height: 1.75rem; } @keyframes inputTextAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } .ai-input-text-animation { animation: inputTextAnimation 0.3s ease-in-out; } .opacity0 { opacity: 0 !important; }

立即体验

由 AI 生成UI设计灵感

Pixso AI 通过大型语言模型，根据简单的文本描述即可快速生成符合要求的可编辑设计文件。帮助设计师更加高效和快速的开始设计。

移动端个人中心页面

生成设计稿

请进入电脑端体验文生设计稿功能

请进入桌面端体验文生设计稿

pixso.cn/app/ai