知识点 :
CSS:CSS变量
的应用,基本的css
属性
CSS3 :边框border
、圆角border-radius
、盒子阴影box-shadow
、径向渐变radial-gradient
、transform
中的 rotate
,translateX
,动画@keyframes
实现多边形 实现了皮卡丘 鼻子的闪动和眼睛的闪烁等效果效果,
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>皮卡丘</title>
</head>
<body>
<audio autoplay src="http://music.163.com/song/media/outer/url?id=1332699115.mp3"></audio>
<h4>皮卡 皮卡(*╹▽╹*)</h4>
<div class="pika-outside">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="pika-body">
<div class="eye-left">
<div class="eye-inside-left"></div>
</div>
<div class="eye-right">
<div class="eye-inside-right"></div>
</div>
<div class="nose"></div>
<div class="lips"></div>
<div class="mouth"></div>
<div class="cheek-left"></div>
<div class="cheek-right"></div>
</div>
</div>
</body>
<style>
/* CSS变量的应用 */
:root{
--bg-color:#ffcccc;
--pika-body-color:#ffd01c;
--shadow-color:#d8851c;
--pika-side-color:#1b1919;
}
body{
background-color: var(--bg-color);
}
.pika-outside{
margin:250px auto;
position: relative;
width: 390px;
}
h4{
text-align: center;
font-family: "方正舒体";
margin-top: 100px;
font-size: 22px;
}
.pika-body{
width: 370px;
height: 320px;
background-color: var(--pika-body-color);
border-radius: 45%;
box-shadow: inset -5px -8px var(--shadow-color);
margin: auto;
border:4px solid rgb(34, 33, 33);
z-index: 2;
position: relative;
overflow: hidden;
}
.ear-right,.ear-left{
width:410px;
height: 70px;
border:4px solid #000;
position: absolute;
top:-50px;
background:radial-gradient(circle at 200% 45%, #ffd01c 0%, #ffd01c 90%, black 10%);
border-radius: 50%;
}
@keyframes waving{
0% {
transform: rotate(40deg);
}
5% {
transform: rotate(50deg);
}
10% {
transform: rotate(40deg);
}
12% {
transform: rotate(45deg);
}
15% {
transform: rotate(40deg);
}
100% {
transform: rotate(40deg);
}
}
.ear-left{
left:-180px;
transform: rotate(40deg);
animation: 3s infinite waving;
}
.ear-right{
right:-160px;
transform: rotate(110deg);
}
.cheek-left,.cheek-right{
width: 86px;
height: 86px;
background: red;
border:4px solid #000;
border-radius: 50%;
position: absolute;
bottom: 30px;
}
.cheek-left{
left:-20px;
}
.cheek-right{
right: -20px;
}
.eye-left,.eye-right{
position: absolute;
width: 70px;
height: 70px;
background: var(--pika-side-color);
top:38%;
border-radius: 50%;
}
.eye-left{
left:20%;
}
.eye-right{
right: 20%;
}
.eye-inside-left,.eye-inside-right{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top:13%;
background: #fff;
animation: 0.1s infinite twinkling;
}
.eye-inside-left{
right: 10px;
}
.eye-inside-right{
left:10px;
}
/* 让皮卡丘的眼睛有闪动的效果 */
@keyframes twinkling{
from{
transform: translateX(0%);
}
to{
transform: translateX(2%);
}
}
.nose{
width:0;
height: 0;
border:10px solid transparent;
border-top-color: var(--pika-side-color);
border-left-width: 15px;
border-right-width: 15px;
border-radius: 10px;
position: relative;
top:60%;
left:45%;
}
/* lips和mouth, 嘴唇部分完全参考原出处,利用伪元素和盒子阴影 实现皮卡丘鼻子的圆弧效果 */
.lips {
position: relative;
margin: auto;
width: 1px;
height: 1px;
top: 60%;
z-index: 2;
}
.lips::after, .lips::before {
position: absolute;
content: "";
top: -20px;
width: 50px;
height: 40px;
border-radius: 50%;
box-shadow: inset 0px -4px 0 var(--pika-side-color);
background-color: #ffd01c;
}
.lips::before {
right: 0px;
}
.lips::after {
left: 0px;
}
.mouth {
position: relative;
height: 60px;
width: 60px;
margin: auto;
top: 60%;
border: 4px solid #1b1919;
border-radius: 0 0 50% 50%;
z-index: 1;
background: radial-gradient(circle at center 80%, #e93c4e 0%, #e93c4e 50%, #9e2d38 50%, #9e2d38 60%, #1b1919 60%, #1b1919 65%, #5c0009 65%);/*径向渐变*/
}
</style>
</html>
效果预览:
效果如图,稍作修改可以用作表白哦: ( 有背景音乐,耳朵和眼睛都有动画,这里是静图,看不出来效果 )
(可以新建一个记事本文件.txt
,将上面的代码复制粘贴上去,保存后将文件的后缀名改为.html
即可直接访问)