如何使用CSS3获得这种效果?
请问,我怎样才能得到一个效果像在右上角菜单,只有CSS3?(鼠标悬停->圆圈缩小并淡入,鼠标悬停->圆圈扩大并淡出) 我试着看了看代码,结果很混乱,nand找不到一个教程来解释这个。。。如何使用CSS3获得这种效果?,css,css-transitions,effect,Css,Css Transitions,Effect,请问,我怎样才能得到一个效果像在右上角菜单,只有CSS3?(鼠标悬停->圆圈缩小并淡入,鼠标悬停->圆圈扩大并淡出) 我试着看了看代码,结果很混乱,nand找不到一个教程来解释这个。。。 提前谢谢 这种效果是通过使用CSS转换来实现的。您有一个属性,而不是立即(悬停或淡出)更改该属性,而是随时间更改该属性 这里有一个很好的链接,帮助您满怀希望地实现目标。:) 我真的不明白你的评论“我试图查看代码,但代码很乱” 你有一个带有注释的完全缩进的CSS 直接从链接复制粘贴: /* Positionin
提前谢谢 这种效果是通过使用CSS转换来实现的。您有一个属性,而不是立即(悬停或淡出)更改该属性,而是随时间更改该属性 这里有一个很好的链接,帮助您满怀希望地实现目标。:)
我真的不明白你的评论“我试图查看代码,但代码很乱” 你有一个带有注释的完全缩进的CSS 直接从链接复制粘贴:
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0.4em;
border-radius: 50%;
font-size: 2.2em;
box-shadow: 0 0 0 30px transparent;
background: rgba(255,255,255,0.1);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: box-shadow .6s ease-in-out;
-moz-transition: box-shadow .6s ease-in-out;
-o-transition: box-shadow .6s ease-in-out;
-ms-transition: box-shadow .6s ease-in-out;
transition: box-shadow .6s ease-in-out;
width:1.1em !important;
}
/* Animate the box-shadow to create the effect */
.navbar .nav a:hover i,
.navbar .nav a:active i,
.navbar .nav a:focus i {
box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
-webkit-transition: box-shadow .4s ease-in-out;
-moz-transition: box-shadow .4s ease-in-out;
-o-transition: box-shadow .4s ease-in-out;
-ms-transition: box-shadow .4s ease-in-out;
transition: box-shadow .4s ease-in-out;
}
看一看,然后。它们与您需要的过渡/动画非常相似
下面是一个例子:
标记:
<a href="#set-3" class="hi-icon"></a>
你可能会被标记下来,因为你的链接似乎不起作用,所以很难获得所需功能的演示。基本上就是一个带有圆角的div,它是一个圆。CSS3动画上div的大小hover@Danield:你的评论很有帮助!请把它作为答案,这样我就可以接受了@Ivan-我刚刚发布了一个答案谢谢你的回答,但这只是脚本的一部分,当然:我还没有看到你复制/粘贴的内容,但故事并不全在那里,你可以在整个css中找到对.nav和.navbar(以及它们的a,I和:hover内容)的引用。。。也就是说,此复制/粘贴无法立即运行。。。
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: green;
box-shadow: 0 0 0 4px #FFF;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
}
.hi-icon:before {
content: "X"; /* place image here */
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon:hover:after {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
opacity: 0;
}
.hi-icon:after {
content: '';
pointer-events: none;
position: absolute;
top: -2px;
left: -2px;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
z-index: -1;
background: #FFF;
-webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
-moz-transition: -moz-transform 0.2s, opacity 0.3s;
transition: transform 0.2s, opacity 0.3s;
}