网站Cookie记录提醒用户界面设计

Cookie Consent Toggle

h5, cookie

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var cookieTL;
var topPiecesTL;
var bottomPiecesTL;
var cookieIcon = document.getElementById('cookie-icon');
var cookieModule = document.getElementById('cookies-module');
var toggle = document.getElementById('cookie-toggle');
var toggleTrack = document.getElementById('track');
var toggleStatus = document.getElementById('cookie-status');
var toggleState = true;
var cookiesModuleVisible = true;

bottomPiecesTL = new TimelineMax({
        paused: false
    });
    bottomPiecesTL.timeScale(1);
    bottomPiecesTL
        .to('#bottom-pieces polygon:nth-of-type(1)', 1, {
            transformOrigin: "50% 50%",
            rotation: "2deg",
            y: 3,
            x: 2
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(2)', 1, {
            transformOrigin: "50% 50%",
            rotation: "4deg",
            y: 4,
            x: 4
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(3)', 1, {
            transformOrigin: "50% 50%",
            rotation: "2deg",
            y: 4,
            x: 5
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(4)', 1, {
            transformOrigin: "50% 50%",
            y: 5,
            x: 3
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(5)', 1, {
            transformOrigin: "50% 50%",
            y: 4,
            x: 2
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(6)', 1, {
            transformOrigin: "50% 50%",
            rotation: "4deg",
            y: 5,
            x: 1
        }, "0")
        .to('#bottom-pieces polygon:nth-of-type(7)', 1, {
            transformOrigin: "50% 50%",
            y: -1,
            x: -1
        }, "0");

cookieTL = new TimelineMax({
        paused: true,
        delay: 0,
        repeat: 0,
        repeatDelay: 1,
        yoyo: false
    });
    cookieTL
        .to('#plate', 1, {
            x: -50,
            ease: Quad.easeInOut
        }, "0")
        .to('#cookie-svg', 1, {
            transformOrigin: "50% 50%",
            rotation: "360deg",
            ease: Quad.easeInOut
        }, "0")
        .to('#bottom-wedge', 1, {
            y: 4,
            rotation: "4deg",
            transformOrigin: "50% 50%",
            ease: Quad.easeInOut
        }, "0")
        .to('#top-wedge', 1, {
            y: -5,
            rotation: "-5deg",
            transformOrigin: "50% 50%",
            ease: Quad.easeInOut
        }, "0")
        .to('#right-wedge', 1, {
            x: 5,
            y: 1,
            rotation: "2deg",
            transformOrigin: "50% 50%",
            ease: Quad.easeInOut
        }, "0")
        .to('#middle-crumb', 1, {
            transformOrigin: "50% 50%",
            rotation: "2deg",
            x: 3,
            y: 4,
            ease: Quad.easeInOut
        }, "0")
        .add(topPiecesTL, "0")
        .add(bottomPiecesTL, "0")
        .to('#bottom-wedge', 1, {
            scaleX: .7,
            scaleY: .7,
            opacity: 1,
            ease: Quad.easeInOut
        }, "0")
        .to('#top-wedge', 1, {
            scaleX: .7,
            scaleY: .7,
            opacity: 1,
            ease: Quad.easeInOut
        }, "0")
        .to('#right-wedge', 1, {
            scaleX: .7,
            scaleY: .7,
            opacity: 1,
            ease: Quad.easeInOut
        }, "0");
    //cookieTL.play();
    cookieTL.timeScale(1.5);

toggle.addEventListener('click', onToggle);
    cookieIcon.addEventListener('click', onCookieIconClick);
}

function onCookieIconClick(e) {
    e.preventDefault();
    if (cookiesModuleVisible) { // visible currently, so hide
        TweenMax.to(cookieModule, 1, {
            height: 0,
            ease: Quad.easeInOut
        });

cookiesModuleVisible = false;

} else { // hidden currently, so show
        TweenMax.set(cookieModule, {
            height: "auto"
        });
        TweenMax.from(cookieModule, 1, {
            height: 0,
            ease: Quad.easeInOut
        });

cookiesModuleVisible = true;
    }
    cookieIcon.classList.toggle('active');
}

function onToggle() {
    if (toggleState) { // on currently, turn off
        cookieTL.play();

cookieModule.classList.toggle('off');
        //toggle.classList.toggle('off');
        //toggleStatus.classList.toggle('off');

toggleStatus.innerHTML = "OFF";

toggleState = false;
    } else { // off currently, turn on
        cookieTL.reverse();

cookieModule.classList.toggle('off');
        //toggle.classList.toggle('off');
        //toggleStatus.classList.toggle('off');

toggleStatus.innerHTML = "ON";

toggleState = true;
    }
}

initCookieAnimation();

编译

CSS

/* import webfonts */

@import url("https://rsms.me/inter/inter.css");
/* vars */
/* mixins */

