div { background:linear-gradient(to right, red , blue) } div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */ div { background:linear-gradient(to top, red , blue) } 分别产生“从右到左”、“从左到右”、“从上到下”、“从下到上”的“红色–绿色”渐变 ...
background:linear-gradient( 方向to(left\right\top\bottom,也可以使用度数), 渐变起始颜色, 渐变终止颜色) 径向渐变(radial径向) radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果 background:radial-gradient( 150px at center, yellow,green);围绕中心点渐变,半径是150px,从黄到绿做渐变 必要的元...
background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA); transition: background-color 400ms ease; } .panel:hover { background-color: #DDD; } 1. 2. 3. 4. 5. 6. 7. 8. 9. 如果渐变本身是连续的,根据其他人的试验结果,你还可以指定过渡属性为background-position。这是第二...
.panel { background-color: #000; background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA); transition: background-color 400ms ease; } .panel:hover { background-color: #DDD; } 如果渐变是持续的,你可以过渡background-position,就像这里写的,否则,你的最后手段是创建两个元素,一个...
transition是一个简写属性,它可以一次性设置四个过渡相关的属性,四个属性值分别对应transition-property(指定要应用过渡的 CSS 属性)、transition-duration(定义过渡动画总时长)、transition-timing-function(定义动画速度曲线)、transition-delay(设置动画开始前的等待时间)。
线性渐变Linear Gradient 语法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 实例-从上到下 从上到下(默认情况下) // css .grad1 { height: 200px; width: 200px; background-color: red; /* 浏览器不支持时显示 */ ...
径向渐变:background-image: radial-gradient(red, yellow, green); background-image: linear-gradient(#e66465, #9198e5); background-image: linear-gradient(to bottom right, red, yellow); background-image: linear-gradient(-90deg, red, yellow); 1 2 3 文本效果 text-shadow box-shadow text-ove...
.element {width:100px;height:100px;position:relative;background: linear-gradient(#C7D3DC,#5B798E); } .element .inner {content:'';position:absolute;left:0;top:0;right:0;bottom:0;background: linear-gradient(#DDD,#FAFAFA); opacity:0; transition: opacity1s linear;}.element:hover .inner {...
{ position: relative; margin-bottom: 30px; .normal, .active { display: flex; align-items: center; img { width: 80px; padding-right: 20px; } h4 { flex: 2; } } .active { opacity: 0; position: absolute; top: 0; } } } .item-wrapper:hover { background: linear-gradient(90deg,...
一个最简单使用transition的方法就是和CSS伪元素一起用,比如:hover。注意我们在指定属性名字,transition的时长,以及默计时函数,linear。 .element { height: 100px; transition: height 2s linear; } .element:hover { height: 200px; } 1. 2. 3. ...