opacity

SVG animation opacity on loop

由 ぐ巨炮叔叔 提交于 2019-12-03 07:14:56
问题 I would like to make an svg path's opacity to go from 0 to 100 back to 0 and to 100 on a continuous loop. So far i can get it to animate from 0 to 100 but not back again, Any ideas? Thanks 回答1: You have two separate animations - one for opacity increasing and one for it decreasing. Each begins when the other ends, but the first one also begins at 0s. Here's an example for a rect: <rect x="10" y="10" width="20" height="20"> <animate id="animation1" attributeName="opacity" from="0" to="1" dur=

Achieving white opacity effect in html/css

由 风流意气都作罢 提交于 2019-12-03 06:32:42
问题 is there a way to achieve this effect in a cross-browser compatible way without having to prepare separated images? Basically the frame on which text lays has a white overlay of 50% opacity.. I would like a solution that doesn't involve creating any other image in addition to the background but I don't know if it's possible! 回答1: Try RGBA, e.g. div { background-color: rgba(255, 255, 255, 0.5); } As always, this won't work in every single browser ever written. 回答2: If you can't use rgba due to

Transparent CSS background color

由 喜你入骨 提交于 2019-12-03 06:26:22
问题 I want to make the list menu disappear by using opacity without affecting font. Is it possible with CSS3? 回答1: now you can use rgba in CSS properties like this: .class{ background: rgba(0,0,0,0.5); } 0.5 is the transparency , change the values according to your design. Live demo http://jsfiddle.net/EeAaB/ more info http://css-tricks.com/rgba-browser-support/ 回答2: Keep these three options in mind (you want #3): 1) Whole element is transparent: visibility: hidden; 2) Whole element is somewhat

Fade In div when it's scrolled into viewport

由 馋奶兔 提交于 2019-12-03 06:12:11
Okay, so I've been searching for a simple way to fade in a div when a user scrolls it into view, but I can't find a straight solution. HTML <div class="container"> <div class="topdiv">This is a 100% height div. User scrolls down from here.</div> <div class="fadethisdiv">This content should be faded in once .fadethisdiv is [so many]px into the bottom of the viewport. Let's use 150px as an example.</div> </div> CSS .container { width:100%; height:600px; } .topdiv { height:100%; background-color:#09f; text-align:center; font-size:24px; } .fadethisdiv { height:100%; background-color:#36afff; text

CSS3 “Lifted Corners” Drop-Shadow with Opacity

由 ◇◆丶佛笑我妖孽 提交于 2019-12-03 06:04:41
问题 I have been playing with some CSS3 drop-shadow effects. I am pretty fond of the "lifted corners" effect but I ran into an issue when attempting to add opacity to the element. My question is: Is there a way to create the "lifted corners" effect on an element with opacity? http://jsfiddle.net/WAvZu/ .drop-shadow{ position:relative; float:left; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz

How does CSS opacity affect accessibility?

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-03 05:50:20
After browsing a number of Google and other SO articles, I've decided to ask my question plainly in hopes of a simple, direct answer. To add one further step to the discussion on Does opacity:0 have exactly the same effect as visibility:hidden : I understand that display:none and visibility:hidden hide elements from screenreaders and the like, but what about opacity:0 ? The table in one of the answers to the linked question notes that opacity participates in taborder , so does that necessarily mean it will be mapped to the accessibility API ? Setting a giant negative text-indent is typically

Gradient opacity on the bottom of div

由 人走茶凉 提交于 2019-12-03 05:20:39
I would like to create effect like on this image - gradient opacity on the bottom of content: How can i do it? Love Trivedi You can use this HTML <div class="content"> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br> Loriem ispsum is simply dummy text<br>

CALayer opacity animation

由 南楼画角 提交于 2019-12-03 04:55:26
I want to create a CALayer animation that gives sort of a 'flashy' effect. For that I'm trying to animate the 'opacity' property, but my problem is that I have no idea where to start and how to do it. Here is a graphical explanation of the animation: opacity | ___ 1 | | | | | | * repeatCount 0 |___| |_ . . . -------------------------> time |______| duration The opacity starts at 0, then animates to 1, then to 0 again (this 0-to-1-to-0 animation takes a number of seconds equal to duration). Then this process is repeated 'repeatCount' times. Here's some background on the code: float duration = .

CSS: lighten an element on hover

由 蹲街弑〆低调 提交于 2019-12-03 04:44:00
问题 Assuming an element is at 100% saturation, opacity, etc... how can I have its background become slightly lighter when it is hovered? The use case is that I'm allowing a user to hover over any element on a page. I don't want to go around determining each colors equivalent at 80% opacity. One method is to change the opacity: 0.4 but I only want the background to change. 回答1: It's a long time ago but you can do something like this: .element { background-color: red; } .element:hover { box-shadow:

Is the opacity and alpha the same thing for UIView [duplicate]

由 心不动则不痛 提交于 2019-12-03 04:43:34
This question already has answers here : UIView: opaque vs. alpha vs. opacity (2 answers) I want to use animation to change UIView's color to make it fade, however, somehow i can't access and set opacity, but i can set alpha. I wonder if alpha and opacity are the same? Search on the web and I didnt find a good answer. Thanks a lot for your help! alex Actually "opacity" means "value of alpha-channel" of your UIView . When a view is fully opaque this means its alpha = 1 , when a view is fully transparent (non-opaque) its alpha = 0 . As about properties of CALayer and UIView in Cocoa, yes, they
订阅 opacity