Hot Post

CSS Halloween Trái bí ma quái

10/27/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

CSS Spooky Halloween Pumpkin

Hôm nay chúng ta sẽ cùng tạo ra Trái bí ma quái rất quen thuộc trong mùa Halloween. Widget này làm hoàn toàn bằng CSS nên sẽ không ảnh hưởng tốc độ load trang của website bạn.


CSS

body{
  background-color: black;
  overflow: hidden;
}

.image{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -120px;
  width: 300px;
  height: 200px;
}

.pumpkin{
  position: absolute;
  left: 90px;
}

.pumpkin .segment{
  position: absolute;
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
  background: #fb9a39; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #fb9a39 0%, #c13c07 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fb9a39), color-stop(100%,#c13c07)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #fb9a39 0%,#c13c07 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #fb9a39 0%,#c13c07 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #fb9a39 0%,#c13c07 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #fb9a39 0%,#c13c07 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb9a39', endColorstr='#c13c07',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  box-shadow: 0 0 20px rgba(206,79,51,1)
}

.pumpkin .segment:after{
  content:"";
  position: absolute;
   width: 100%;
   height: 100%;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
  background: -moz-linear-gradient(top,  rgba(251,154,57,0) 0%, rgba(127,35,5,0.4) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,154,57,0)), color-stop(100%,rgba(127,35,5,0.4))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(251,154,57,0) 0%,rgba(127,35,5,0.4) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(251,154,57,0) 0%,rgba(127,35,5,0.4) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(251,154,57,0) 0%,rgba(127,35,5,0.4) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(251,154,57,0) 0%,rgba(127,35,5,0.4) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fb9a39', endColorstr='#667f2305',GradientType=0 ); /* IE6-9 */

}

.pumpkin .segment:nth-child(5){
  left: -40px;
  height: 160px;
  top: 10px;
}

.pumpkin .segment:nth-child(4){
  left: 40px;
  height: 160px;
  top: 10px;
}

.pumpkin .segment:nth-child(2){
  left: -60px;
  height: 120px;
  top: 30px;
}

.pumpkin .segment:nth-child(3){
  left: 60px;
  height: 120px;
  top: 30px;
}

.pumpkin .segment:nth-child(6){
  left: 0;
  height: 180px;
  top: 0;
}

.eye{
  position: absolute;
  width: 0px;
  height: 0px;
  left: 0px;
  top: 30px;
  border-right: 30px solid transparent;
  border-top: 30px solid transparent;
  border-left: 30px solid rgb(193,60,7);
  border-bottom: 30px solid rgb(193,60,7);
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  -webkit-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  -moz-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  filter: drop-shadow( 0 0 10px rgb(248,181,0) );
}

.eye:after{
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  left: -30px;
  top: -30px;
  border-right: 25px solid transparent;
  border-top: 25px solid transparent;
  border-left: 25px solid rgb(248,181,0);
  border-bottom: 25px solid rgb(248,181,0);
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  -webkit-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  -moz-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  filter: drop-shadow( 0 0 10px rgb(248,181,0) );
}

.left:after{
  left: -20px; 
  top: -20px;
}

.left{
  -webkit-transform: rotate( -20deg );
  -moz-transform: rotate( -20deg );
  -ms-transform: rotate( -20deg );
  -o-transform: rotate( -20deg );
  transform: rotate( -20deg );
}

.right{
  left: 60px;
  -webkit-transform: rotate(-80deg);
  -moz-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  -o-transform: rotate(-80deg);
}

.pumpkin .mouth{
  position: absolute;
  width: 0px;
  height: 0px;
  left: 0px;
  top: 80px;
  border-right: 30px solid transparent;
  border-top: 30px solid transparent;
  border-left: 30px solid rgb(193,60,7);
  border-bottom: 30px solid rgb(193,60,7);
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  -webkit-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  -webkit-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px);
  -moz-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px);
  -ms-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px);
  -o-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px);
}

.mouth:after{
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  left: -25px;
  top: -25px;
  border-right: 25px solid transparent;
  border-top: 25px solid transparent;
  border-left: 25px solid rgb(248,181,0);
  border-bottom: 25px solid rgb(248,181,0);
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  -webkit-filter: drop-shadow( 0 0 10px rgb(248,181,0) ); 
  -moz-filter: drop-shadow( 0 0 10px rgb(248,181,0) );
  filter: drop-shadow( 0 0 10px rgb(248,181,0) );
}

