html5设计礼品盒效果,HTML5/CSS3圣诞树和礼盒
CSS
语言：
CSSSCSS
确定
body {
background: #FFF;
}
.container {
position: absolute;
left: 300px;
top: 50px;
}
.socks {
position: absolute;
top: 80px;
left: 10px;
z-index: 1;
transform: rotate(10deg);
}
.socks.two {
position: absolute;
top: 143px;
left: -40px;
z-index: 1;
transform: rotate(-10deg);
}
.socks:hover {
animation: 1.9s deco linear infinite;
}
.top {
position: absolute;
width: 15px;
height: 35px;
background: #E54B4B;
border-radius: 5px;
}
.foot {
position: absolute;
top: 20px;
left: 0;
width: 25px;
height: 15px;
border-radius: 30px;
background: #E54B4B;
}
.foot.two {
position: absolute;
top: 20px;
left: -10px;
width: 25px;
height: 15px;
border-radius: 30px;
background: #E54B4B;
}
.tree {
position: absolute;
}
.base {
width: 210px;
height: 10px;
background: #CCC;
position: absolute;
top: 304px;
left: -45px;
border-radius: 100%;
}
.base:after {
content: '';
width: 20px;
height: 20px;
background: #84714F;
position: absolute;
top: -25px;
left: 83px;
}
.layer {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #499F68;
}
.layer.two {
position: absolute;
top: 30px;
left: -10px;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 120px solid #499F68;
}
.layer.three {
position: absolute;
top: 50px;
left: -30px;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 160px solid #499F68;
}
.layer.four {
position: absolute;
top: 80px;
left: -50px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #499F68;
}
.bauble {
z-index: 1;
position: absolute;
border-radius: 100%;
}
.bauble.one {
top: 65px;
width: 13px;
height: 13px;
background: #FFE066;
}
.bauble.two {
top: 105px;
left: -30px;
width: 13px;
height: 13px;
background: #FFE066;
}
.bauble.three {
top: 110px;
left: 15px;
width: 13px;
height: 13px;
background: #FFE066;
}
.bauble.four {
top: 163px;
left: -30px;
width: 13px;
height: 13px;
background: #FFE066;
}
.deco {
position: absolute;
top: 130px;
left: 30px;
width: 50px;
height: 20px;
background: #EF476F;
/* border-radius: 100% 100% 100% 100%; */
transform: rotate(0deg);
}
.deco:after {} .line {
z-index: 1;
position: absolute;
top: 70px;
left: -43px;
width: 70px;
height: 0;
background: #FFE066;
border: 1px dashed #FFF;
transform: rotate(-30deg);
}
.line.two {
top: 93px;
left: -50px;
width: 85px;
height: 0;
background: #FFE066;
border: 1px dashed #FFF;
transform: rotate(-30deg);
}
.line.three {
top: 123px;
left: -60px;
width: 106px;
height: 0;
background: #FFE066;
border: 1px dashed #FFF;
transform: rotate(-30deg);
}
.line.four {
top: 153px;
left: -80px;
width: 136px;
height: 0;
background: #FFE066;
border: 1px dashed #FFF;
transform: rotate(-30deg);
}
.pressie {
z-index: 1;
position: absolute;
top: 250px;
left: 120px;
width: 60px;
height: 60px;
background: #F45B69;
}
.cover {
position: absolute;
left: -3px;
width: 66px;
height: 10px;
background: #F45B69;
border-bottom: 1px solid #AAA;
}
.wrap {
position: absolute;
left: 25px;
background: #59C3C3;
width: 10px;
height: 60px;
}
.ribbon {
position: absolute;
top: -30px;
left: 10px;
background: #FFF;
width: 12px;
height: 25px;
border-radius: 0 80% 20% 80%;
border: 3px solid #59C3C3;
transform: rotate(-10deg);
}
.ribbon:after {
position: absolute;
top: 0;
left: 20px;
background: #FFF;
width: 12px;
height: 25px;
border-radius: 0 80% 20% 80%;
border: 3px solid #59C3C3;
transform: rotate(60deg);
content: '';
}
.pressie:hover {
animation: 0.5s move linear infinite;
}
@keyframes move {
0% {
transform: rotate(10deg)
}
50% {
transform: rotate(-30deg)
}
100% {
transform: rotate(10deg)
}
}
@keyframes deco {
0% {
transform: rotate(5deg)
}
50% {
transform: rotate(-10deg)
}
100% {
transform: rotate(5deg)
}
}
.light {
box-shadow: 1px 1px 10px #CCC, -2px 1px 10px #CCC, 0 -1px 10px #CCC
}
.star {
z-index: 1;
position: absolute;
left: -49px;
top: -40px;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #FFE066;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.2);
}
.star:before {
border-bottom: 80px solid #FFE066;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #FFE066;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
.star.two {
transform: rotate(23deg) scale(.1);
position: absolute;
top: 102px;
left: -60px;
}
.star-light {}
html5设计礼品盒效果,HTML5/CSS3圣诞树和礼盒相关推荐
- html5设计礼品盒效果,十款眼前一亮的包装设计
小时候吃糖果,一定会把糖果纸留着,折成小花绑在灯的开关拉线上,那时候认识了包装设计,后来,再华美的包装都会被弃如敝履,无比忧郁. 1.FJ :哥们,干了这杯咱们再来赌一球 俄罗斯设计师 Constan ...
- html5设计礼品盒效果,十大包装创意设计网站
有时您只需要一些启发.好吧,这是10个包装创意设计网站,这些网站充满了新颖的样品和具有创意的图文信息!花一些时间筛选它们,我们确信您会充满活力,可以重新包装或开始为您的产品选择正确的方向.没有比看看其 ...
- html5设计礼品盒效果,30个创意包装设计例子
30个创意包装设计例子 5月 31, 2012 评论 (4) Sponsor 产品包装是最常见的平面设计插图,一个好的插图设计除了展示产品相关信息外,还能吸引一些消费者,因为现在很多产品的消费者大多数 ...
- html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
- html5伪类效果延缓,CSS3实现伪类hover离开时平滑过渡效果示例
由于hover伪类添加的动画效果,仅当鼠标放在元素上时会被触发,而当鼠标离开时,效果会中断,会显得很生硬. 大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效 ...
- html5设计九宫格页面,Html5响应式设计实现九宫格，html5响应九宫格
Html5响应式设计实现九宫格,html5响应九宫格 自从响应式设计的理念提出以来,越来越大的网站采用这种思想.各类大型网站也如雨后春笋般的涌了出来.如:小米商城,天猫等. 至于响应式设计的概念等大家 ...
- html5 星空扩散效果,HTML5 canvas实现炫酷旋转银河系星空背景特效解析
简要教程 这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTM ...
- html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...
- html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
最新文章
- jekyll静态博客提升访问速度：内嵌CSS，异步加载js，压缩HTML
- Spring启动慢？提速利器SpringFu来了
- 计算机图形学基础考试题及答案,计算机图形学基础模拟试题参考答案
- 菜鸟学习笔记：Java提升篇6（IO流2——数据类型处理流、打印流、随机流）
- git全局配置用户名和密码_git---全局设置用户名、密码、邮箱
- cass参考手册_什么？你还不会测绘?南方CASS教程+视频讲解+插件汇总，快来学！...
- 前言：设计模式六大原则
- Android使用拖拽控件来布局界面并展示
- 基于TensorFlow的深度学习 揭示数据隐含的奥秘3 卷积神经网络
- ios描述文件下载安装
- 单耳蓝牙耳机怎么连接_蓝牙耳机怎么连接
- python: too many indices for array
- 第一次做bom工作心得
- 【转自Oracle官方博客】一个ASMCA无法识别磁盘设备的问题
- 如何快速深度写论文？
- 崔毅东 C++程序设计入门(下) 第9单元:白公曾咏牡丹芳，一种鲜妍独“异常” 笔记
- 算法笔记_227:填写乘法算式(Java)
- 什么是OKR？OKR对于目标管理有什么意义？
- 中石油大学22春季《大学英语(四)#》第三阶段在线作业
- java.util.stream.Stream详解