两个有趣的效果实现

1.实现如下效果:

方法一:使用两个div,分别设置背景色,并设置子元素倒角即可。

方法二:如果只用一个div,请问怎么实现?

.cont {

float:left;

margin:50px;

width:500px;

padding: 20px;

height:200px;

outline: 20px solid #ddd;

border-radius:20px;

background: #78c9db;

box-shadow:0 0 0 9px #ddd;

}

使用该方法前提:(√2-1)*border-radius的值 < box-shadow的值 < outline的值。

2. 实现蚂蚁行军的效果(IE10开始支持)

@keyframesant{

to{background-position:100%;}

}

.cont{

width:500px;

height:200px;

padding:2em;

border:1px solid transparent;

background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(-45deg,#000,#000 25%,#fff 0,#fff  50%) 0/.6em .6em;

animation:ant 12s linear infinite;

}

该文作为学习笔记,不做商用,参考CSS相关文献,在此感谢作者。

你可能感兴趣的:(两个有趣的效果实现)