HTML页面放个会动的风铃,CSS3文本特效 - 风铃摆动

最新推荐文章于 2021-09-16 10:12:50 发布
最新推荐文章于 2021-09-16 10:12:50 发布
阅读量420 收藏
点赞数
文章标签： HTML页面放个会动的风铃

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Amatic+SC);

html {

font-size: 16px;

}

@media (min-width: 500px) {

html {

font-size: 20px;

}

}

@media (min-width: 700px) {

html {

font-size: 25px;

}

}

@media (min-width: 900px) {

html {

font-size: 30px;

}

}

@media (min-width: 1100px) {

html {

font-size: 35px;

}

}

@media (min-width: 1300px) {

html {

font-size: 40px;

}

}

body {

background: #292929;

}

.tag {

position: absolute;

left: 50%;

top: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.tag:before,

.tag:after {

content: '';

height: 3px;

background: #fff;

width: 20%;

display: block;

position: absolute;

left: 50%;

-webkit-transform: translateX(-50%);

-ms-transform: translateX(-50%);

transform: translateX(-50%);

}

span {

font-family: Amatic SC;

font-size: 3rem;

color: #fff;

-webkit-animation: rattle 20s infinite linear;

animation: rattle 20s infinite linear;

-webkit-animation-direction: alternate;

animation-direction: alternate;

display: inline-block;

}

span:nth-child(1) {

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

span:nth-child(2) {

-webkit-animation-delay: 1s;

animation-delay: 1s;

}

span:nth-child(3) {

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

}

span:nth-child(4) {

-webkit-animation-delay: 2s;

animation-delay: 2s;

}

span:nth-child(5) {

-webkit-animation-delay: 2.5s;

animation-delay: 2.5s;

}

span:nth-child(6) {

-webkit-animation-delay: 3s;

animation-delay: 3s;

}

span:nth-child(7) {

-webkit-animation-delay: 3.5s;

animation-delay: 3.5s;

}

span:nth-child(8) {

-webkit-animation-delay: 4s;

animation-delay: 4s;

}

span:nth-child(9) {

-webkit-animation-delay: 4.5s;

animation-delay: 4.5s;

}

span:nth-child(10) {

-webkit-animation-delay: 5s;

animation-delay: 5s;

}

span:nth-child(11) {

-webkit-animation-delay: 5.5s;

animation-delay: 5.5s;

}

span:nth-child(12) {

-webkit-animation-delay: 6s;

animation-delay: 6s;

}

span:nth-child(13) {

-webkit-animation-delay: 6.5s;

animation-delay: 6.5s;

}

span:nth-child(14) {

-webkit-animation-delay: 7s;

animation-delay: 7s;

}

span:nth-child(15) {

-webkit-animation-delay: 7.5s;

animation-delay: 7.5s;

}

span:nth-child(16) {

-webkit-animation-delay: 8s;

animation-delay: 8s;

}

.d {

-webkit-animation: none;

animation: none;

font-size: 20% !important;

}

@-webkit-keyframes rattle {

0% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

1% {

-webkit-transform: rotate(-2deg);

transform: rotate(-2deg);

}

2% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

3% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

4% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

5% {

-webkit-transform: rotate(-6deg);

transform: rotate(-6deg);

}

6% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

7% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

8% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

9% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

10% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

11% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

12% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

13% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

14% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

15% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

16% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

17% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

18% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

19% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

20% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

21% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

22% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

23% {

-webkit-transform: rotate(-2deg);

transform: rotate(-2deg);

}

24% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

25% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

26% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

27% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

28% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

29% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

30% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

31% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

32% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

33% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

34% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

35% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

36% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

37% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

38% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

39% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

40% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

41% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

42% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

43% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

44% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

45% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

46% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

47% {

-webkit-transform: rotate(-6deg);

transform: rotate(-6deg);

}

48% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

49% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

50% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

51% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

52% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

53% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

54% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

55% {

-webkit-transform: rotate(-3deg);

transform: rotate(-3deg);

}

56% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

57% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

58% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

59% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

60% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

61% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

62% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

63% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

64% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

65% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

66% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

67% {

-webkit-transform: rotate(-3deg);

transform: rotate(-3deg);

}

68% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

69% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

70% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

71% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

72% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

73% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

74% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

75% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

76% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

77% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

78% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

79% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

80% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

81% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

82% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

83% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

84% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

85% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

86% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

87% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

88% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

89% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

90% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

91% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

92% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

93% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

94% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

95% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

96% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

97% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

98% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

99% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

100% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

}

@keyframes rattle {

0% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

1% {

-webkit-transform: rotate(-2deg);

transform: rotate(-2deg);

}

2% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

3% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

4% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

5% {

-webkit-transform: rotate(-6deg);

transform: rotate(-6deg);

}

6% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

7% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

8% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

9% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

10% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

11% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

12% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

13% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

14% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

15% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

16% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

17% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

18% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

19% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

20% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

21% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

22% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

23% {

-webkit-transform: rotate(-2deg);

transform: rotate(-2deg);

}

24% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

25% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

26% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

27% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

28% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

29% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

30% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

31% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

32% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

33% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

34% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

35% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

36% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

37% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

38% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

39% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

40% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

41% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

42% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

43% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

44% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

45% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

46% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

47% {

-webkit-transform: rotate(-6deg);

transform: rotate(-6deg);

}

48% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

49% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

50% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

51% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

52% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

53% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

54% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

55% {

-webkit-transform: rotate(-3deg);

transform: rotate(-3deg);

}

56% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

57% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

58% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

59% {

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

60% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

61% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

62% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

63% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

64% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

65% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

66% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

67% {

-webkit-transform: rotate(-3deg);

transform: rotate(-3deg);

}

68% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

69% {

-webkit-transform: rotate(-9deg);

transform: rotate(-9deg);

}

70% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

71% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

72% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

73% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

74% {

-webkit-transform: rotate(3deg);

transform: rotate(3deg);

}

75% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

76% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

77% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

78% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

79% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

80% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

81% {

-webkit-transform: rotate(-12deg);

transform: rotate(-12deg);

}

82% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

83% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

84% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

85% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

86% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

87% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

88% {

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

89% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

90% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

91% {

-webkit-transform: rotate(-7deg);

transform: rotate(-7deg);

}

92% {

-webkit-transform: rotate(1deg);

transform: rotate(1deg);

}

93% {

-webkit-transform: rotate(-8deg);

transform: rotate(-8deg);

}

94% {

-webkit-transform: rotate(6deg);

transform: rotate(6deg);

}

95% {

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

96% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

97% {

-webkit-transform: rotate(-11deg);

transform: rotate(-11deg);

}

98% {

-webkit-transform: rotate(4deg);

transform: rotate(4deg);

}

99% {

-webkit-transform: rotate(-1deg);

transform: rotate(-1deg);

}

100% {

-webkit-transform: rotate(2deg);

transform: rotate(2deg);

}

}

颜运梅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5模拟风吹衣服不停摆动的动画效果.rar
07-10
HTML5模拟风吹衣服不停摆动的动画效果，运行效果后，可拖动鼠标改变场景视图，然后鼠标在衣服上拖动，即可看到衣服像是被风吹的效果一样，不停的摆动，里面的算法我觉得更值得学习，因此将源码分享给大家，相当不错的一种效果。
CSS3特效-CSS3实现烟花特效
12-19
CSS3实现烟花特效-图片+css
HTML页面放个会动的风铃,HTML5 串联在一起摇晃的卡片（风铃）
weixin_33840959的博客
06-03 179
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Roboto+Mono:700);*,*:before,*:after {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}body {font-fami...
html c3效果,使用c3动画实现摇铃铛效果
weixin_28729205的博客
06-05 358
使用c3动画实现摇铃铛效果ui小姐姐想给通知栏目添加一个摇铃铛效果，好久没用c3的我太菜了，没搞完美，最后还是UI小姐姐制作了一个gif图，哈哈。下面安排一个完美的纯css实现的摇铃铛效果，随便在阿里字体库找了一个铃铛下载了png附代码.ld{width:60px;height:70px;transform-origin:50%0;animation:yaolingdang3sin...
基于Kinetic框架实现超酷的风铃悬挂摆动效果
陈小峰（iefreer）的专栏
07-05 4249
利用Canvas画了几个错落有致的六边形风铃标签，鼠标hover上去的时候会出现轻微摆动以及模拟风铃随风飘扬的音效。
CSS实现消息通知时铃铛图标显示摇铃效果
我的博客
09-16 1444
1. 代码如下 <image class="xiaoxi-icon" src="../../static/icons/xiaoxi.png" :class="{'rotate':isPlaying}"></image> .rotate { display: block; animation: rotate 0.1s linear infinite; } @keyframes rotate{ 0%{ transform: rotateZ(0deg);
css3特效-css实现烟花特效
12-19
css3+js实现烟花绽放的动画效果
html5 CSS3心形动画跟随鼠标光标运动特效.zip
07-11
代码片段： this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; ...// Move points over time ..._this.radians = _this.velocity;..._this.lastMouse.x = (mouse.x - _this.lastMouse.x) * ...
HTML5 CSS3 text-shadow 文字阴影立体特效.rar
07-10
HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。
354个CSS3特效源码合集（HTML+CSS+JavaScript）
12-27
354个CSS3特效源码合集（HTML+CSS+JavaScript）： HTML5跨浏览器纯CSS工具提示特效， 炫酷CSS3鼠标滑过图片动画特效， 移动手机APP滑动手指切换图片特效，2种不可思议的纯CSS3 loading加载动画特效等等。
css3猫挂在线球上左右摇摆动画特效
06-11
一款有趣的css3猫挂在线球上左右摇摆动画特效，css3摇摆动画效果。
15种移动手机APP打开菜单过渡动画特效
12-13
这是一组移动手机（Mobile）APP打开菜单时的过渡动画特效。这组过渡动画共有15种效果，分别使用CSS3 animation动画来制作，这些动画均由线条和文字组成，效果非常炫酷。
纯CSS3实现动态Loading加载 仅6个span标签
08-23
之前我们介绍过几款具有各种动画效果的CSS3进度条，我们可以在CSS3进度条栏目中查看演示和下载源码。今天我们再介绍一款实现超级简单的CSS3进度条动画，该进度条是条形进度条，仅用了6个span标签和相应的CSS3代码实现了该CSS3条形进度条。
Hover.css纯CSS3鼠标滑过特效动画库
12-13
Hover.css是一款效果很酷的纯CSS3鼠标滑过特效动画库。Hover.css支持的元素包括超链接、按钮、logos、SVG和图片等。当鼠标滑过元素时有背景颜色变化效果、图标变化效果、阴影、抖动、旋转、折角等107种特效。
css 消息闪烁效果
轻风细雨_林木木
11-05 911
// 消息闪烁效果 .animImage { -webkit-animation-name: imageAnim; -webkit-animation-duration: 0.5s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease; -webkit-animat
消息 css 代码,CSS3 通知类消息动画
weixin_39746282的博客
08-04 263
CSS语言：CSSSCSS确定html,body {height: 100%;}.container {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;height: 100%;-webkit-box-pack: center;-webkit-justify-content: center;...
HTML+CSS3 旋转齿轮特效
weixin_44592738的博客
12-01 1824
HTML+CSS3 旋转齿轮特效
css继承
weixin_46693274的博客
03-12 101
css继承继承的局限性 继承的局限性 继承的局限性 多数边框类属性，比如Padding（补白），Margin（边界），背景和边框的属性,float都是不能继承的。(border属性是用来设置元素的边框的，它没有继承性) 块状、行内元素可继承： letter-spacing、word-spacing、line-height、color、font-family、font-size、font-style、font-weight、text-decoration 块状元素可继承：text-indent和t
JavaFX的CSS使用
haoranhaoshi的博客
11-29 2151
// 默认会选择CSS文件中和节点默认样式列表相同名称的样式 // 可通过label.getStyleClass()查看默认样式名称 // CSS文件路径"XXX.css"为同级目录适用，整个模块下寻找可用：getClass().getResource("/X/XX/XXX/resource/css/" + "XXX.css").toExternalForm() // 注意节点可以是自己，也可以...
HTML页面放个会动的风铃
最新发布
07-17
你可以使用CSS和JavaScript来实现在HTML页面上放一个会动的风铃。首先，你需要创建一个HTML文件，并在文件中添加以下代码： ```html <!DOCTYPE html> <html> <meta charset="UTF-8"> 动态风铃 .windchime { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值