使用css3实现多啦A梦代码-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

使用css3实现多啦A梦代码

高洛峰

Mar 28, 2017 am 10:15 AM

css3

这篇文章主要为大家介绍使用css3实现多啦A梦代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body><p class="doraemon">
    <p class="head">
        <p class="eyes">
            <p class="eye left"><p class="black bleft"></p></p>
            <p class="eye right"><p class="black bright"></p></p>
        </p>
        <p class="face">
            <p class="white"></p>
            <p class="nose"><p class="light"></p></p>
            <p class="nose_line"></p>
            <p class="mouth"></p>
            <p class="mouth"></p>
            <p class="whiskers">
                <p class="whisker rTop r160"></p>
                <p class="whisker rt"></p>
                <p class="whisker rBottom r20"></p>
                <p class="whisker lTop r20"></p>
                <p class="whisker lt"></p>
                <p class="whisker lBottom r160"></p>
            </p>
        </p>
    </p>
    <p class="choker">
            <p class="bell">
                <p class="bell_line"></p>
                <p class="bell_circle"></p>
                <p class="bell_under"></p>
                <p class="bell_light"></p>
            </p>
        </p>
        <p class="bodys">
            <p class="body"></p>
            <p class="wraps"></p>
            <p class="pocket"></p>
            <p class="pocket_mask"></p>
        </p>
        <p class="hand_right">
            <p class="arm"></p>
            <p class="circle"></p>
            <p class="arm_rewrite"></p>
        </p>
        <p class="hand_left">
            <p class="arm"></p>
            <p class="circle"></p>
            <p class="arm_rewrite"></p>
        </p>
        <p class="foot">
            <p class="left"></p>
            <p class="right"></p>
            <p class="foot_rewrite"></p>
        </p>
    </p></p></body></html>

Salin selepas log masuk

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

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

