Tutorial on making QQ Penguin with html and css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Tutorial on making QQ Penguin with html and css

小云云

Nov 18, 2017 pm 02:39 PM

css html qq

We know that CSS provides a style description for the HTML markup language, which defines how the elements are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it. Everyone will definitely use HTML and CSS when learning front-end programming, so in this article we will teach you two different ways to make QQ Penguin.

html code for making QQ Penguin:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绘制腾讯QQ</title><link type="text/css" rel="stylesheet" href="qq.css" ></head><body>
       <img src="meigui.png" id="flower" width="10%"></img>
   <div id="qq">
           <div class="head">
           <div class="leftEye"></div>
           <div class="leftEyes"></div>
           <div class="eyeCenter"></div>
           <div class="rightEye"></div>
           <div class="rightEyes"></div>
           <div class="rightEyess"></div>
           <div class="mouthTop">
                   <div class="mouthCenter"></div>
                   <div class="mouthBottom"></div>
          </div>
           <div class="mandible"></div>
      </div>
      <div class="weibo"></div>
      <div class="weiboleft"></div>
      <div class="weiRightGang"></div>
      <div class="weiLeftGang"></div>
       
      <div class="dudu"></div>
      <div class="waidudu"></div>
       
    <div class="leftarm">
                      <div id="top"></div>
      </div>
    <div id="leftArmBottom"></div>
   </div>
   <div class="rightArm"></div>
    
    
   <div class="leftFoot"></div>
   <div class="rightFoot"></div>
    
   <div class="tailLeft"></div>
   <div class="tailRight"></div></body></html>

Copy after login

css code for making QQ Penguin:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

