Example of using CSS3 to create Pikachu animated wallpaper
|
text OK, next it’s time to show the renderings. Only after seeing the pictures will you be interested in understanding them, otherwise it will be boring and you won’t be interested in looking at them.
PS: Since the size of my animation is relatively large (720 x 1280), I reduced it by half in order to record this gif animation. But in fact, it would be better to view it at the original size. For this, you can download it from the address I provide at the end of the article. Let’s get back to the topic. In fact, this animation effect is not difficult. You can see that the structure is very simple and clear. Although it is simple, the effect is still very good, which is why I am willing to do it. Ok, since it's so simple, let's take a look at the HTML structure I implemented it:
<div class="pikachu_container">
<div class="header">
<div class="header_main">
<span class="battery"></span>
<span class="clock" id="nowTime">09:00</span>
</div>
</div>
<div class="time">
<h1>09:00</h1>
<p id="date">September 3, 2015</p>
<p>Pikachu cute mobile wallpaper</p>
</div>
<div class="body">
<div class="eyes">
<div class="leftEye"></div>
<div class="rightEye"></div>
</div>
<div class="nose"></div>
<div class="cheek">
<div class="leftCheek"></div>
<div class="rightCheek"></div>
</div>
<div class="mouth">
<div class="mouth_main">
<div class="tongue"></div>
</div>
</div>
<div class="hands">
<div class="leftHand">
<div class="leftHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="leftshadow"></div>
</div>
</div>
<div class="rightHand">
<div class="rightHand_main">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="rightshadow"></div>
</div>
</div>
</div>
<div class="box">
<div class="box_main">
<div class="box_circle"></div>
</div>
</div>
</div>
<p class="author">@JR</p>
</div>The main structure is relatively clear. It is divided into the battery and time on the top, the time and date in the middle, and Pikachu's body. Pikachu's body is divided into eyes, nose, mouth, cheeks, hands and ball. After building the HTML structure, you can write the CSS style according to the sizes of each part of the picture you measured. Then I will share with you the CSS implementation code of each part: First initialize
*{
margin:0;
padding:0;
}
body{
font-family:"Microsoft YaHei";
color:#fff;
}
.pikachu_container{
width:720px;
height:1280px;
background:rgb(251,205,60);
position:relative;
overflow:hidden;
margin:0 auto;
}Top battery and time
.pikachu_container .header{
width:100%;
height:50px;
line-height:50px;
position:relative;
top:0;
left:0;
}
.pikachu_container .header .header_main{
width:160px;
height:100%;
position:absolute;
right:0;
top:0;
font-size:30px;
overflow:hidden;
}
.header .header_main .battery{
display:inline-block;
width:34px;
height:18px;
border:3px solid #fff;
border-radius:5px;
position:absolute;
top:50%;
left:23px;
margin-top:-12px;
}
.header .header_main .battery:after{
content:'';
display:inline-block;
width:5px;
height:14px;
background:#fff;
position: absolute;
top:2px;
right:2px;
-webkit-animation:charging 2s linear infinite;
-moz-animation:charging 2s linear infinite;
-o-animation: charging 2s linear infinite;
-ms-animation:charging 2s linear infinite;
animation: charging 2s lineat infinite;
}
@-webkit-keyframes charging
0%{
width:5px;
}
100%{
width:30px;
}
}
@-moz-keyframes charging
0%{
width:5px;
}
100%{
width:30px;
}
}
@-o-keyframes charging{
0%{
width:5px;
}
100%{
width:30px;
}
}
@-ms-keyframes charging{
0%{
width:5px;
}
100%{
width:30px;
}
}
@keyframes charging{
0%{
width:5px;
}
100%{
width:30px;
}
}
.header .header_main .battery:before{
content:'';
display:block;
width:3px;
height:12px;
background:#fff;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
position: absolute;
top:3px;
left:-6px;
}
.header .header_main .clock{
position: absolute;
right:14px;
top:0;
}Central date and time
.pikachu_container .time{
width:100%;
height:250px;
position: relative;
top:70px;
left:0;
text-align:center;
}
.pikachu_container .time h1{
font-size:90px;
letter-spacing:8px;
text-shadow:-1px 2px 3px rgba(0,0,0,0.5);
}
.pikachu_container .time p:nth-of-type(1){
font-size:30px;
margin-top:10px;
}
.pikachu_container .time p:nth-of-type(2){
font-size:26px;
margin-top:8px;
-webkit-animation:textShake 1s infinite;
-moz-animation:textShake 1s infinite;
-o-animation:textShake 1s infinite;
-ms-animation:textShake 1s infinite;
animation:textShake 1s infinite;
}
@-webkit-keyframes textShake{
0%,20%,40%,60%,80%,100%{
-webkit-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
-webkit-transform:rotate(0deg) translate3d(0px,0px,0);
}
10%,30%,50%,70%,90%{
-webkit-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-moz-keyframes textShake{
0%,20%,40%,60%,80%,100%{
-moz-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
-moz-transform:rotate(0deg) translate3d(0px,0px,0);
}
10%,30%,50%,70%,90%{
-moz-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-o-keyframes textShake{
0%,20%,40%,60%,80%,100%{
-o-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
-o-transform:rotate(0deg) translate3d(0px,0px,0);
}
10%,30%,50%,70%,90%{
-o-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@-ms-keyframes textShake{
0%,20%,40%,60%,80%,100%{
-ms-transform:rotate(1deg) translate3d(2px,-2px,0);
}
5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
-ms-transform:rotate(0deg) translate3d(0px,0px,0);
}
10%,30%,50%,70%,90%{
-ms-transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}
@keyframes textShake{
0%,20%,40%,60%,80%,100%{
transform:rotate(1deg) translate3d(2px,-2px,0);
}
5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{
transform:rotate(0deg) translate3d(0px,0px,0);
}
10%,30%,50%,70%,90%{
transform:rotate(-1deg) translate3d(-2px,2px,0);
}
}Pikachu's eyes
.pikachu_container .body{
width:100%;
height:940px;
position: relative;
top:50px;
left:0;
}
.body .eyes{
position: relative;
}
.body .eyes .leftEye, .body .eyes .rightEye{
width:85px;
height:85px;
border:5px solid rgb(2,0,1);
background:rgb(51,51,51);
border-radius:50%;
position: absolute;
top:40px;
}
.body .eyes .leftEye{
left:150px;
}
.body .eyes .rightEye{
right:150px;
}
.body .eyes .leftEye:after,.body .eyes .rightEye:after{
content:'';
display:block;
width:40px;
height:40px;
background:#fff;
border:5px solid rgb(2,0,1);
border-radius:50%;
position:absolute;
top:2px;
left:2px;
-webkit-animation:eyeMove 3s infinite;
-moz-animation:eyeMove 3s infinite;
-o-animation:eyeMove 3s infinite;
-ms-animation:eyeMove 3s infinite;
animation:eyeMove 3s infinite;
}
@-webkit-keyframes eyeMove{
0%,100%{
top:2px;
left:2px;
}
30%,60%,70%{
top:0px;
left:17px;
}
40%
top:0px;
left:21px;
}
50%{
top:0px;
left:13px;
}
80%,90%{
top:17px;
left:17px;
}
}
@-moz-keyframes eyeMove{
0%,100%{
top:2px;
left:2px;
}
30%,60%,70%{
top:0px;
left:17px;
}
40%
top:0px;
left:21px;
}
50%{
top:0px;
left:13px;
}
80%,90%{
top:17px;
left:17px;
}
}
@-o-keyframes eyeMove{
0%,100%{
top:2px;
left:2px;
}
30%,60%,70%{
top:0px;
left:17px;
}
40%
top:0px;
left:21px;
}
50%{
top:0px;
left:13px;
}
80%,90%{
top:17px;
left:17px;
}
}
@-ms-keyframes eyeMove{
0%,100%{
top:2px;
left:2px;
}
30%,60%,70%{
top:0px;
left:17px;
}
40%
top:0px;
left:21px;
}
50%{
top:0px;
left:13px;
}
80%,90%{
top:17px;
left:17px;
}
}
@keyframes eyeMove{
0%,100%{
top:2px;
left:2px;
}
30%,60%,70%{
top:0px;
left:17px;
}
40%
top:0px;
left:21px;
}
50%{
top:0px;
left:13px;
}
80%,90%{
top:17px;
left:17px;
}
}Pikachu's nose
.body .nose{
position:absolute;
width:28px;
height:18px;
background:rgb(51,51,51);
border:4px solid rgb(2,0,1);
border-radius:36px/26px;
left:50%;
top:100px;
margin-left:-18px;
-webkit-animation:noseMove 3s infinite;
-moz-animation:noseMove 3s infinite;
-o-animation:noseMove 3s infinite;
-ms-animation:noseMove 3s infinite;
animation:noseMove 3s infinite;
}
@-webkit-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
margin-left:-18px;
}
50%{
width:34px;
height:20px;
margin-left:-21px;
}
}
@-moz-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
margin-left:-18px;
}
50%{
width:34px;
height:20px;
margin-left:-21px;
}
}
@-o-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
margin-left:-18px;
}
50%{
width:34px;
height:20px;
margin-left:-21px;
}
}
@-ms-keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
margin-left:-18px;
}
50%{
width:34px;
height:20px;
margin-left:-21px;
}
}
@keyframes noseMove{
0%,49%,51%,100%{
width:28px;
height:18px;
margin-left:-18px;
}
50%{
width:34px;
height:20px;
margin-left:-21px;
}
}Pikachu's cheek
.body .cheek{
position: relative;
}
.body .cheek .leftCheek, .body .cheek .rightCheek{
width:120px;
height:120px;
border:5px solid rgb(2,0,1);
background:rgb(231,74,57);
border-radius:50%;
position: absolute;
top:170px;
-webkit-animation:cheekMove 3s infinite;
-moz-animation:cheekMove 3s infinite;
-o-animation:cheekMove 3s infinite;
-ms-animation:cheekMove 3s infinite;
animation:cheekMove 3s infinite;
}
@-webkit-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
top:170px;
}
50%{
width:100px;
height:100px;
top:180px;
}
}
@-moz-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
top:170px;
}
50%{
width:100px;
height:100px;
top:180px;
}
}
@-o-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
top:170px;
}
50%{
width:100px;
height:100px;
top:180px;
}
}
@-ms-keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
top:170px;
}
50%{
width:100px;
height:100px;
top:180px;
}
}
@keyframes cheekMove{
0%,46%,54%,100%{
width:120px;
height:120px;
top:170px;
}
50%{
width:100px;
height:100px;
top:180px;
}
}
.body .cheek .leftCheek{
left:60px;
}
.body .cheek .rightCheek{
right:60px;
}Pikachu's mouth
.body .mouth{
position: relative;
width:180px;
height:220px;
left:50%;
top:180px;
margin-left:-90px;
}
.body .mouth .mouth_main{
position: absolute;
left:0;
top:0px;
width:180px;
height:220px;
background:rgb(132,37,41);
border:4px solid rgb(2,0,1);
border-top-right-radius:15px 15px;
border-bottom-left-radius: 250px 570px;
border-bottom-right-radius: 250px 590px;
overflow:hidden;
-webkit-animation:mouthMove 3s infinite;
-moz-animation:mouthMove 3s infinite;
-o-animation:mouthMove 3s infinite;
-ms-animation:mouthMove 3s infinite;
animation:mouthMove 3s infinite;
}
@-webkit-keyframes mouthMove{
0%,46%,54%,100%{
height:220px;
}
50%{
height:20px;
}
}
@-moz-keyframes mouthMove{
0%,46%,54%,100%{
height:220px;
}
50%{
height:20px;
}
}
@-o-keyframes mouthMove{
0%,46%,54%,100%{
height:220px;
}
50%{
height:20px;
}
}
@-ms-keyframes mouthMove{
0%,46%,54%,100%{
height:220px;
}
50%{
height:20px;
}
}
@keyframes mouthMove{
0%,46%,54%,100%{
height:220px;
}
50%{
height:20px;
}
}
.body .mouth:after,.body .mouth:before{
content:'';
display:block;
width:112px;
height:38px;
background:rgb(251,205,60);
border-bottom:4px solid rgb(2,0,1);
position: absolute;
top:-13px;
z-index:3;
}
.body .mouth:after{
border-left:4px solid rgb(2,0,1);
border-bottom-left-radius: 340px 180px;
left:-30px;
-webkit-transform:rotate(-24deg);
-moz-transform:rotate(-24deg);
-o-transform:rotate(-24deg);
-ms-transform:rotate(-24deg);
transform:rotate(-24deg);
}
.body .mouth:before{
border-right:4px solid rgb(2,0,1);
border-bottom-right-radius: 340px 180px;
right:-30px;
-webkit-transform:rotate(24deg);
-moz-transform:rotate(24deg);
-o-transform:rotate(24deg);
-ms-transform:rotate(24deg);
transform:rotate(24deg);
}
.body .mouth .tongue{
width:200px;
height:200px;
background:rgb(221,102,106);
margin-top:40px;
margin-left:-10px;
border-top-left-radius: 380px;
border-top-right-radius: 420px 380px;
overflow:hidden;
}Pikachu's mouth is still worth pondering, and the most important thing is to use border-radius to achieve this effect. This rounded corner feature is quite powerful, it all depends on how you use it. Pikachu's ball
.body .box{
width:82px;
height:82px;
border:3px solid #fff;
border-radius:50%;
position: relative;
box-shadow:0 0 5px rgba(255,255,255,0.9);
left:50%;
top:320px;
margin-left:-44px;
-webkit-animation:box-rotate 4s ease-in-out infinite alternate;
-moz-animation:box-rotate 4s ease-in-out infinite alternate;
-o-animation:box-rotate 4s ease-in-out infinite alternate;
-ms-animation:box-rotate 4s ease-in-out infinite alternate;
animation:box-rotate 4s ease-in-out infinite alternate;
}
@-webkit-keyframes box-rotate{
0%,90%,100%{
-webkit-transform:rotate(0deg);
}
40%,50%{
-webkit-transform:rotate(360deg);
box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
}
}
@-moz-keyframes box-rotate{
0%,90%,100%{
-moz-transform:rotate(0deg);
}
40%,50%{
-moz-transform:rotate(360deg);
box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
}
}
@-o-keyframes box-rotate{
0%,90%,100%{
-o-transform:rotate(0deg);
}
40%,50%{
-o-transform:rotate(360deg);
box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
}
}
@-ms-keyframes box-rotate{
0%,90%,100%{
-ms-transform:rotate(0deg);
}
40%,50%{
-ms-transform:rotate(360deg);
box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
}
}
@keyframes box-rotate{
0%,90%,100%{
transform:rotate(0deg);
}
40%,50%{
transform:rotate(360deg);
box-shadow:0 0 20px 5px rgba(255,255,255,0.9);
}
}
.body .box .box_main{
width:80px;
height:80px;
border-radius:50%;
background:rgb(236,2,3);
border:1px solid #333;
position: absolute;
top:0;
left:0;
overflow:hidden;
}
.body .box .box_main:before{
content:'';
display:block;
width:80px;
height:40px;
background:#fff;
position:absolute;
bottom:0;
left:0;
}
.body .box .box_main:after{
content:'';
display:block;
width:80px;
height:12px;
background:rgb(59,53,67);
position:absolute;
top:50%;
left:0;
margin-top:-6px;
}
.body .box .box_main .box_circle{
width:24px;
height:24px;
border:8px solid rgb(59,53,67);
border-radius:50%;
background:#fff;
position: absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-20px;
z-index:5;
}
.body .box .box_main .box_circle:after{
content:'';
display:block;
width:16px;
height:16px;
border:1px solid rgb(59,53,67);
border-radius:50%;
position:absolute;
top:50%;
left:50%;
margin-left:-9px;
margin-top:-9px;
-webkit-animation:bg_change 4s infinite;
-moz-animation:bg_change 4s infinite;
-o-animation:bg_change 4s infinite;
-ms-animation:bg_change 4s infinite;
animation:bg_change 4s infinite;
}
@-webkit-keyframes bg_change{
0%,40%,60%,90%,100%{
background:none;
}
50%{
background:rgb(236,2,3);
}
}
@-moz-keyframes bg_change{
0%,40%,60%,90%,100%{
background:none;
}
50%{
background:rgb(236,2,3);
}
}
@-o-keyframes bg_change{
0%,40%,60%,90%,100%{
background:none;
}
50%{
background:rgb(236,2,3);
}
}
@-ms-keyframes bg_change{
0%,40%,60%,90%,100%{
background:none;
}
50%{
background:rgb(236,2,3);
}
}
@keyframes bg_change{
0%,40%,60%,90%,100%{
background:none;
}
50%{
background:rgb(236,2,3);
}
}PS: As for the hands, there are a lot of codes in advance and the article is already a bit long, so I won’t upload it. If you need it, you can download it from my github. This case github download address: https://github.com/JR93/pikachu Original link: https://www.cnblogs.com/jr1993/p/4779678.html The above is the details of the example of using CSS3 to make Pikachu animated wallpaper. For more information about using CSS3 to make Pikachu wallpaper, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Implementation of inserting millions of records into MySQL database within 10 seconds
>>: How to get form data in Vue
Recommend
The url value of the src or css background image is the base64 encoded code
You may have noticed that the src or CSS backgroun...
Design sharing of the download page of the Pengyou.com mobile client (picture and text)
Let's first look at some simple data: Accordin...
CocosCreator classic entry project flappybird
Table of contents Development Environment Game en...
Detailed analysis of MySQL instance crash cases
[Problem description] Our production environment ...
How to create a scroll bar with fixed navigation and left and right sliding using CSS
As shown above, the navigation is fixed at the to...
Solution to invalid Nginx cross-domain setting Access-Control-Allow-Origin
nginx version 1.11.3 Using the following configur...
How to implement scheduled backup and incremental backup of uploaded files in Linux
introduce If you are using an OSS storage service...
Example of how to enable Brotli compression algorithm for Nginx
Brotli is a new data format that can provide a co...
Summary of JS tips for creating or filling arrays of arbitrary length
Table of contents Preface Direct filling method f...
Detailed explanation of the implementation principle of transaction isolation level in MySQL
Preface When it comes to database transactions, a...
A brief analysis of event bubbling and event capture in js
Table of contents 01-Event Bubbling 1.1- Introduc...
How to use fdisk to partition disk in Linux
Commonly used commands for Linux partitions: fdis...
CentOS 6 uses Docker to deploy redis master-slave database operation example
This article describes how to use docker to deplo...
How to fix the width of table in ie8 and chrome
When the above settings are used in IE8 and Chrome...
Detailed explanation of basic operation commands for Linux network settings
Table of contents View network configuration View...