CSS3制作摇晃的吊灯

一个前端，如果因为写JS时间过久而忘记如何写HTML和CSS了，其实也是一种悲哀啊，现在，慢慢的，一步一步的找回吧。

第一站：摇晃的吊灯

如我的博客所示，右上角有两盏一直摇晃从未停止的吊灯，下面po出这个吊灯的制作代码供游客参考：

首先是在博客园的设置中，“页首Html代码”位置写上html。

其中，id为myBanner的元素只是为了将我的代码与原本的代码区分开，并没有为其设置样式。

两盏灯一盏叫Jack，一盏叫rose。。。实际上，没有必要命名两盏，能区分就好了。。。但。。。谁让我高兴呢

<div id="myBanner"><i class="led led-jack"></i><i class="led led-rose"></i>
</div>

其次是“页面定制CSS代码”位置写上css。

/*myBanner*/
.led{display: block;position: absolute;right: 16%;top: 0;height: 8em;width: 2px;background-color: #000;-webkit-transform-origin: 0 -1em;-moz-transform-origin: 0 -1em;-ms-transform-origin: 0 -1em;-o-transform-origin: 0 -1em;transform-origin: 0 -1em;-webkit-animation: swing 3.5s ease-in-out forwards infinite;-moz-animation: swing 3.5s ease-in-out forwards infinite;-ms-animation: swing 3.5s ease-in-out forwards infinite;-o-animation: swing 3.5s ease-in-out forwards infinite;animation: swing 3.5s ease-in-out forwards infinite;
}
.led:before{content: '';display: block;width: 6em;height: 3em;background-color: #111;position: absolute;top: 8em;left: -2.9em;border-radius: 4em 4em 0 0;box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),inset 3px 3px 3px hsla(0,0%,100%,.2),inset -3px -3px 3px hsla(0,0%,0%,.2),1.5em -1em 3px hsla(0,0%,0%,.15);
}
.led:after{content: '';display: block;position: absolute;left: 1.5em;top: -1em;width: 1px;height: inherit;background-color: hsla(0,0%,0%,.1);box-shadow: 0 0 2px hsla(0,0%,0%,.15);
}
.led-rose{right: 30%;top: 0;height: 6em;
}
.led-rose:before{top: 6em;
}

。。。时隔两天突然发现，忘了写动画效果的代码了。。。

现在补上---->

@keyframes swing{0% {-webkit-transform: translateX(-50%) rotate(4deg);-moz-transform: translateX(-50%) rotate(4deg);-ms-transform: translateX(-50%) rotate(4deg);-o-transform: translateX(-50%) rotate(4deg);transform: translateX(-50%) rotate(4deg);}50% {-webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);-moz-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);-ms-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);-o-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);}100% {-webkit-transform: translateX(-50%) rotate(4deg);-moz-transform: translateX(-50%) rotate(4deg);-ms-transform: translateX(-50%) rotate(4deg);-o-transform: translateX(-50%) rotate(4deg);transform: translateX(-50%) rotate(4deg);}
}
@-webkit-keyframes swing{0% {-webkit-transform: translateX(-50%) rotate(4deg);}50% {-webkit-transform: translateX(-50%) rotate(-4deg) skewX(5deg) skewY(-2deg);}100% {-webkit-transform: translateX(-50%) rotate(4deg);}
}

即使不用在博客上，用在小页面里看也是很助眠的呢~

其实很多时候，兼容性是无法靠前缀解决的。

比如我的背景在ie浏览器里就是条条而不是格格了等等问题

总之，兼容性是一个繁琐但有必要的事情，看项目要求，尽可能兼容才是最终目的。

转载于:https://www.cnblogs.com/heiyou-blog/p/9003690.html

CSS3制作摇晃的吊灯相关推荐

css3蒙版运动,纯CSS3制作逼真的汽车运动动画
简要教程这是一款使用纯CSS3制作的逼真汽车运动动画特效.该特效中,所有元素都是通过CSS渲染得到的,没有使用任何图片.它通过公路斑马线的左右晃动来制作出汽车运动的视觉效果. 使用方法 HTML结构 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...
一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
html怎样做登录页面,使用HTML 5和CSS3制作登录页面完整步骤
本文详细介绍使用HTML 5 和CSS3 制作一个登录页面的完整过程. login.html Log In Forgot your password?Register 所用到的HTML 5的特性: ◆ ...
用css3制作旋转加载动画的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 以WebKit为核心的浏览器,例如Safari和Chrome,对HTML5有着很好的支持,在移动平台中这两个浏览器对应的就是i ...
CSS3制作文字特效
今天主要搜集了一些网页中文字用css3制作的特效,并亲自尝试了一下,现把关键的代码和效果贴出来与同学们一起分享,希望能对大家在平时的制作中有所帮助.废话不说,直接进入效果的制作,感兴趣的同学跟着我的代 ...
html火影忍者网页设计作品,纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例...
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法.分享给大家供大家参考.具体分析如下: 今天是火影忍者(漫画)宣告完结的日子.看过火影的朋友都知道,写轮眼是什么,这里就不多 ...

CSS3制作摇晃的吊灯

CSS3制作摇晃的吊灯相关推荐

最新文章

热门文章