Html 仅使用涟漪动画CSS的环
问题 尝试获得一个特定的动画,其中有两个环从图像上的形状上涟漪/辐射。我找不到确切的动画 代码笔链接 这是一幅粗糙的图画,但它给了你一个想法。我想要像在我的代码笔里一样,在叶子的圆上,而不是整个圆上,有涟漪的戒指。它将停止悬停时的动画,圆圈将展开,其中包含文本 代码 HTMLHtml 仅使用涟漪动画CSS的环,html,css,css-animations,Html,Css,Css Animations,问题 尝试获得一个特定的动画,其中有两个环从图像上的形状上涟漪/辐射。我找不到确切的动画 代码笔链接 这是一幅粗糙的图画,但它给了你一个想法。我想要像在我的代码笔里一样,在叶子的圆上,而不是整个圆上,有涟漪的戒指。它将停止悬停时的动画,圆圈将展开,其中包含文本 代码 HTML <div id="tree-wrapper"> <img class="tree" <div><img class="tree" title="source: imgur.com
<div id="tree-wrapper">
<img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="ripple"></div>
<div class="circle-top-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Training</u><br />Personal, Corporate
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-top-right" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Consulting</u><br />Project, Organization
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
<a class href="http://veddma.net/our-services/accreditation">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Accreditation</u><br />Professional Management Architects
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Tools</u><br />
</p>
<span></span>
</div>
</div>
</div>
</a>
</div>
您可以使用:
边框样式:双重
,填充
,背景剪辑
*{
框大小:边框框;
}
#树皮{
位置:相对位置;
宽度:668px;
身高:551px;
保证金:0自动;
}
#树包装纸{
保证金:0;
填充:0;
}
.树{
显示:块;
左边距:自动;
右边距:自动;
边缘底部:50px;
边缘顶部:75px;
}
.在左上角画圆圈,
.在右上角画圆圈,
.向左转,
.圈出机器人,对吗{
游标:默认值;
-webkit触摸标注:无;
-webkit用户选择:无;
-khtml用户选择:无;
-moz用户选择:无;
-ms用户选择:无;
用户选择:无;
溢出:隐藏;
字体大小:9px;
-webkit背面可见性:隐藏;
位置:绝对位置;
背景:#b20312;
宽度:68px;
高度:68px;
边界半径:50%;
过渡:全部。5s轻松进出;
保证金:0;
文本对齐:居中;
背景剪辑:内容框;
填充:10px;
边框:双0px#b20312
}
.左上方圆圈:悬停,
.右上方圆圈:悬停,
.向左旋转机器人:悬停,
.向右旋转机器人:悬停{
宽度:170px;
高度:170px;
颜色:透明;
边框:双20px#b20312;
}
.在左上角画圆圈{
最高:23.9%;
左:11.2%;
}
.在右上角画圆圈{
最高:13%;
左:54.5%;
}
.向左转一圈{
最高:73.8%;
左:0;
}
.圈出机器人,对吗{
最高:53.5%;
左:91.2%;
}
.左上方圆圈:悬停,
.右上方圆圈:悬停,
.向左旋转机器人:悬停,
.向右旋转机器人:悬停{
转换:转换(-60px,-60px);
}
.circle\uu包装{
显示:表格;
宽度:100%;
身高:100%;
}
.标题(副标题)持有人{
显示:块;
填充:30px0;
位置:相对位置;
}
.圈出内容{
显示:表格单元格;
填充:1em;
垂直对齐:中间对齐;
}
段落{
线高:25px;
显示:无;
字体大小:15px;
颜色:白色;
文本对齐:居中;
垂直对齐:中间对齐;
}
.右上方圆圈:悬停。第,
.向右旋转机器人:悬停。第,
.左上方圆圈:悬停。第,
.向左旋转机器人:悬停。第{
显示:块;
}
.右上方圆圈:悬停跨度,
.向右旋转机器人:悬停范围,
.左上方圆圈:悬停跨度,
.向左旋转机器人:悬停范围{
显示:无;
}
/*@导入url(http://fonts.googleapis.com/css?family=Norican);*/
.涟漪{
-webkit转换:translateZ(0);
-moz变换:translateZ(0);
变换:translateZ(0);
}
h1{
/*显示:块*/
/*字体大小:50px;
字体系列:“诺里坎”,草书*/
/*颜色:白色*/
/*背景图像:径向梯度(47px50%、b20312 0%、b20312 50%、rgba(178,3,18,0)50px时为10px)*/
/*背景色:#45C2C5*/
/*背景色:#fa0*/
/*边界半径:50%*/
/*盒影:3p5px0RGBA(0,0,0,0.15)*/
/*位置:绝对位置*/
/*利润率:-20px0-20px*/
/*文本阴影:0.2px 0#8ed2d4,2px 3px 15px rgba(0,0,0,0.5)*/
/*过渡:所有5s易于输入输出*/
}
html:悬停h1{
/*转换:translateY(-200px)*/
}
涟漪
.ripple:之前,
.ripple:之后{
显示:块;
边界半径:2px;
宽度:2倍;
高度:2倍;
-webkit动画:rip 4s无限;
-moz动画:rip 2s无限;
}
.涟漪{
位置:绝对位置;
z指数:-1;
最高:28%;
左:15%;
}
.ripple:之前,
.ripple:之后{
内容:'';
位置:绝对位置;
}
.瑞波:以前{
-webkit动画延迟:4s;
-moz动画延迟:2s;
}
.ripple:之后{
-webkit动画延迟:.8s;
-moz动画延迟:.8s;
}
个人、公司培训
咨询
项目、组织
工具
您可以像试图使用的那样使用动画
,但不要在:before
和:before
上使用框影
:after伪元素使用简单的边框
下面是一个简单的例子;只要在圆圈上停下来就行了。(请注意,它没有所有前缀属性a la-webkit-
等)
.circle{
高度:100px;
宽度:100px;
边界半径:50%;
背景色:红色;
位置:相对位置;
顶部:100px;
左:300px;
-webkit过渡:高度。25秒宽,宽度。25秒宽;
过渡:高度。25秒宽,宽度。25秒宽;
-webkit转换:翻译(-50%,-50%);
转换:翻译(-50%,-50%);
}
.圆圈:悬停{
高度:150像素;
宽度:150px;
}
.圆圈:之前,
.圆圈:之后{
内容:'';
显示:块;
位置:绝对位置;
顶部:0;右侧:0;底部:0;左侧:0;
边界半径:50%;
边框:1px纯红;
}
.圆圈:之前{
-webkit动画:线性无限;
动画:线性无限;
}
.圆圈:之后{
-webkit动画:涟漪2s线性1s无限;
动画:涟漪2s线性1s无限;
}
.圆圈:悬停:之前,
.圆圈:悬停:之后{
-webkit动画:无;
动画:无;
}
@-webkit关键帧纹波{
0%{-webkit转换:缩放(1);}
75%{-webkit变换:比例(1.75);不透明度:1;}
100%{-webkit变换:比例(2);不透明度:0;}
}
@关键帧波纹{
0%{变换:比例(1);}
75%{变换:比例(1.75);不透明度:1;}
100%{变换:比例(2);不透明度:0;}
}
我可能没有正确解释。我想让戒指做涟漪动画,而不是
* {
box-sizing: border-box;
}
#tree-wrapper{
position: relative;
width: 668px;
height: 551px;
margin: 0 auto;
}
#tree-wrapper p{
margin: 0;
padding: 0;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 75px;
}
.circle-top-left,
.circle-top-right,
.circle-bot-left,
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
width: 58px;
height: 58px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0;
text-align: center;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
width: 200px;
height: 200px;
padding: 0.6em 2.5em;
color: transparent;
}
.circle-top-left {
top: 23.9%;
left: 11.2%;
}
.circle-top-right {
top: 13%;
left: 54.5%;
}
.circle-bot-left {
top: 73.8%;
left: 0;
}
.circle-bot-right {
top: 53.5%;
left: 91.2%;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
transform: translate(-60px, -60px);
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
/*@import url(http://fonts.googleapis.com/css?family=Norican);*/
@-webkit-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 200px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}
}
@-moz-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
/* 50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.5);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
@-moz-keyframes rip-lg
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 240px 200px rgba(178,3,18, 0.5),
0 0 210px 210px transparent,
}
/* 75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
.ripple {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
h1 {
/*display:block;*/
/*font-size:50px;
font-family: 'Norican', cursive;*/
/*color: white;*/
/*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
/*background-color: #45C2C5;*/
/*background-color:#fa0;*/
/*border-radius: 50%;*/
/*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
/*position: absolute;*/
/* margin:-20px 0 0 -20px;*/
/* text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/
/* transition: all 5s ease-in-out;*/
}
html:hover h1 {
/*transform: translateY(-200px);*/
}
.ripple,.ripple:before,.ripple:after {
display:block;
border-radius:2px;
width:2px;
height:2px;
-webkit-animation:rip 4s infinite;
-moz-animation:rip 2s infinite;
}
.ripple {
position:absolute;
z-index:-1;
top: 28%;
left: 15%;
}
.ripple:before,.ripple:after {
content:'';
position:absolute;
}
.ripple:before {-webkit-animation-delay: 4s;-moz-animation-delay: 2s;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;}