欢迎使用信用卡结账的动画

点击CHECKOUT结账时信用卡卡通图案产生拟人化的挤眉弄眼动效。

CSS3, SVG

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body,
html {
    height: 100%;
}
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #DAECF7;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
h1 {
    font-size: 1em;
    font-family: "Montserrat";
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
    color: #b6d0e0;
    position: relative;
    margin-top: -15px;
    line-height: 15px;
}
.center {
    margin: auto;
}
.wrapper {
    width: 700px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    background: white;
    overflow: hidden;
    height: 364px;
    border-radius: 8px;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.card-wrap {
    width: 260px;
    float: right;
    background: #665aa7;
    padding: 50px;
    -webkit-transform: scale(1.5) rotate(20deg);
    transform: scale(1.5) rotate(20deg);
}
.card {
    -webkit-transform: scale(0.75) rotate(-20deg);
    transform: scale(0.75) rotate(-20deg);
}
svg {
    width: 150%;
    position: relative;
    right: 130px;
    top: 10px;
    overflow: visible;
}
svg:not(:root) {
    overflow: visible;
}
#sunglasses {
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.checkout:hover ~ .card-wrap #sunglasses {
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px);
}
#right_eye_wink {
    display: none;
}
.checkout:active ~ .card-wrap #right_eye {
    display: none;
}
.checkout:active ~ .card-wrap #right_eye_wink {
    display: block;
}
#mouth {
    -webkit-transition: -webkit-transform .15s ease-out;
    transition: -webkit-transform .15s ease-out;
    transition: transform .15s ease-out;
    transition: transform .15s ease-out, -webkit-transform .15s ease-out;
}
.checkout:hover ~ .card-wrap #mouth {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}
#front_hand,
#back_hand {
    -webkit-transition: -webkit-transform .04s ease-out;
    transition: -webkit-transform .04s ease-out;
    transition: transform .04s ease-out;
    transition: transform .04s ease-out, -webkit-transform .04s ease-out;
}
.checkout:active ~ .card-wrap #front_hand,
.checkout:active ~ .card-wrap #back_hand {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
.checkout {
    outline: none;
    background: #665aa7;
    border: 0;
    color: white;
    position: relative;
    top: 50%;
    left: 15%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 12px 16px;
    font-family: "Montserrat";
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: .1em;
    border-radius: 4px;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.checkout:hover:not(:active) {
    background: #857bb9;
}

HTML

<div class="center">
    <h1>Daily UI 002: Credit Card Checkout</h1>
    <div class="wrapper">
        <button class="checkout">Checkout</button>
        <div class="card-wrap">
            <div class="card">
                <?xml version="1.0" encoding="utf-8" ?>
                
                <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216.3 234.1" enable-background="new 0 0 216.3 234.1" xml:space="preserve">
                    <g id="shadow">
                        <g>
                            <path fill="#5A488F" d="M178.1,211.7c14.8-2.1,23.9-5.1,23.9-8.3c0-6.6-37.8-11.9-84.4-11.9c-46.6,0-84.4,5.3-84.4,11.9
			c0,5.1,23,9.5,55.3,11.2c-10.5,2.1-16.7,4.7-16.7,7.6c0,6.6,32.4,11.9,72.3,11.9c39.9,0,72.3-5.3,72.3-11.9
			C216.3,217.7,200.8,213.7,178.1,211.7z" />
                        </g>
                    </g>
                    <g id="back_hand">
                        <g>
                            <path fill="#FFFFFF" d="M43.4,127.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.2-6.2,14.1-6.2,14.1H4.8
			c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6h10.2v20.5c0,0.5,0.4,1,1,1H18h4.5h8.8c7.5,0,14-5.6,14.7-13.1
			C46.4,133.8,45.3,130.4,43.4,127.7z" />
                            <g>
                                <path fill="#DAEDF7" d="M32.7,125.9h-3.4c-2.3,0-4-1.9-3.8-4.2v0h7.2L32.7,125.9z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M18,130.2H4.8c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h27.9c0.6,0,1.1,0.5,1.1,1.1
				s-0.5,1.1-1.1,1.1H4.8c-1.4,0-2.5,1.1-2.5,2.5c0,1.4,1.1,2.6,2.5,2.6H18c0.6,0,1.1,0.5,1.1,1.1S18.6,130.2,18,130.2z" />
                            </g>
                            <g>
                                <path fill="#DAEDF7" d="M29.3,130.9c8.3-0.6,11.2,16.6,2,19.1c-3.3,0.6-2.8-0.8-2.8-0.8l0.6-2.6c0,0-2.7-2.4,0-7.4
				C27.9,136.2,29.3,133.6,29.3,130.9z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M31.7,151.6H18c-0.6,0-1.1-0.5-1.1-1.1s0.5-1.1,1.1-1.1h13.7c7.3,0,13.3-5.9,13.3-13.3
				c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1c-0.3-0.3-0.7-0.4-1-0.4
				c-3.6,0.6-5.5,7-5.3,17.1c0,0.6-0.5,1.1-1.1,1.2c-0.6,0-1.1-0.5-1.2-1.1c-0.3-11.7,2.3-18.6,7.2-19.4c1.1-0.2,2.2,0.2,3,1
				c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9C47.2,144.7,40.3,151.6,31.7,151.6z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M26.1,137.3h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
				C30.4,135.4,28.5,137.3,26.1,137.3z M17.6,130.2c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
				v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M26.1,144.5h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
				C30.4,142.5,28.5,144.5,26.1,144.5z M17.6,137.3c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
				v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M26.1,151.6h-8.5c-2.4,0-4.3-1.9-4.3-4.3v-0.8c0-2.4,1.9-4.3,4.3-4.3h8.5c2.4,0,4.3,1.9,4.3,4.3v0.8
				C30.4,149.7,28.5,151.6,26.1,151.6z M17.6,144.5c-1.1,0-2.1,0.9-2.1,2.1v0.8c0,1.1,0.9,2.1,2.1,2.1h8.5c1.1,0,2.1-0.9,2.1-2.1
				v-0.8c0-1.1-0.9-2.1-2.1-2.1H17.6z" />
                            </g>
                        </g>
                    </g>
                    <g id="card">
                        <g>
                            <path fill="#E02E92" d="M178.4,203.4H56.8c-4.8,0-8.6-3.9-8.6-8.6V8.6c0-4.8,3.9-8.6,8.6-8.6h121.5c4.8,0,8.6,3.9,8.6,8.6v186.2
			C187,199.6,183.1,203.4,178.4,203.4z" />
                        </g>
                        <g>
                            <rect x="144" fill="#363284" width="27.9" height="203.4" />
                        </g>
                    </g>
                    <g id="front_hand">
                        <g>
                            <g>
                                <path fill="#FFFFFF" d="M132.2,131.7c-2.6-4.5-3.7-9-1.9-17.2c0.4-1.6-1-3.1-2.6-2.8c-6.9,1.1-6.2,14.1-6.2,14.1H93.6
				c-2,0-3.6,1.6-3.6,3.6v0.1c0,2,1.6,3.6,3.6,3.6H104l0.4,21.4h16.2c7.9,0,14.4-6.4,14.4-14.4C135,137,134,134.1,132.2,131.7z" />
                            </g>
                            <g>
                                <path fill="#DAEDF7" d="M125,125.7c0,0-0.6-2.5,0.8-6.9c0.6-1.9-2-2.9-3.3-0.6c0,0-0.9,1.5-0.9,7.3
				C124.5,125.7,125,125.7,125,125.7z" />
                            </g>
                            <g>
                                <path fill="#665AA7" d="M120.6,155.6h-13.7c-2.6,0-4.7-2.1-4.7-4.7c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5
				c0-1.4,0.6-2.7,1.6-3.6c-1-0.9-1.6-2.1-1.6-3.5c0-0.9,0.3-1.8,0.7-2.5h-9.3c-2.6,0-4.8-2.1-4.8-4.8c0-2.7,2.1-4.8,4.8-4.8h26.7
				c0-4.1,0.8-13,7.2-14.1c1.1-0.2,2.2,0.2,3,1c0.8,0.8,1.1,2,0.9,3.2c-1.8,8.1-0.7,12.3,1.7,16.4c1.9,2.7,2.9,5.8,2.9,9
				C136.1,148.7,129.1,155.6,120.6,155.6z M108,147.3c0,0.6-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.5,2.4,2.5h13.7
				c7.3,0,13.3-5.9,13.3-13.3c0-2.8-0.9-5.5-2.5-7.7c0,0,0-0.1-0.1-0.1c-2.6-4.4-4-9.2-2-18.1c0.1-0.4,0-0.8-0.3-1.1
				c-0.3-0.3-0.7-0.4-1-0.4c-4.9,0.8-5.3,9.6-5.3,11.9h1.6c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1H93.6c-1.4,0-2.5,1.1-2.5,2.5
				c0,1.4,1.1,2.6,2.5,2.6h13.2c0.6,0,1.1,0.5,1.1,1.1s-0.5,1.1-1.1,1.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.2,0.8,2.2,2,2.4
				c0.5,0.1,0.9,0.6,0.9,1.1l0,0.1c0,0.5-0.4,1-0.9,1.1c-1.1,0.2-2,1.2-2,2.4c0,1.4,1.1,2.5,2.4,2.5
				C107.5,146.2,108,146.7,108,147.3z" />
                            </g>
                            <g>
                                <path fill="#FFFFFF" d="M88.3,136" />
                            </g>
                        </g>
                    </g>
                    <g id="coins">
                        <g>
                            <g>
                                <g>
                                    <g>
                                        <path fill="#ED912F" d="M206.4,216c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
						v-4.8h81.4V216z" />
                                    </g>
                                    <g>
                                        <ellipse fill="#F9C441" cx="165.8" cy="211.2" rx="40.7" ry="3.9" />
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path fill="#ED912F" d="M206.4,207.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
						V203h81.4V207.8z" />
                                    </g>
                                    <g>
                                        <ellipse fill="#F9C441" cx="165.8" cy="203" rx="40.7" ry="3.9" />
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path fill="#ED912F" d="M213.7,200.5c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
						v-4.8h81.4V200.5z" />
                                    </g>
                                    <g>
                                        <ellipse fill="#F9C441" cx="173" cy="195.7" rx="40.7" ry="3.9" />
                                    </g>
                                </g>
                                <g>
                                    <g>
                                        <path fill="#ED912F" d="M196.4,192.8c0,1.5-1,2.7-2.5,3c-5.6,1.1-20.3,3.2-38.2,3.2s-32.6-2-38.2-3.2c-1.4-0.3-2.5-1.6-2.5-3
						V188h81.4V192.8z" />
                                    </g>
                                    <g>
                                        <ellipse fill="#F9C441" cx="155.7" cy="188" rx="40.7" ry="3.9" />
                                    </g>
                                </g>
                                <g>
                                    <defs>
                                        <path id="SVGID_1_" d="M195.9,192.5V188c0-2.1-18.3-3.9-40.8-3.9s-40.8,1.7-40.8,3.9v4.8c0,1.5,1.3,2.7,2.8,3
						c2.9,0.6,7.9,1.4,15.1,2v2.7c0,0.1,0.1,0.2,0.1,0.3c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1
						v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2c17.9,0,32.3-2,38-3.2c1.4-0.3,2.2-1.6,2.2-3v-4.8c0-0.3-0.4-0.7-1.3-1
						c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c2.6-0.3,3.5-0.6,4.7-0.8c1.4-0.3,2.4-1.6,2.4-3v-4.8C212.7,194.4,205.6,193.2,195.9,192.5z" />
                                    </defs>
                                    <clipPath id="SVGID_2_">
                                        <use xlink:href="#SVGID_1_" overflow="visible" />
                                    </clipPath>
                                </g>
                            </g>
                        </g>
                        <g>
                            <defs>
                                <path id="SVGID_3_" d="M196.4,192.5V188c0-2.1-18.2-3.9-40.7-3.9c-0.1,0-0.2,0-0.3,0c-0.1,0-0.2,0-0.3,0c-5.6,0-11,0.1-15.8,0.3
				c3.5-3.5,6.1-6.3,7.6-8.1c0.9-1.1,1-2.8,0.1-3.9l-3-3.8c-1.3-1.7-16.7,8.3-34.3,22.3c-17.6,14-30.8,26.7-29.5,28.3l3,3.8
				c0.9,1.2,2.5,1.5,3.8,0.8c5.1-2.6,17.9-10.2,31.9-21.3c2.3-1.9,4.6-3.7,6.7-5.5c2,0.2,4.2,0.5,6.6,0.7v2.7c0,0.1,0.1,0.2,0.1,0.3
				c-4.6,0.6-7.2,1.4-7.2,2.2v4.8c0,1,0.5,1.9,1.3,2.5c-0.8,0.3-1.3,0.6-1.3,1v4.8c0,1.5,0.9,2.7,2.3,3c5.6,1.1,20.3,3.2,38.1,3.2
				c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c17.9,0,32.6-2,38.2-3.2c1.4-0.3,2.5-1.6,2.5-3v-4.8c0-0.3-0.4-0.7-1.3-1
				c0.8-0.6,1.3-1.5,1.3-2.5v-3.5c1.9-0.3,3.6-0.6,4.7-0.8c1.4-0.3,2.5-1.6,2.5-3v-4.8C213.7,194.4,206.8,193.2,196.4,192.5z" />
                            </defs>
                            <clipPath id="SVGID_4_">
                                <use xlink:href="#SVGID_3_" overflow="visible" />
                            </clipPath>
                            <polygon opacity="0.24" clip-path="url(#SVGID_4_)" fill="#ED1C24" points="146.8,176.4 150.7,184.1 173.6,191.5 173.4,198.3 
			179.8,199.6 179.8,206.6 179.7,221.8 137.1,236.3 97.8,224.2 		" />
                        </g>
                        <g>
                            <g>
                                <path fill="#ED912F" d="M146.9,172.5c0.9,1.2,0.9,2.8-0.1,3.9c-3.7,4.4-14,15.1-28,26.2c-14,11.1-26.8,18.7-31.9,21.3
				c-1.3,0.7-2.9,0.3-3.8-0.8l-3-3.8l63.7-50.6L146.9,172.5z" />
                            </g>
                            <g>

点击CHECKOUT结账时信用卡卡通图案产生拟人化的挤眉弄眼动效。

CSS3, SVG

编辑器支持Emmet

快捷键

点击CHECKOUT结账时信用卡卡通图案产生拟人化的挤眉弄眼动效。

CSS3, SVG

使用纯CSS3实现相片在时光流转中褪色的动画特效

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字