<style>
    .doraemon{
        position: relative;
        width:500px;
        margin:0 auto;
    }
    .doraemon .head{
        width:320px;
        height: 300px;
        border-radius: 150px;
        background: #07bbee;
        background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
        background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
        background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
        border:#555 2px solid;
        box-shadow: -5px 10px 15px rgba(0,0,0,0.45);
        position: relative;
    }    /*眼睛*/
    .doraemon .eyes{
        position:relative;
    }
    .doraemon .eyes .eye{
        width:72px;
        height: 82px;
        position:absolute;
        top:40px;
        background: #fff;
        border: 2px solid #000;
        border-radius: 35px 35px;
        z-index: 10;
    }
    .doraemon .eyes .eye .black{
        width:14px;
        height: 14px;
        background: #000;
        border-radius:14px;
        position: relative;
        top:40px;
    }
    .doraemon .eyes .left{
        left:82px;
    }
    .doraemon .eyes .right{
        left:156px;
    }
    .doraemon .eyes .eye .bleft{
        left: 50px;
    }
    .doraemon .eyes .eye .bright{
        left:7px;
    }
    .doraemon .face{
        position: relative;
        z-index: 2;
    }    /*自然底色*/
    .doraemon .face .white{
        border:2px #000 solid;
        width:265px;
        height: 195px;
        border-radius: 150px 150px;
        position:absolute;
        top:75px;
        left:25px;
        background: #fff;
        background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
        background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
        background: -ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
    }    /*鼻子*/
    .doraemon .face .nose{
        width:30px;
        height: 30px;
        background: #c93300;
        border:2px solid #000;
        border-radius: 30px;
        position:absolute;
        top:110px;
        left:140px;
        z-index: 3;
    }    /*鼻子上面的光*/
    .doraemon .face .nose .light{
        border-radius: 5px ;
        box-shadow: 19px 8px 5px #fff;
        height: 10px ;
        width:10px;
    }    /*鼻子下面的线*/
    .doraemon .face .nose_line {
        width:3px;
        height: 100px;
        background: #333;
        position:absolute;
        top:143px;
        left:155px;
        z-index: 3;
    }    /*嘴巴*/
    .doraemon .face .mouth{
        width:220px;
        height: 400px;
        border-bottom: 3px solid #333;
        border-radius: 120px;
        position:absolute;
        top:-160px;
        left: 45px;
    }    /*胡须*/
    .doraemon .whiskers{
        background: #fff;
        width:220px;
        height: 80px;
        position:relative;
        top:120px;
        left:45px;
        border-radius: 15px;
        z-index: 2;
    }
    .doraemon .whiskers .whisker{
        background: #333;
        height: 2px;
        width:60px;
        position: absolute;
        z-index: 2;
    }
    .doraemon .whiskers .rTop{
        left:165px;
        top: 25px;
    }
    .doraemon .whiskers .rt{
        left: 167px;
        top:45px;
    }
    .doraemon .whiskers .rBottom{
        left: 165px;
        top: 65px;
    }
    .doraemon .whiskers .lTop{
        left:0;
        top:25px;
    }
    .doraemon .whiskers .lt{
        top:45px;
        left:-2px;
    }
    .doraemon .whiskers .lBottom{
        top:65px;
        left:0;
    }
    .doraemon .whiskers .r160 {
        transform: rotate(160deg);
        -webkit-transform: rotate(160deg);
    }
    .doraemon .whiskers .r20{
        transform: rotate(20deg);
        -webkit-transform: rotate(20deg);
    }    /*围脖*/.doraemon .choker{
    position: relative;z-index:4;
    top: -40px;left: 45px;
    background:#C40;    /*线性渐变 让围巾看上去更自然*/
    background: -webkit-gradient(linear,left top,left bottom,from(#C40),to(#800400));
    background: -moz-linear-gradient(center top,#C40,#800400);
    background: -ms-linear-gradient(center top,#C40,#800400);
    border: 2px solid #000000;
    border-radius: 10px 10px 10px 10px;
    height: 20px;width: 230px;
}/*铃铛*/.doraemon .choker .bell{
    width:40px;height:40px; _overflow:hidden;/*IE6 hack*/
    border-radius:50px;
    border:2px solid #000;
    background:#f9f12a;
    background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));    
    background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
    background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
    box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
    position:relative;
    top:5px;left:90px;
}/*双横线*/.doraemon .choker .bell_line{
    background:#F9F12A;
    border-radius: 3px 3px 0px 0px;
    border: 2px solid #333333;
    height: 2px;width: 36px;
    position: relative;top: 10px;
}/*黑点*/.doraemon .choker .bell_circle {
    background:#000;
    border-radius: 5px;
    height: 10px;
    width: 12px;
    position: relative;
    top: 14px; left: 14px;
}/*黑点下的线*/.doraemon .choker .bell_under {
    background:#000;
    height: 15px;width: 3px;
    left: 18px;top: 10px;
    position: relative;    
}/*高光*/.doraemon .choker .bell_light {
    border-radius: 10px;
    box-shadow: 19px 8px 5px #FFF;
    height:12px;width:12px;
    left: 5px;top: -35px;
    position: relative;
    opacity: 0.7;
}.doraemon .bodys{position: relative;top:-310px;}/*肚子*/.doraemon .bodys .body{
    background:#07BEEA;
    background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
    background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
    background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
    border: 2px solid #333;
    height: 165px;width: 220px;
    position: absolute;
    left: 50px;top:265px;
}/*白色肚兜*/.doraemon .bodys .wraps{
    background:#FFF;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
    background: -moz-linear-gradient(right top,#FFF,#FFF 75%,#EEE 83%,#999 90%,#444 95%,#000);
    background: -ms-linear-gradient(right top,#FFF,#FFF 75%,#EEE 83%,#999 90%,#444 95%,#000);
    border: 2px solid #000;
    border-radius: 85px;
    position: absolute;
    height:170px;width:170px;
    left:72px;top:230px;
}/*口袋*/.doraemon .bodys .pocket{
    position:relative;
    width:130px;height:130px;
    border-radius:65px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
    background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
    background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
    border:2px solid #000;
    top:250px;left:92px;
}/*挡住口袋一半*/.doraemon .bodys .pocket_mask{
    position:relative;
    width:134px;height:60px;
    background:#fff;
    border-bottom:2px solid #000;
    top:125px;left:92px;
}/*右手*/.doraemon .hand_right{
    height: 100px;width: 100px;
    position: absolute;
    top: 272px;left: 248px;
}/*左手*/.doraemon .hand_left{
    height: 100px;width: 100px;
    position: absolute;
    top: 272px;left:-10px;
}/*手臂公共部分*/.doraemon .arm {
    background:#07BEEA;
    background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
    background: -moz-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);
    background: -ms-linear-gradient(center top , #07BEEA, #07BEEA 85%, #555);
    border: 1px solid #000000;
    box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
    height: 50px;width: 80px;
    z-index:-1;position: relative;
}/*右手手臂*/.doraemon .hand_right .arm {
    top: 17px;
    transform: rotate(35deg);-webkit-transform:rotate(35deg);
}/*左手手臂*/.doraemon .hand_left .arm {
    top: 17px;background:#0096BE;box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
    transform: rotate(145deg);-webkit-transform:rotate(145deg);
}/*圆形手掌公共部分*/.doraemon .circle{
    position:absolute;
    width:60px;height:60px;
    border-radius:30px;
    border:2px solid #000;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));    
    background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
}/*右手手掌*/.doraemon .hand_right .circle{
    left:40px;top:32px;
}/*左手手掌*/.doraemon .hand_left .circle{
    left:-20px;top:32px;
}/*手臂和身体结合处*/.doraemon .arm_rewrite{
    background:#07BEEA;
    height: 45px;width:5px;
    position: relative;
}/*右手结合处*/.doraemon .hand_right .arm_rewrite{
    top: -45px;left:22px;
}/*左手结合处*/.doraemon .hand_left .arm_rewrite{
    top: -45px;left:60px;background:#0096be}/*脚*/.doraemon .foot {
    height: 40px;
    left: 20px;
    position: relative;
    top: -141px;
    width: 280px;
}/*左脚*/.doraemon .foot .left {
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));    
    background: -moz-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);    
    background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);
    border: 2px solid #333;
    border-radius: 80px 60px 60px 40px;
    box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
    height: 30px;
    left: 8px;
    position: relative;
    top:65px;
    width: 125px;
}/*右脚*/.doraemon .foot .right {
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));    
    background: -moz-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);    
    background: -ms-linear-gradient(right top , #fff, #fff 75%, #EEE 85%, #999);
    border: 2px solid #333;
    border-radius: 80px 60px 60px 40px;
    box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
    height: 30px;width: 125px;
    top:31px;left:141px;
    position: relative;
}.doraemon .foot .foot_rewrite{
    position:relative;top:-11px;left:130px;_left:127px;
    width:20px;height:10px;
    background:#fff;
    background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
    background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); 
    background: -ms-linear-gradient(right top, #666, #fff 83%, #fff); 
    border-top:2px solid #000;
    border-right:2px solid #000;
    border-left:2px solid #000;
    border-top-right-radius:40px;
    border-top-left-radius:40px;
}/*让眼睛动起来*/@-webkit-keyframes eyemove{
    80%{margin:0;}
    85%{margin:-20px 0 0 0;}
    90%{margin:0 0 0 0;}
    93%{margin:0 0 0 7px;}
    96%{margin:0 0 0 0;}}
