哈士奇..

最新推荐文章于 2024-07-31 16:33:32 发布

m0_67606035

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量54

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_67606035/article/details/123964648

版权

!DOCTYPE html>
<html>
<head>
<title>哈士奇</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100px ;
height: 400px;
margin: 100px auto;
background-color: #ccc;
position: relative;
}
.husky-ear1,
.husky-ear2,
.husky-face,
.husky-buttock div,
.unmove-tail,
.tail1,
.tail2,
.tail3,
.tail4,
.tail5,
.tail6,
.tail7,
.tail8{
background-color: #3E3B4B;
}
.husky-head{
box-shadow: 19px 10px 13px rgba(0,0,0,0.3);
width: 165px ;
height: 160px;
}
.husky-ear1,
.husky-ear2{
width: 45px;
height: 50px;
position: absolute;
}
.husky-ear1{
border-top-left-radius: 85% 100%;
border-top-right-radius: 15% 100%;
transform: rotate(-65deg);
animation: ear1 2s 100;
}
.husky-ear2{
left: 155px;
border-top-right-radius: 85% 100%;
border-top-left-radius: 15% 100%;
transform: rotate(65deg);
animation: ear2 2s 100;
}
@keyframes ear1{
0%{
transform: rotate(-65deg) translate(0);
}
50%{
transform: rotate(-83deg) translate(-10px,5px);
}
100%{
transform: rotate(-65deg) translate(0);
}
}
@keyframes ear2{
0%{
transform: rotate(65deg) translate(0);
}
50%{
transform: rotate(83deg) translate(10px,5px);
}
100%{
transform: rotate(65deg) translate(0);
}
}
.cochlear1,
.cochlear2{
width: 25px;
height: 20px;
position: absolute;
top: 20px;
background-color: #C5736A;
}
.cochlear1{
right: 10px;
border-top-right-radius: 85% 100%;
border-top-left-radius: 15% 100%;
transform: rotate(-88deg);
}
.cochlear2{
left: 10px;
border-top-left-radius: 85% 100%;
border-top-right-radius: 15% 100%;
transform: rotate(88deg);
}
.husky-face{
position: absolute;
top: 0px;
left: 25px;
width: 150px;
height: 167px;
border-top-right-radius: 75% 67%;
border-top-left-radius: 75% 67%;
}

.eye1,
.eye2{
position: absolute;
top: 30px;
width: 43px;
height: 42px;
background-color: #fff;
border-top-left-radius: 80% 80%;
border-top-right-radius: 80% 80%;
z-index: 10;
}
.eye1{
left: 35px;
transform: rotate(-10deg);
}
.eye2{
right: 35px;
transform: rotate(10deg);
}
.eye1 .husky-eye1,
.eye2 .husky-eye2{
position: absolute;
top: 21px;
width: 9px;
height: 9px;
border-radius: 50%;
backgr

m0_67606035

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
哈士奇..

!DOCTYPE html><html><head><title>哈士奇</title><style type="text/css">*{margin: 0;padding: 0;}body{width: 100px ;height: 400px;margin: 100px auto;background-color: #ccc;position: relative;}.husky-ear1,.husky-e
复制链接

扫一扫