.pumpkin .stem{
  position: absolute;
  color: #5c7a23;
  font-size: 200px;
  font-weight: 800px;
  font-family: sans-serif;
  left: 10px;
  top: -80px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.pumpkin .stem:after{
  position: absolute;
  content: "⟆";
  color: #7c9d3e;
  font-size: 150px;
  font-weight: 800px;
  font-family: sans-serif;
  left: 8px;
  top: 50px;
}

.pumpkin .stem:before{
  position: absolute;
  content: "⟆";
  color: #7c9d3e;
  font-size: 190px;
  font-weight: 800px;
  font-family: sans-serif;
  left: 12px;
  top: 10px;
  z-index: -1
}

.shadow{
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 150px;
  width: 300px;
    height: 100px;
    background: red;
    -moz-border-radius: 150px / 50px;
    -webkit-border-radius: 150px / 50px;
    border-radius: 150px / 50px;
  z-index: -1;
  background: -moz-radial-gradient(center, ellipse cover,  rgba(242,176,9,0.4) 0%, rgba(248,160,44,0) 72%, rgba(251,154,57,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(242,176,9,0.4)), color-stop(72%,rgba(248,160,44,0)), color-stop(100%,rgba(251,154,57,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(242,176,9,0.4) 0%,rgba(248,160,44,0) 72%,rgba(251,154,57,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(242,176,9,0.4) 0%,rgba(248,160,44,0) 72%,rgba(251,154,57,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(242,176,9,0.4) 0%,rgba(248,160,44,0) 72%,rgba(251,154,57,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(242,176,9,0.4) 0%,rgba(248,160,44,0) 72%,rgba(251,154,57,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66f2b009', endColorstr='#00fb9a39',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.pumpkin,
.pumpkin .eye,
.pumpkin .mouth,
.pumpkin .stem,
.shadow{
  -webkit-transition: -webkit-transform 150ms ease-out;
  -moz-transition: -moz-transform 150ms ease-out;
  -ms-transition: -ms-transform 150ms ease-out;
  -o-transition: -o-transform 150ms ease-out;
  transition: transform 150ms ease-out;
}

.image:hover .eye.left{ 
  -webkit-transform: rotate(-50deg);
  -moz-transform: rotate(-50deg);
  -ms-transform: rotate(-50deg);
  -o-transform: rotate(-50deg);
  transform: rotate(-50deg);
  -webkit-animation: none;
}

.image:hover .eye.right{ 
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
  -webkit-animation: none;
}

.image:hover .mouth{
  -webkit-transform: rotate(-30deg) translateY(20px);
  -moz-transform: rotate(-30deg) translateY(20px);
  -ms-transform: rotate(-30deg) translateY(20px);
  -o-transform: rotate(-30deg) translateY(20px);
  transform: rotate(-30deg) translateY(20px);
  -webkit-animation: none;
}

.image:hover .stem{
  -webkit-transform: rotate(200deg) translateY(-20px);
  -moz-transform: rotate(200deg) translateY(-20px);
  -ms-transform: rotate(200deg) translateY(-20px);
  -o-transform: rotate(200deg) translateY(-20px);
  transform: rotate(200deg) translateY(-20px);
}

.image:hover .pumpkin{
  -webkit-transform: scale(1.2,.9);
  -moz-transform: scale(1.2,.9);
  -ms-transform: scale(1.2,.9);
  -o-transform: scale(1.2,.9);
  transform: scale(1.2,.9);
}

.image:hover .shadow{
  -webkit-transform: scale(1.2,.9);
  -moz-transform: scale(1.2,.9);
  -ms-transform: scale(1.2,.9);
  -o-transform: scale(1.2,.9);
  transform: scale(1.2,.9);
}

.spooky{
  font-family: 'Aladin', cursive;
  color: #F2B009;
  font-size: 48px;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 50%;
  margin-top: 120px;
  -webkit-perspective: 400px;
  -moz-perspective: 400px;
  -ms-perspective: 400px;
  -o-perspective: 400px;
  perspective: 400px;
}

.spooky:after{
  content: "Happy Halloween!";
  font-family: 'Aladin', cursive;
  color: #805f0b ;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 50%;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  -o-filter: blur(10px);
  filter: blur(10px);
  margin-top: 30px;
  z-index: -1;
  -webkit-transform: rotateX(45deg) rotateZ(180deg) rotateY(180deg) scaleX(1.1) scaleY(2);
  -moz-transform: rotateX(45deg) rotateZ(180deg) rotateY(180deg) scaleX(1.1) scaleY(2);
  -ms-transform: rotateX(45deg) rotateZ(180deg) rotateY(180deg) scaleX(1.1) scaleY(2);
  -o-transform: rotateX(45deg) rotateZ(180deg) rotateY(180deg) scaleX(1.1) scaleY(2);
  transform: rotateX(45deg) rotateZ(180deg) rotateY(180deg) scaleX(1.1) scaleY(2);
}

@-webkit-keyframes twitchLeft {
  0%   { -webkit-transform: rotate(-30deg) }
  50%  { -webkit-transform:  scale(1.1) rotate(-10deg)}
  100% { -webkit-transform: rotate(-30deg) }
}

@-moz-keyframes twitchLeft {
  0%   { -moz-transform: rotate(-30deg) }
  50%  { -moz-transform:  scale(1.1) rotate(-10deg)}
  100% { -moz-transform: rotate(-30deg) }
}

@-ms-keyframes twitchLeft {
  0%   { -ms-transform: rotate(-30deg) }
  50%  { -ms-transform:  scale(1.1) rotate(-10deg)}
  100% { -ms-transform: rotate(-30deg) }
}

@-o-keyframes twitchLeft {
  0%   { -o-transform: rotate(-30deg) }
  50%  { -o-transform:  scale(1.1) rotate(-10deg)}
  100% { -o-transform: rotate(-30deg) }
}

@keyframes twitchLeft {
  0%   { transform: rotate(-30deg) }
  50%  { transform:  scale(1.1) rotate(-10deg)}
  100% { transform: rotate(-30deg) }
}

@-webkit-keyframes twitchRight {
  0%   { -webkit-transform: rotate(-70deg) }
  50%  { -webkit-transform: scale(1.1) rotate(-80deg)}
  100% { -webkit-transform: rotate(-70deg) }
}

@-moz-keyframes twitchRight {
  0%   { -moz-transform: rotate(-70deg) }
  50%  { -moz-transform: scale(1.1) rotate(-80deg)}
  100% { -moz-transform: rotate(-70deg) }
}

@-ms-keyframes twitchRight {
  0%   { -ms-transform: rotate(-70deg) }
  50%  { -ms-transform: scale(1.1) rotate(-80deg)}
  100% { -ms-transform: rotate(-70deg) }
}

@-o-keyframes twitchRight {
  0%   { -o-transform: rotate(-70deg) }
  50%  { -o-transform: scale(1.1) rotate(-80deg)}
  100% { -o-transform: rotate(-70deg) }
}

@keyframes twitchRight {
  0%   { transform: rotate(-70deg) }
  50%  { transform: scale(1.1) rotate(-80deg)}
  100% { transform: rotate(-70deg) }
}

@-webkit-keyframes twitchMouth {
  0%   { -webkit-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
  50%  { -webkit-transform: scale(2,1.5) rotate(-35deg) translateX(10px) translateY(10px); }
  100% { -webkit-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
}

@-moz-keyframes twitchMouth {
  0%   { -moz-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
  50%  { -moz-transform: scale(2,1.5) rotate(-35deg) translateX(10px) translateY(10px); }
  100% { -moz-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
}

@-ms-keyframes twitchMouth {
  0%   { -ms-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
  50%  { -ms-transform: scale(2,1.5) rotate(-35deg) translateX(10px) translateY(10px); }
  100% { -ms-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
}

@-o-keyframes twitchMouth {
  0%   { -o-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
  50%  { -o-transform: scale(2,1.5) rotate(-35deg) translateX(10px) translateY(10px); }
  100% { -o-transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
}

@keyframes twitchMouth {
  0%   { transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
  50%  { transform: scale(2,1.5) rotate(-35deg) translateX(10px) translateY(10px); }
  100% { transform: scale(2,1) rotate(-45deg) translateX(10px) translateY(10px); }
}

.pumpkin .eye.left{
  -webkit-animation: twitchLeft 650ms ease-in-out infinite; 
  -moz-animation:    twitchLeft 650ms ease-in-out infinite; 
  -o-animation:      twitchLeft 650ms ease-in-out infinite; 
  animation:         twitchLeft 650ms ease-in-out infinite; 
}

.pumpkin .eye.right{
  -webkit-animation: twitchRight 570ms ease-in-out infinite; 
  -moz-animation:    twitchRight 570ms ease-in-out infinite; 
  -o-animation:      twitchRight 570ms ease-in-out infinite; 
  animation:         twitchRight 570ms ease-in-out infinite; 
}

.pumpkin .mouth{
  -webkit-animation: twitchMouth 770ms ease-in-out infinite; 
  -moz-animation:    twitchMouth 770ms ease-in-out infinite; 
  -o-animation:      twitchMouth 770ms ease-in-out infinite; 
  animation:         twitchMouth 770ms ease-in-out infinite; 
}

HTML

<link href='http://fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>

<div class="image" >
  
<div class="pumpkin">

  <div class="stem">⟆</div>

  <div class="segment" ></div>
  <div class="segment" ></div>
  <div class="segment" ></div>
  <div class="segment" ></div>
  <div class="segment" ></div>
  
  <div class="eye left" ></div>
  <div class="eye right"></div>
  
  <div class="mouth" ></div>
  
</div>

<div class="shadow"></div>
  

<p class="spooky">Happy Halloween!</p>
  </div>


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by spite/Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "CSS Halloween Trái bí ma quái"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)