纯html css博客,纯HTML+CSS打造动画

纯CSS动画

.tank{

width:200px;

height:100px;

margin:100px auto;

border:2px solid blue;

border-radius:0 0 20px 20px;

/*矩形圆角*/

}

.battery{

width:100px;

height:50px;

margin:0px auto;

background-color:cornflowerblue;

border-radius:0 0 50px 50px;

}

.spiale{

width:20px;

height:20px;

border-radius:10px;

background-color:white;

margin:auto;

animation:go 3s infinite linear,gol 300ms infinite linear;

}

.gun{

width:4px;

height:25px;

margin:-2px auto 0px;

background-color:#fff;

transform-origin:top;

animation:go 3s infinite linear;/* 引用 go infinite 无限循环 linear 匀速*/

}

@keyframes gol{

/*4个点*/

0%{box-shadow:0px 50px 0px -7px red,

0px 75px 0px -7px red,

0px 100px 0px -7px red,

0px 125px 0px -7px red;

}

100%{box-shadow:0px 75px 0px -7px red,

0px 100px 0px -7px red,

0px 125px 0px -7px red,

0px 150px 0px -7px red;

}

@keyframes go{

0%{transform:rotate(-45deg)}/*-45deg 为-45度*/

50%{transform:rotate(45deg)}

100%{transform:rotate(-45deg)}

}

纯html css博客,纯HTML+CSS打造动画相关推荐

自定义CSS博客皮肤
共享一下我的自定义CSS博客皮肤(2012.3) 转载于:https://www.cnblogs.com/hl666/p/3655261.html
博客园定制CSS代码
博客园定制CSS代码步骤禁用模板默认 CSS . CSS 代码框中,填写定制 CSS 代码. 定制的 CSS 代码中,如果缺少 home 项,需要进行添加,home 项范例如下: 其中 width ...
如何使用CSDN中的Markdown写博客——纯小白篇
这篇博客用来学习如何使用CSDN中的Markdown写博客在写这篇博客前,我找了很多教程,摸索了很长时间才会用这东西写博客,现在写一个教程方便像我一样的纯小白学习如何用这个Makedown写博客. ...
博客园线条随鼠标动画
博客园线条随鼠标动画博客园线条随鼠标动画直接将一下代码加入html的最下面即可 <script>!function(){function n(n,e,t){return n.getAt ...
博客使用的CSS代码备份
CSS代码备份 /*simplememory*/ #google_ad_c1, #google_ad_c2 {display: none; }.syntaxhighlighter a, .syntax ...
html+css博客静态页面
首页html代码 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
今天看到淘宝ued博客上左边的菜单导航动画效果不错,就用jQuery和css3做了一个简单的例子,主要是实现运用了jQuery 事件和css3 transition属性. 用一个元素来实现鼠标滑动到某 ...
【教程】一步一步教你如何自定义设置——博客园canvas/JS交互动画背景
演示步骤的原文链接:(看完就可以掌握如何设置博客园canvas动画背景) 博客园如何自定义设置canvas/JS动画背景 --2018-10-27 本博客的弹弹弹小球-canvas动画原文链接:(看完 ...
查看博客模板的css代码
1.可以去模板列表里选择一个模板 http://www.cnblogs.com/Skins.aspx 目前使用的模板是http://www.cnblogs.com/SkinUser.aspx?Skin ...

纯html css博客,纯HTML+CSS打造动画

纯html css博客,纯HTML+CSS打造动画相关推荐

最新文章

热门文章