餐饮商家做网站的好处,中国建设网官方网站e路护航,展会展厅设计公司,网站开发程序员 工资快六一啦#xff0c;小时候顶多吃个小冰棍#xff0c;或者是那种小冰袋#xff0c;现在的小朋友真是好#xff0c;动不动就能吃到冰淇淋#xff0c;今天用CSS3实现一个冰淇淋的动画特效吧 目录
实现思路
桶身的实现
冰淇淋身体的实现
五彩颗粒的实现
HTML源码
CSS3源…快六一啦小时候顶多吃个小冰棍或者是那种小冰袋现在的小朋友真是好动不动就能吃到冰淇淋今天用CSS3实现一个冰淇淋的动画特效吧 目录
实现思路
桶身的实现
冰淇淋身体的实现
五彩颗粒的实现
HTML源码
CSS3源码
最后 实现思路 本文采用多DOM的方式进行布局冰淇淋桶身通过border-radius进行特殊区域进行圆润处理眼部比较容易理解先做大的border-radius圆角形状然后内部做小的白色圆角处理并且进行定位通过animation动画使眼睛可以左右移动嘴角做半圆处理然后再通过rotateZ角度旋转变为卡通可爱形然后是顶部分三部分处理包括右上角的樱桃部分最后是五彩颗粒采用定位的方式因为原本我们采用的是DIV元素所以需要使用一定的圆角处理 桶身的实现
桶身使用.base类对width和height做固定使用position做定位所以需要z-index的属性加入需要一定的圆角又要使用border-radius做处理
底部为了模拟放在桌子表面上需要有一个放置的阴影效果这里使用filter的属性并控制其blur属性值
眼睛就是大的DIV套小的DIV然后采用position进行定位分别以border-radius做圆角处理这里需要一个animation动画使其左右转动注意分为左右两只可爱小眼睛
嘴角因为是DIV元素而且首先做了上半圆的处理然后再使用rotateZ(180deg)将其旋转即可
部分CSS3代码如下
.eye{width: 4vmax;height: 4vmax;border-radius: 50%;position: absolute;background: #472a1c;top: 19vmax;z-index: 110;
}.eye::before{content: ;position: absolute;top: .75vmax;left: .75vmax;width: 1.15vmax;height: 1.15vmax;border-radius: 50%;background: white;animation: 4s eye infinite ;}
.eye::after{content: ;position: absolute;top: 2.5vmax;left: 1vmax;width: .5vmax;height: .5vmax;border-radius: 50%;background: white;animation: 4s eye infinite ;}
.eye-l{ left: 8.8vmax; }
.eye-r{ left: 17.5vmax; } 冰淇淋身体的实现
身体部分采用上中下3个DOM元素做分层处理分别添加.top__item类因为冰淇淋被挤压到桶身后呈圆形所以border-radius真是一个神奇的属性
然后再通过::before和::after伪类进行阴影部分的元素定位与布局再配合linear-gradient使特殊部位进行阴影效果使效果更逼真
顶部樱桃部分位于最顶部的.top_item类中但樱桃并非border-radius:50%那样的圆角而是稍微有一点非圆角部分CSS3代码如下
.top__item:nth-of-type(3)::before{content: ;position: absolute;width: 4vmax;height: 4vmax;right: 0;top: 0vmax;border-radius: 50% / 60%;background: #e30b5d;transform: rotateZ(-10deg);
} 五彩颗粒的实现
五彩颗粒重点在于定位和方位的旋转效果这里使用了absolute定位并且需要z-index的层级比其他元素要高然后再分别进行top值和left值的定位并采用rotateZ的旋转属性使每个五彩颗粒角度方位不同但其实看这个冰淇淋也就是两种角度而且为了更吸引小朋友需要做成不同颜色的这就需要不同的background属性值这个比较简单部分CSS3代码如下
.chips{width: 2vmax;height: .5vmax;position: absolute;top: 10vmax;left: 8vmax;border-radius: 50%;transform: rotateZ(35deg);z-index: 200;
}
.chips:nth-of-type(2){top: 8vmax;left: 12vmax;
}
到这里就算讲解完成了但讲N遍也不如拿到代码自己看一看改一改源码玩一玩下面给出源码
HTML源码
body
div classmaindiv classbase/divdiv classsdw/divdiv classeye eye-l/divdiv classeye eye-r/divdiv classshadow shadow-l/divdiv classshadow shadow-r/divdiv classmouth/divdiv classtopdiv classtop__item/divdiv classtop__item/divdiv classtop__item/div/divdiv classcolorsdiv classchips chips--blue/divdiv classchips chips--pink chips--rotate/divdiv classchips chips--green/divdiv classchips chips--blue chips--rotate/divdiv classchips chips--pink/divdiv classchips chips--green chips--rotate/divdiv classchips chips--blue/div/div
/div
CSS3源码
style*,
*::before,
*::after{margin: 0;padding: 0;box-sizing: border-box;
}
body{display: flex;justify-content: center;align-items: center;width: 100%;height: 100vh;background: #FFD275;color: white;overflow: hidden;font-family: Montserrat, sans-serif;position: relative;}
a{font-family: sans-serif;font-size: 12px;font-weight: normal;text-decoration: none;letter-spacing: 0;cursor: pointer;color: #00b1b7;
}
.particles{width: 100%;height: 100vh;position: absolute;z-index: 1;
}.main{height: 30vmax;width: 30vmax;position: relative;animation: 2s jump ease-out infinite alternate;z-index: 10;
}
.base{position: absolute;width: 18vmax;bottom: 4vmax;left: 6vmax;border-top: 10vmax solid #ff87a4;border-top-left-radius: 10px;border-top-right-radius: 10px;border-left: 3vmax solid transparent;border-right: 3vmax solid transparent;border-bottom: none;z-index: 90;}
.base::after{content: ;position: absolute;width: 12vmax;height: 4vmax;background: linear-gradient(to bottom, #ff87a4 60%, #e3748f);bottom: -1.65vmax;border-radius: 50%;
}.eye{width: 4vmax;height: 4vmax;border-radius: 50%;position: absolute;background: #472a1c;top: 19vmax;z-index: 110;
}.eye::before{content: ;position: absolute;top: .75vmax;left: .75vmax;width: 1.15vmax;height: 1.15vmax;border-radius: 50%;background: white;animation: 4s eye infinite ;}
.eye::after{content: ;position: absolute;top: 2.5vmax;left: 1vmax;width: .5vmax;height: .5vmax;border-radius: 50%;background: white;animation: 4s eye infinite ;}
.eye-l{ left: 8.8vmax; }
.eye-r{ left: 17.5vmax; }.shadow{position: absolute;width: 2vmax;height: 1vmax;bottom: 6.5vmax;z-index: 109;border-radius: 50%;background: #ff2a7b;animation: .1s shake infinite;}
.shadow-l{ left: 8.4vmax; }
.shadow-r{ left: 19.5vmax; }.mouth{position: absolute;top: 23vmax;left: calc(15vmax - 1.5vmax);border-top-left-radius: 1.5vmax;border-top-right-radius: 1.5vmax;border: 1.5vmax solid #ff2a7b;transform: rotateZ(180deg);z-index: 110;animation: 2s mouth infinite alternate;}.top{position: absolute;width: 22vmax;height: 15vmax;bottom: 12vmax;left: 4vmax;
}
.top__item:nth-of-type(1){position: absolute;width: 100%;height: 8vmax;border-radius: 5vmax;bottom: 0;z-index: 100;background: #f2e7e8;}
.top__item:nth-of-type(1)::after{content: ;position: absolute;width: 10vmax;height: 10vmax;right: -.5vmax;top: -2vmax;border-radius: 50%;background: #f2e7e8;background: linear-gradient(120deg, rgba(242, 231, 232, 1) 40%, #d6c6c8);}
.top__item:nth-of-type(1)::before{content: ;position: absolute;width: 18vmax;height: 3vmax;left: 2vmax;bottom: -.8vmax;border-radius: 50%;background: linear-gradient(to bottom, #f2e7e8 30%, #d6c6c8);}
.top__item:nth-of-type(2){position: absolute;width: 16vmax;height:5vmax;bottom: 6vmax;left: 3vmax;border-radius: 5vmax;z-index: 80;background: #f2e7e8;
}
.top__item:nth-of-type(2)::after{content: ;position: absolute;width: 4vmax;height: 4vmax;right: 0;top: -1vmax;border-radius: 50%;background: #f2e7e8;
}
.top__item:nth-of-type(3){position: absolute;width: 12vmax;height: 10vmax;left: 5vmax;border-radius: 50%;top: 0;z-index: 70;background: #f2e7e8;
}
.top__item:nth-of-type(3)::before{content: ;position: absolute;width: 4vmax;height: 4vmax;right: 0;top: 0vmax;border-radius: 50% / 60%;background: #e30b5d;transform: rotateZ(-10deg);
}
.top__item:nth-of-type(3)::after{content: ;position: absolute;width: 1vmax;height: 1vmax;right: 1vmax;top: .75vmax;border-radius: 50%;background: white;opacity: .4;
}.chips{width: 2vmax;height: .5vmax;position: absolute;top: 10vmax;left: 8vmax;border-radius: 50%;transform: rotateZ(35deg);z-index: 200;
}
.chips:nth-of-type(2){top: 8vmax;left: 12vmax;
}
.chips:nth-of-type(3){top: 4vmax;left: 14vmax;
}
.chips:nth-of-type(4){top: 14vmax;left: 14vmax;
}
.chips:nth-of-type(5){top: 15vmax;left: 18vmax;
}
.chips:nth-of-type(6){top: 9vmax;left: 20vmax;
}
.chips:nth-of-type(7){top: 15vmax;left: 6vmax;
}.chips--rotate{ transform: rotateZ(-35deg); }
.chips--blue{ background: #00b1b7; }
.chips--pink{ background: #ff2c7c; }
.chips--green{ background: #00df4a; }.sdw{width: 12vmax;height: 4vmax;position: absolute;bottom: 1.5vmax;left: calc(50% - 6vmax);background: black;border-radius: 50%;filter: blur(3px);animation: 2s sdw ease-out infinite alternate;}
keyframes sdw {0%, 90%{opacity: .3;transform: translateY(0vmax) scale(.98);}100%{transform: translateY(5vmax) scale(.95);opacity: .1;}
}keyframes eye {0%, 45%{ transform: translateX(0vmax);}50%, 95%{ transform: translateX(1.25vmax);}
}
keyframes mouth {0%, 80%{border: 1.5vmax solid #ff2a7b;border-bottom: 0;}100%{border: 1.5vmax solid #ff2a7b;}
}keyframes shake {0%{ transform: translateY(-1px); }100%{ transform: translateY(1px);}
}
keyframes jump {0%, 90%{transform: translateY(2vmax) scale(1);}100%{transform: translateY(-3vmax) scale(.95);}
}
keyframes move {0%{transform: translateY(0) rotateZ(35deg);opacity: 0;}10% ,90%{opacity: .35;}100%{transform: translateY(35vmax) rotateZ(-35deg);opacity: 0;}
}/style
最后
最后希望不管是大人还是小朋友们都可以渡过一个快乐的六一儿童节即便自己不是小孩子了也奖励自己一个六一小礼物吧
