HTML5와 CSS3를 사용하여 생일 케이크 만들기-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML5와 CSS3를 사용하여 생일 케이크 만들기

不言

Jun 20, 2018 am 09:50 AM

css3html5

이 글은 주로 HTML5와 CSS3를 사용하여 생일 케이크를 만드는 방법을 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

"생일 축하합니다.. "생일에는 생일 노래도 포함되어 있고 생일 케이크도 빼놓을 수 없습니다. 이 글에서는 주로 프로그래머들이 순수한 HTML5+CSS3을 사용하여 만든 생일 케이크를 자세히 소개합니다. 참고할만한 가치가 있습니다. 관심 있는 친구들은 참고할 수 있습니다

프론트엔드 개발자로서 , 오늘의 좋은 날을 축하하기 위해 간단한 케이크를 그려보자. 프로그래머의 생일의 즐거움과 슬픔. 글은 비교적 간단하니 관심 있으신 분들은 한번 보세요.

렌더링 먼저 보내드려요

케이크는 하단 케이크, 상단 케이크, 캔들 부분 세 부분으로 나누어져 있어요. HTML의 레이아웃 구조도 이 세 부분에 따라 구성됩니다. 다른 하나는 CSS 위치 지정과 CSS3 회전, 내부 및 외부 그림자 및 기타 효과를 사용하여 일부 DOM 요소의 스타일을 조정하는 것입니다. 비교적 간단합니다. 모든 코더가 이를 이해한다고 믿습니다.

다른 내용에 대해서는 자세히 설명하지 않겠습니다.