*{margin:0;padding:0;}#qq{
        position:relative;
        margin-left:40%;
        margin-top:5%;        }.head{
        position:absolute;
        width:270px;
        height:250px;
        overflow:hidden;
        background-color:#000;
        border:1px #000 solid;
        border-top-left-radius:50% 50%;
        border-top-right-radius:50% 50%;
        border-bottom-left-radius:50% 50%;
        border-bottom-right-radius:50% 50%;
        border-bottom-color:#FFF;
        display:block;}.mandible{
        position:absolute;
        width:362px;
        height:300px;
        top:-110px;
        left:-46px;
        background-color:#000;
        border:1px #000 solid;
        border-radius:50% 50%;
        z-index:6;
        border-top-color:#FFF;
        border-left-color:#FFF;
        border-right-color:#FFF;}.leftEye{
        position:absolute;
        width:40px;
        height:70px;
        background-color:#FFF;
        left:80px;
        top:50px;
        border:1px #666 solid;
        border-radius:50% 50%;
        z-index:10;}.leftEyes{
        position:absolute;
        width:20px;
        height:25px;
        left:93px;
        top:70px;
        border:1px #666 solid;
        border-radius:50% 50%;
        z-index:11;
        background-color:#000;}.rightEye{
        position:absolute;
        width:40px;
        height:70px;
        left:140px;
        top:50px;
        border:1px #666 solid;
        border-radius:50% 50%;
        z-index:10;
        background-color:#FFF;}.rightEyes{
        position:absolute;
        width:20px;
        height:25px;
        left:148px;
        top:70px;
        border:1px #666 solid;
        border-radius:50% 50%;
        z-index:11;
        background-color:#000;}.rightEyess{
        position:absolute;
        width:18px;
        height:25px;
        left:150px;
        top:77px;
        border:1px #FFF solid;
        border-radius:50% 50%;
        z-index:11;
        background-color:#FFF;}.eyeCenter{
        position:absolute;
        width:6px;
        height:6px;
        left:102px;
        top:77px;
        border:1px #FFF solid;
        border-radius:50% 50%;
        background-color:#FFF;
        z-index:12;}.mouthTop{
        position:absolute;
        width:200px;
        height:150px;
        left:38px;
        top:127px;
        overflow:hidden;
        border:1px #FFA600 solid;
        border-radius:50% 45%;
        z-index:10;
        border-left-color:
        transparent;
        border-right-color:transparent;}.mouthBottom{
        position:absolute;
        width:185px;
        height:100px;
        left:5PX;
        top:-59px;
        border:1px #FFA600 solid;
        border-radius:50% 50%;
        z-index:11;
        border-left-color:#FFF;
        border-right-color:#FFF;
        border-top-color:#FFF;
        background-color:#FFA600;}.mouthCenter{
        position:absolute;
        width:100px;
        heigt:28px;
        z-index:15;
        left:55PX;
        top:26px;
        border:1px #FFA600 solid;
        border-bottom-left-radius:50% 35%;
        border-bottom-right-radius:50% 35%;
        background-color:#FFA600;}.leftZui{
        position:absolute;
        left:118px;
        top:150px;
        z-index:20;
        height:5px;
        width:5px;
        border-radius:50% 50%;
        background-color:#FFF;}.rightZui{
        position:absolute;
        left:200px;
        top:150px;
        z-index:20;
        height:5px;
        width:5px;
        border-radius:50% 50%;
        background-color:#FFF;}.weibo{
        position:absolute;
        width:290px;
        height:150px;
        left:-10px;
        top:80px;
        border:5px #000 solid;
        border-radius:50% 50%;
        background-color:#FF0008;
        z-index:4;}.weiboleft{
        position:absolute;
        width:60px;
        height:80px;
        left:50px;
        top:200px;
        border:3px #000 solid;
        background-color:#FF0008;
        z-index:3;
        border-bottom-left-radius:40%;
        border-bottom-right-radius:20%;
        border-top-left-radius:50%;}.weiLeftGang{position:absolute;}.weiRightGang{
        position:absolute;
        left:89px;
        top:124px;
        border-right: 7px solid black;
    width: 180px;
    height: 65px;
    border-bottom-right-radius: 70px 70px;
        transform:rotate(3deg);
        z-index:20;}.weiLeftGang{
        position:absolute;
        left:2px;
        top:140px;
        border-left: 5px solid black;
    width: 70px;
    height: 45px;
    border-bottom-left-radius: 70px 70px;
        transform:rotate(-1deg);
        z-index:20;}.dudu{
        position:absolute;
        left:17px;
        top:90px;
        width:250px;
        height:300px;
        border:1px #000 solid;
        border-radius:50% 50%;
        background-color:#FFF;
        z-index:2;}.waidudu{
        position:absolute;
        width:300px;
        height:360px;
        background-color:#000;
        border:1px #000 solid;
        left:-10px;
        top:35px;
        border-radius:50% 50%;
        z-index:1;}.leftarm{
        position:absolute;
        width:40px;
        height:160px;
        left:-53px;
        top:153px;
        overflow:hidden;
        transform:rotate(30deg);
        z-index:1;}#top{
        position:absolute;
        width:30px;
        height:130px;
        border:1px #000 solid;
        border-top-left-radius:40% 50%;
        border-bottom-left-radius:90% 40%;
        background-color:#000;}#leftArmBottom{
        position:absolute;
        width:40px;
        height:120px;
        left:-43px;
        top:164px;
        border:1px #000 solid;
        border-bottom-right-radius:100% 90%;
        border-top-left-radius:90% 90%;
        transform:rotate(6deg);
        background-color:#000;
        z-index:0;}.rightArm{
        position:absolute;
        width:30px;
        height:40px;
        left:783px;
        top:213px;
        background-color:#000;
        border:1px #000 solid;
        border-radius:50% 50%;
        transform:rotate(-20deg);}.leftFoot{
        position:absolute;
        width:110px;
        height:70px;
        left:533px;
        top:414px;
        border:5px #000 solid;
        background:#FFA600;
        border-radius:50% 50%;}.rightFoot{
        position:absolute;
        width:110px;
        height:70px;
        left:663px;
        top:414px;
        border:5px #000 solid;
        background:#FFA600;
        border-radius:50% 50%;}.tailLeft{
        position:absolute;
        left:537px;
        top:440px;
        border-right: 5px solid black;
    width: 30px;
    height: 25px;
    border-bottom-right-radius: 70px 70px;
        transform:rotate(210deg)}.tailRight{
        position:absolute;
        left:744px;
        top:442px;
        border-left: 5px solid black;
    width: 30px;
    height: 25px;
    border-bottom-left-radius: 70px 70px;
        transform:rotate(150deg)}#flower{
        position:absolute;
        left:480px;
        z-index:-1;
        transform:rotate(-20deg)}

Copy after login

Tips: Due to no compatibility processing: these codes are suitable for Firefox to view the effect.

The above are QQ Penguin implemented in two different coding methods. You can try it.

Related recommendations:

html moving puppy source code

##Use css to achieve simple animation effects

Use HTML+CSS to achieve animation effects

The above is the detailed content of Tutorial on making QQ Penguin with html and css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

4 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1656

CakePHP Tutorial

1415

Laravel Tutorial

1309

PHP Tutorial

1257

C# Tutorial

1229

Related knowledge

How to use bootstrap in vue Apr 07, 2025 pm 11:33 PM

Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML: Building the Structure of Web Pages Apr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

See all articles