用html5可以做出水墨晕开的效果吗

html-css029

用html5可以做出水墨晕开的效果吗,第1张

.circle { width: 200px height: 200px position: absolute top: 50% left: 50% margin: -100px 0 0 -100px }

.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .center { position: absolute left: 50% top: 50% margin: -30px 0 0 -30px width: 60px height: 60px border-radius: 50% background-color: #008cf0 }

.center { position: absolute left: 50% top: 50% margin: -35px 0 0 -35px width: 70px height: 70px border-radius: 35px background: #008cf0 text-align: center line-height: 70px color: #EAEAEA font-size: 16px  font-family:cursive

}

.circle1 { -webkit-animation: circle 3s linear infinite animation: circle 3s linear infinite }

.circle2 { -webkit-animation: circle 3s linear 0.8s infinite animation: circle 3s linear 0.8s infinite }

.circle3 { -webkit-animation: circle 3s linear 1.6s infinite animation: circle 3s linear 1.6s infinite }

 @-webkit-keyframes circle {

 from {

 opacity:1

 -webkit-transform:scale(0)

}

 to {

 opacity:0

 -webkit-transform:scale(3)

}

} <div class='circle'>

  <div class='circle1'>&nbsp</div>

  <div class='circle2'>&nbsp</div>

  

  <div class='circle3'>&nbsp</div>

  <div class='center'>AA</div>

</div>

类似于这样

B/S架构的情况下, 前端可以使用 html5 canvas 来绘制, 或者使用Flash 来绘制

注意:flash逐渐被html5取代.

C/S架构的情况下,前端可以使用swing,javaFX来实现

但主要还是使用图片,把图片绘制成背景. 需要什么风格,就换成什么风格.

也有第三方的外观库可以使用,比如 BeautyEye, 就非常漂亮. 风格是仿苹果的.

综合上述, 主要实现的技术不是java ,而是美术工程师啊.

我也喜欢水墨风格. 就在自己练习的软件里,也加入了喜欢的水墨图片