@-moz-keyframes eyemove{
    80%{margin:0;}
    85%{margin:-20px 0 0 0;}
    90%{margin:0 0 0 0;}
    93%{margin:0 0 0 7px;}
    96%{margin:0 0 0 0;}}
@-ms-keyframes eyemove{
    80%{margin:0;}
    85%{margin:-20px 0 0 0;}
    90%{margin:0 0 0 0;}
    93%{margin:0 0 0 7px;}
    96%{margin:0 0 0 0;}}
</style>

Salin selepas log masuk

Atas ialah kandungan terperinci 使用css3实现多啦A梦代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7542

Tutorial CakePHP

1381

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod) Jun 28, 2022 pm 01:39 PM

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod) Jul 19, 2022 am 11:28 AM

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang Jun 01, 2022 pm 07:15 PM

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Bagaimana untuk melaksanakan sempadan renda dalam css3 Sep 16, 2022 pm 07:11 PM

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen! Jun 10, 2022 pm 01:00 PM

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3 Apr 25, 2022 pm 04:52 PM

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Bagaimana untuk menetapkan kelajuan putaran animasi dalam css3 Apr 28, 2022 pm 04:32 PM

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Adakah kesan animasi css3 mempunyai ubah bentuk? Apr 28, 2022 pm 02:20 PM

Kesan animasi dalam css3 mempunyai ubah bentuk; anda boleh menggunakan "animasi: atribut animasi @keyframes ..{..{transform: transformation attribute}}" untuk mencapai kesan animasi ubah bentuk Atribut animasi digunakan untuk menetapkan gaya animasi, dan atribut transform digunakan untuk menetapkan gaya ubah bentuk.

See all articles