전체 HTML 코드와 CSS 코드는 아래에 나와 있습니다.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .birthday .container{
            width:600px;
            height:600px;
            margin:0px auto;
            background: #fafafa;
            border-radius:5px;
            position: relative;
        }

        /**
       ** 顶层的
       **/

        .birthday .top-one{
            position: absolute;
            width:280px;
            height: 280px;
            bottom: 200px;
            left:160px;
        }

        .birthday .top-one .bottom{
            position: absolute;
            width:280px;
            height: 280px;
            bottom:-30px;
            border:1px solid #3e2001;
            border-radius: 140px;
            transform: rotateX(60deg);
            z-index: 4;
            background: #3e2001;
            box-shadow: 0px 0px 20px #3e2001;
        }
        .birthday .top-one .top{
            position: absolute;
            width:280px;
            height: 280px;
            top:-50px;
            border-radius: 140px;
            background: #FFFFFF;
            transform: rotateX(60deg);
            box-shadow: 2px 2px 20px #b7b7b7;
            z-index: 6;
            background: -webkit-repeating-radial-gradient(circle, #783d01, #3e2001 10px, #914909 10px,white 20px);
            background: -moz-repeating-radial-gradient(circle, #783d01, #3e2001 10px,#914909 10px,white 20px);
        }
        .birthday .top-one .side{
            position: absolute;
            top:95px;
            width:280px;
            height: 70px;
            border:1px solid #3e2001;
            border-top-width: 0px;
            border-bottom-width: 0px;
            background: #FFFFFF;
            z-index: 5;
            background: #3e2001;
        }


        /**
        ** 底层的
        **/
        .birthday .bottom-one{
            position: absolute;
            width:400px;
            height: 400px;
            bottom: 0px;
            left:100px;
        }
        .birthday .bottom-one .bottom{
            position: absolute;
            width:400px;
            height: 400px;
            bottom:-30px;
            border:1px solid #914909;
            border-radius: 200px;
            transform: rotateX(60deg);
            box-shadow: 2px 2px 20px #914909;
            z-index: 1;
            background: #3e2001;
            overflow: hidden;
        }
        .birthday .bottom-one .line{
            position: absolute;
            width:400px;
            height: 400px;
            border-radius: 200px;
            z-index: 1;
        }
        .birthday .bottom-one .line1{
            bottom: 30px;
            border:5px solid #783d01;
            left:-5px;
            z-index: 1;
        }

        .birthday .bottom-one .top{
            position: absolute;
            width:400px;
            height: 400px;
            top:-100px;
            border:1px solid #3e2001;
            border-radius: 200px;
            background: #FFFFFF;
            transform: rotateX(60deg);
            z-index: 3;
            background: #783d01;
            box-shadow: inset 0px 0px 20px #3e2001;

        }

        .birthday .bottom-one .side{
            position: absolute;
            top:100px;
            width:400px;
            height: 130px;
            border:1px solid #3e2001;
            border-top-width: 0px;
            border-bottom-width: 0px;
            background: #3e2001;
            z-index: 2;

        }


        /**
        ** 底层的文字
        **/
        .birthday .flower{
            position: relative;
            text-align: justify;
            z-index: 9;
            top:200px;
            font-size: 32px;
            font-family: "Helvetica Neue", "Noto Sans CJK SC", "Source Han Sans CN";
            color:#FFFFFF;
            font-weight: bold;
        }
        .birthday .flower:after{
            content:"";
            display:inline-block;
            position: relative;
            width:100%;
        }

        .birthday .flower i{
            position: relative;
            width:80px;
            line-height: 80px;
            display: inline-block;
            border-radius: 50%;
            border:2px solid #783d01;
            text-align: center;

        }

        /**
        ** 顶层的文字
        **/
        .birthday .top-one .text{
            width:100%;
            text-align: center;
            position: absolute;
            top:165px;
            z-index: 9;
            margin:0px auto;
            font-size: 30px;
            color:#FFFFFF;
            transform: rotateX(60deg) skew(10deg,20deg);
        }


        /**
         ** 蜡烛
        **/

        .birthday .candle{
            width:10px;
            height:80px;
            margin:0px auto;
            position: absolute;
            left:295px;
            top:130px;
            z-index: 9;
        }
        .birthday .candle .body{
            width:10px;
            height:70px;
            margin:0px auto;
            background: red;
            border-bottom-width: 0px;
        }

        .birthday .candle .top{
            width:10px;
            height: 10px;
            border-radius: 5px;
            transform: rotateX(60deg);
            position: relative;
            top:5px;
            background: red;
        }
        .birthday .candle .bottom{
            width:10px;
            height: 10px;
            border-radius: 5px;
            transform: rotateX(60deg);
            position: relative;
            bottom:5px;
            background: red;
            box-shadow: 1px 1px 10px red;
        }

        .birthday .candle .fire{
            position: absolute;
            width:6px;
            height: 6px;
            left:2px;
            transform: rotate(45deg);
            background: #ffd507;
            box-shadow: 0px 0px 20px #ffff00, 2px 2px 10px red;

        }


    </style>

</head>
<body>
    <p class="birthday">
        <p class="container">

            <p class="candle">
                <p class="fire"></p>
                <p class="top"></p>
                <p class="body"></p>
                <p class="bottom"></p>
            </p>

            <p class="top-one">
                <p class="top"></p>
                <p class="side"></p>
                <p class="bottom"></p>
                <p class="text">
                    Happy Birthday
                </p>
            </p>

            <p class="bottom-one">
                <p class="top"></p>
                <p class="side"></p>
                <p class="bottom">
                    <p class="line line1"></p>
                </p>
                <p class="flower">
                    <i style="top:-20px;transform: rotateY(50deg)">生</i>
                    <i style="top:15px;transform: rotateY(30deg)">日</i>
                    <i style="top:15px;transform: rotateY(30deg)">快</i>
                    <i style="top:-20px;transform: rotateY(50deg)">乐</i>
                </p>
            </p>
        </p>
    </p>
</body>
</html>

좋습니다. 나중에는 Canvas 캔버스나 SVG를 사용하여 시도해 볼 수 있습니다. 읽어주셔서 감사합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는