html {
    color: #231f20;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}
body {
    background-color: #f1f1f2;
    position: relative;
    height: 100%;
    margin: 0;
}
header {
    padding: 0rem 2rem;
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    background-color: white;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}
header #profile-icon {
    margin: 0;
    padding: 1rem 0;
}
header #profile-icon img {
    width: 3rem;
    height: 3rem;
    display: block;
    box-sizing: border-box;
    border-radius: 50%;
    border: solid 1px #FFF;
}
header #cookie-icon {
    margin: 0;
    padding: 1.75rem 1rem .75rem;
    box-sizing: border-box;
    height: auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-color: white;
    position: relative;
    outline: none;
    border: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: background-color .5s ease;
}
header #cookie-icon:hover {
    /*background-color: #f0f0f0;*/
}
header #cookie-icon img {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}
header #cookie-icon:after {
    margin: 0 0 0 .5rem;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0 5px;
    border-color: #231f20 transparent transparent transparent;
    transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease, -webkit-transform .25s ease;
}
header #cookie-icon.active {
    background-color: #f9efa7;
}
header #cookie-icon.active:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
@media (max-width: 600px) {
    header {
        padding: 0 1rem;
    }
}
#cookies-module {
    margin: 0;
    padding: 0 2rem;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #f9efa7;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}
#cookies-module h3 {
    margin: 0 0 .5rem;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #754c28;
}
#cookies-module h4 {
    margin: 0 0 .25rem;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #231f20;
}
#cookies-module h4 #cookie-status {
    color: #0e8a4d;
    transition: color .25s ease;
}
#cookies-module p {
    margin: 0 0 1rem;
    padding: 0;
    font-family: "Inter", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    color: #231f20;
    line-height: 150%;
}
#cookies-module p:last-of-type {
    margin-bottom: 0;
}
#cookies-module p a {
    color: #754c28;
}
#cookies-module section:first-of-type {
    margin: 1.75rem 2rem 1.75rem 0;
}
#cookies-module section:last-of-type {
    margin: .75rem 0;
    padding: 1rem;
    box-sizing: border-box;
    width: 40%;
    background-color: #f9f4d4;
    border-radius: 8px;
    /*box-shadow: 0 2px 0 rgba(0,0,0,0.15);*/
    
    border: dashed 1px #dbc877;
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}
#cookies-module section:last-of-type .content {
    margin: 0 2rem 0 0;
    width: 100%;
}
#cookies-module section:last-of-type .content p {
    margin: 0;
}
#cookies-module section:last-of-type .content .on-content {
    display: block;
}
#cookies-module section:last-of-type .content .off-content {
    display: none;
}
#cookies-module section:last-of-type #cookie-toggle {
    width: 150px;
    height: 100px;
    position: relative;
    flex: 0 0 auto;
    /*position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);*/
}
#cookies-module section:last-of-type #cookie-toggle #plate {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    right: 0%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    z-index: 0;
    background-image: radial-gradient(50% 50%, #E6E6E6 50%, #FFFFFF 100%);
    background-image: none;
    background: #FFF;
    border-radius: 50%;
    box-shadow: -3px 5px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow .5s ease;
}
#cookies-module section:last-of-type #cookie-toggle #plate span {
    width: 67%;
    height: 67%;
    background-color: #F2F2F2;
    border-radius: 50%;
    background-image: radial-gradient(50% 50%, #FFFFFF 50%, #F2F2F2 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#cookies-module section:last-of-type #cookie-toggle #plate:before,
#cookies-module section:last-of-type #cookie-toggle #plate:after {
    content: "";
    border: solid .5px #76acd6;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: border-color .5s linear;
}
#cookies-module section:last-of-type #cookie-toggle #plate:before {
    content: "";
    width: 89%;
    height: 89%;
}
#cookies-module section:last-of-type #cookie-toggle #plate:after {
    content: "";
    width: 94%;
    height: 94%;
}
#cookies-module section:last-of-type #cookie-toggle #plate #cookie-svg {
    width: 67%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}
