纯css实现hover小甜心动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Challenges: CSS Hover Pudding🍮 </title>
<style>
*:before, *:after {
position: absolute;
content: "";
}
*:hover {
z-index: 10;
}
body {
width: 100%;
height: 100%;
background: #f8dee9;
}
.dessert {
position: absolute;
}
.pudding {
position: absolute;
width: 150px;
height: 150px;
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.pudding__part {
position: absolute;
width: 150px;
height: 120px;
background: #f4d37c;
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
.pudding__part:before {
top: 0;
right: -10px;
width: 0;
height: 0;
border-left: 10px solid #f4d37c;
border-top: 120px solid transparent;
border-bottom: 0 solid transparent;
}
.pudding__part:after {
top: 0;
left: -10px;
width: 0;
height: 0;
border-right: 10px solid #f4d37c;
border-top: 120px solid transparent;
border-bottom: 0 solid transparent;
}
.pudding__cream {
position: absolute;
top: -10px;
left: 50px;
width: 45px;
height: 15px;
background: #fff3e5;
border-radius: 50%;
-webkit-transform: scale(1.5);
transform: scale(1.5);
z-index: 10;
}
.pudding__cream:before {
top: -8px;
left: 7px;
width: 30px;
height: 15px;
background: #fff3e5;
border-radius: 50%;
}
.pudding__cream:after {
top: -18px;
left: 15px;
height: 25px;
width: 15px;
background: #fff3e5;
border-radius: 80% 10% 55% 50%/55% 10% 80% 50%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.pudding__cherry {
position: absolute;
top: -20px;
left: 88px;
width: 25px;
height: 25px;
z-index: 10;
border-radius: 50%;
background: #eb3939;
}
.pudding__cherry:before {
top: -8px;
left: 11px;
width: 12px;
height: 17px;
border-radius: 50%;
-webkit-transform: rotate(37deg);
transform: rotate(37deg);
border-left: 2px solid #323232;
background: transparent;
}
.pudding__head {
position: absolute;
top: -18px;
width: 150px;
height: 40px;
border-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0