#cookies-module section:last-of-type #cookie-toggle #plate #cookie-svg div {
    padding-bottom: 100%;
    width: 100%;
    height: 0;
    position: relative;
}
#cookies-module section:last-of-type #cookie-toggle #plate #cookie-svg div svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
}
#cookies-module section:last-of-type #cookie-toggle #plate #cookie-svg div svg * {
    /*fill: #C3996B;*/
}
#cookies-module section:last-of-type #cookie-toggle #track {
    width: 100%;
    height: 50px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    /*background-image: linear-gradient(0deg, #1AEF85 0%, #1DC675 100%);*/
    
    background-image: linear-gradient(0deg, #14E27C 0%, #11B867 100%);
}
#cookies-module section:last-of-type #cookie-toggle #track:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, #E2E2E2 0%, #B8B8B8 100%);
    opacity: 0;
    transition: opacity .5s ease-out;
}
#cookies-module section:last-of-type #cookie-toggle #track p {
    margin: 0;
    padding: 0;
    font-size: .75rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    line-height: 100%;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: calc(100% - 100px);
    transition: opacity .5s ease-out;
    pointer-events: none;
}
#cookies-module section:last-of-type #cookie-toggle #track p.on {
    left: 0px;
    opacity: 1;
}
#cookies-module section:last-of-type #cookie-toggle #track p.off {
    right: 0px;
    opacity: 0;
    color: #231f20;
}
#cookies-module.off h4 #cookie-status {
    color: #93362c;
}
#cookies-module.off section:last-of-type .content .on-content {
    display: none;
}
#cookies-module.off section:last-of-type .content .off-content {
    display: block;
}
#cookies-module.off section:last-of-type #cookie-toggle #plate {
    box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.1);
    /*transform: translate(-50px,-50%);*/
}
#cookies-module.off section:last-of-type #cookie-toggle #plate:before,
#cookies-module.off section:last-of-type #cookie-toggle #plate:after {
    border-color: #93362c;
}
#cookies-module.off section:last-of-type #cookie-toggle #track:before {
    opacity: 1;
}
#cookies-module.off section:last-of-type #cookie-toggle #track p.on {
    opacity: 0;
}
#cookies-module.off section:last-of-type #cookie-toggle #track p.off {
    opacity: 1;
}
@media (max-width: 900px) {
    #cookies-module section:last-of-type {
        width: 50%;
    }
}
@media (max-width: 700px) {
    #cookies-module section:last-of-type {
        flex-flow: row wrap;
        justify-content: center;
    }
    #cookies-module section:last-of-type .content div {
        margin: 0 0 1rem;
    }
}
@media (max-width: 600px) {
    #cookies-module {
        padding: 0 1rem;
        flex-flow: row wrap;
    }
    #cookies-module section:first-of-type {
        margin: 1.75rem 0rem .5rem 0;
        width: 100%;
        flex: 0 0 auto;
    }
    #cookies-module section:last-of-type {
        flex-flow: row nowrap;
        justify-content: flex-start;
        width: 100%;
        flex: 0 0 auto;
    }
    #cookies-module section:last-of-type .content {
        margin: 0;
    }
}

HTML

<div id="cookies-module">
    <section>
        <h3>This Website Uses Cookies</h3>
        <p>Cookies are small data files we use to improve your experience, such as saving your preferences or showing you personalized ads. Turn this off at any time by using this switch, or visit our <a href="#">Cookie Policy</a> page for more info.</p>
    </section>
    <section>
        <div class="content">
            <h4>Cookies: <span id="cookie-status">ON</span></h4>
            <div>
                <p class="on-content">You consent to us setting cookies in accordance with our <a href="#">Cookie Policy</a>.</p>
                <p class="off-content">We are not tracking or saving any data while you use this site.</p>
            </div>
        </div>
        <div id="cookie-toggle">
            <div id="track">
                <p class="on">ON</p>
                <p class="off">OFF</p>
            </div>
            <div id="plate">
                <span></span>
                <div id="cookie-svg">
                    <div>
                        <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
                            <g id="middle-crumb">
                                <polygon fill="#C3996B" points="27.7,45.6 34.6,44.4 34.3,40.8 32.2,38.3 25.6,39.7 " />
                                <polygon fill="#754C28" points="27.3,43.9 30.1,44.4 31.1,40.1 28.2,39 25.6,41.4 " />
                            </g>
                            <g id="bottom-pieces">
                                <polygon fill="#C3996B" points="73.1,63 73.6,61.2 80.3,61.5 82.5,63.8 82.5,65.5 79,66.1 75.3,65.3 " />
                                <polygon fill="#C3996B" points="85.3,67.7 85.8,65.4 85,64 82.1,64.2 82.1,66.8 83.5,67.7 " />
                                <polygon fill="#C3996B" points="85.4,66.1 85.3,67.3 87,67.7 86.5,66.5 85.7,65.9 " />
                                <polygon fill="#C3996B" points="81.6,65.9 81.6,65.4 82.3,65.3 82.2,66.4 81.8,66.4 " />
                                <polygon fill="#C3996B" points="81.2,65.9 81.2,65.6 81.6,65.5 81.8,65.9 81.8,66.4 81.1,66.2 " />
                                <polygon fill="#C3996B" points="80.4,65.6 80.3,66 80.7,66.2 81.3,66.1 81.3,65.6 80.8,65.5 " />
                                <polygon fill="#C3996B" points="73.6,63.9 74,63.8 74.5,64.1 74.4,64.5 73.6,64.2 " />
                            </g>

Cookie Consent Toggle

h5, cookie

编辑器支持Emmet

快捷键

Cookie Consent Toggle

h5, cookie

黑色风格HTML5移动网站完整界面设计和代码模板

使用aos.js、css弹性框和网格布局实现的一款毛纺织品在线营销页面（响应式设计）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：