【CSS】CSS特效集锦,视觉魔法的碰撞与融合(一)

  • 时间:
  • 浏览:3
  • 来源:幸运快3_快3代理_幸运快3代理

前言

在本文中我讲述了7种CSS的特效,它们你爱不爱我看起来不必惊艳,太满太满认为却足够传达本文的理念:编写其他特殊的CSS样式的刚刚须要不拘于常理,要用特殊的认识深度看待标签和样式属性,从而用「绕个弯」的法律最好的妙招达到效果。

一.浮光掠影

首先亲戚亲戚一帮人看第兩个 多多 实现效果:在鼠标浮动到图片后面 时,让一片白影一闪而过。

实现思路

  1. 画兩个 多多 竖直的长方形的白色div,设置opcity将其变为半透明

  2. 借助transform:skewX将长方形变成等高的平行四边形

  3. 白条div绝对定位,外层div相对定位,一结束英语 英语 left属性默认是0

  4. 在:hover伪元素中修改left值,累似 left=3000px(超出图片长度),通过transition指定left和时间,形成过渡

图示

HTML

<div class="flash">
        <div class="flash-bar"></div>
        <img src="{图片地址}" />
</div>

CSS

.flash {
   position: relative;
   width: 30000px;
}
.flash img {
    width: 3000%;
}
.flash-bar {
   position: absolute;
   left:-3000px;
   width: 20px;
   height: 3000%;
   background: #fff;
   opacity: 0.5;
   transform: skewX(-300deg);
   transform-origin: 0 3000%;
}
.flash:hover .flash-bar {
  left:900px;
  transition: left ease-in-out 1s;
}

二.发光球体

实现思路

让兩个 多多 球体散发光芒,一结束英语 英语 好像有点硬蒙,太满太满换个深度思考一下,光芒太满太满另五种颜色的box-shadow而已,太满太满亲戚亲戚一帮人通过animation让它动起来就好了

HTML

<div class="light"></div>

CSS

@keyframes light {
    from {
       box-shadow:0px 0px 4px #f00;
    }
    to {
      box-shadow:0px 0px 16px #f00;
    }
}
.light {
  margin:3000px;
  width: 3000px;
  height: 3000px;
  margin:20px;
  border-radius: 3000%;
  animation: light 2s ease-in-out infinite alternate;
}

三.圆环进度条

很显然,圆框是通过border去实现的,但具体为什么我么我会 做呢?

其他进度条,细胞层上看它是由兩个 多多 div圆框组成,实则不然,它是由左右兩个 多多 半圆的div组成的,其中兩个 多多 div转动13000度,太满太满太满太满div再转13000度。看一下下面的例子你就明白了,亲戚亲戚一帮人把颜色调成蓝绿色和红色,以对比

亲戚亲戚一帮人一步一步来解释,首先亲戚亲戚一帮人整个圆的内外部是兩个 多多 正方形,左右由兩个 多多 div,div-left和div-right组成,各占一半,分别放左半圆和右半圆。太满太满兩个 多多 div分别设置overflow:hidden实现溢出隐藏,太满太满的结果是,左边的圆的右半边被隐藏了,右边的圆的左半边被隐藏了。

 

太满太满更重要的是,兩个 多多 将会溢出被隐藏的半圆分别被涂上了蓝绿色和红色,而这麼 溢出的兩个 多多 半圆的圆框则是透明的。太满太满亲戚亲戚一帮人看过的初始的空进度条人太好是下面太满太满的

 

这种 个多多 圆框转动的规则是:

  1. 左边的蓝绿色圆框先转完0度到13000度,这段时间里红色圆框是不动的

  2. 接下来红色圆框转完13000度到3300度,这段时间里蓝框则是不动的

(备注:亲戚亲戚一帮人约定最后面 为0/3300度)

转到45度角的刚刚进度条是下面太满太满子

转角超过13000时也是同理的,不过其他刚刚就轮到红色框转动了,蓝框保持不动

代码如下:

HTML

<div class="progress">
    <div class="wrapper-circle left">
        <div class="circle"></div>
    </div>
    <div class="wrapper-circle right">
        <div class="circle"></div>
    </div>
</div>

CSS

@keyframes left_cirlce_spin {
    0%,3000% {
      transform: rotate(-45deg);
    }
    3000%{
      transform: rotate(135deg); 
    }
}
@keyframes right_cirlce_spin {
    0% {
      transform: rotate(45deg);
    }
    3000%,3000%{
      transform: rotate(225deg); 
    }
}
.progress {
    overflow: hidden;
    width: 3000px;
    height: 3000px;
}
.progress .wrapper-circle {
    overflow: hidden;
    width: 3000%;
    height: 3000%;
}
.left {
    float: left;
}
.right {
    float: right;
}
.progress {
    margin: 20px;
}
.progress .circle {
    border-radius: 3000%;
    width: 90px;
    height: 90px;
}
.progress .left .circle {
    float: left;
    border: 5px solid red;
    border-top-color: transparent;
    border-left-color: transparent;
    animation: left_cirlce_spin 4s linear infinite;
}

.progress .right .circle {
    float: right;
    border: 5px solid red;
    border-top-color: transparent;
    border-right-color: transparent;
    animation: right_cirlce_spin 4s linear infinite;
}

四.三角形

其他话题将会是老生常谈了,我第兩个 多多 了解的比较有趣的CSS实现太满太满它。它是通过兩个 多多 宽高设置为0的div的border去实现的。

要实现三角形,首先亲戚亲戚一帮人要改变心里对border特征的刻板认知。border人太好是兩个 多多 等腰梯形而全是 长方形

 

当width和height被减小为0,这麼 border的刚刚,border就从等腰梯形变成了等腰三角形:

 

太满太满亲戚亲戚一帮人须要哪一块三角形,就把剩余的帕累托图border都设为transparent(透明)就可不都还可以 了

代码很简单,这里就不加赘述了。

五.有色到透明的渐变

下面这张图是从知乎的发现栏目上摘来的,很显然它是利用渐变去实现的。思路也很简单,主太满太满要有两方面的认知:

    • 这张图人太好可不都还可以 分成两帕累托图,右边控制图形和渐变,左边太满太满一张纯色背景,和渐变无关

    • 透明transparent也是五种颜色,也是渐变可不都还可以 设置的

 

代码如下

HTML

<!-- 有色到透明的背景渐变 -->
<div class="background-gradient">
  <div class="mask"></div>
</div>

CSS

.background-gradient {
    background: rgb(44, 136, 207);
    position: relative;
    width: 30000px;
    height: 3000px;
}
.background-gradient .mask {
    background-image: linear-gradient(to right, rgb(44, 136, 207), transparent), url("https://pic1.zhimg.co
    m/3000/v2-6c5aa23004a93b7fbaf903e35300543d7b_hd.jpg");
    background-position:center;
    background-blend-mode:normal;
    position: absolute;
    height: 3000%;
    width: 13000px;
    right: 0;
}

六.模糊效果和毛玻璃效果

知乎上,在发表文章或回答时引入链接就会有下面模糊的效果。它人太好是由CSS3的filter属性去实现的

 <img class="blur" src="https://pic1.zhimg.com/3000/v2-6c5aa23004a93b7fbaf903e35300543d7b_hd.jpg" />

 CSS

.blur {
    width: 3000px;
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
    
    -webkit-filter: blur(2px); /* Chrome, Opera */
       -moz-filter: blur(2px);
        -ms-filter: blur(2px);    
            filter: blur(2px);
    
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
}

效果如下

要注意兼容,兼容各个浏览器的法律最好的妙招如上图所示,顺便一提这份代码由大神张鑫旭提供,链接如下

CSS滤镜让图片模糊(毛玻璃效果)

模糊效果和IOS中的毛玻璃效果还是不一样的。(人太好我也感觉毛玻璃效果比起模糊效果会漂亮太满太满),而IOS的毛玻璃效果可不都还可以 借助backdrop-filter去实现,链接如下,亲戚亲戚一帮人可不都还可以 自行尝试

backdrop-filter

CSS原生毛玻璃效果

不过注意,目前backdrop-filter在较高版本的浏览器才会支持

七.斜角标签

有的刚刚,在显示其他时效性的UI数据的刚刚,累似 兩个 多多 商品卡片的打折标签的刚刚,亲戚亲戚一帮人将会会须要在卡片上显示兩个 多多 等腰梯形,这麼 亲戚亲戚一帮人该为什么我么我会 实现呢?

 

实际上,亲戚亲戚一帮人可不都还可以 通过兩个 多多 横向的div通过transform:rotate逆时针旋转45度角得到它。如下图所示,同须要注意给外层div设置overflow:hidden实现溢出隐藏。

 

除此之外,还须要进行简单的计算,将会旋转上去后,形成的是兩个 多多 等腰直角三角形,太满太满标签div的长度需太满太满它距离外层div顶部距离的√2(根号2)倍,如上图所示。

代码如下:

HTML

<div class="label">
     <div class="label-bar">打折</div>
     <img src="https://pic1.zhimg.com/3000/v2-6c5aa23004a93b7fbaf903e35300543d7b_hd.jpg" />
</div>

CSS

.label {
    position: relative;
    overflow: hidden;
}
.label-bar {
    text-align: center;
    background: red;
    position: absolute;
    top:3000px;
    left: 0px;
    width: 141px;
    height:20px;
    transform-origin: 0 3000%;
    transform: rotate(-45deg);
}

技术总结

OK,下面进行CSS3的技术(坑点)总结~

1.转换行为(rotate,skew等)的2D坐标系是太满太满的,Y轴是向下的!原点是div的左上角。根据transform-origin可不都还可以 设置转换(累似 旋转将会倾斜)的参考点,默认的参考点是(3000%,3000%),即中心。如下图所示

2.改变大小的transform法律最好的妙招scale不接受百分比! 这麼 是用数字表示倍数,如transform:scale(2),

transform:scale(0.5)等等

3.skewX和skewY在2D参考系里共要具有倾斜的效果,倾斜刚刚变成深度不变的平行四边形。太满太满skewX和skewY具有相反的差异,skewX是X轴方向不动,Y轴方向逆时针倾斜, skewY是Y轴不动,X轴方向向顺时针倾斜,两者连倾斜的方向全是 不一样的,具体可不都还可以 参考

https://link.zhihu.com/?target=http%3A//www.lvyestudy.com/css3/css3_9.5.aspx

4.transition和animation在使用最明显的区别是那此?

  1. transition的使用是很受限制的,而animation非常灵活,在不借助JS的前提下,它这麼 在CSS的伪元素中起相应的作用,将会transition这麼 对地处变化的属性起作用,而除了伪元素外,其他元素挑选器会突然出现后面 的挑选器覆盖前面挑选器属性的间题,到最后属性这麼 兩个 多多 值,为什么我么我会 实现过渡呢?当然就这麼 能了。

  2. 在不借助JS的前提下,transition这麼 来一遍,而animation可不都还可以 指定次数:1次,2次或无数次(指定infinite表示无限次数),还可不都还可以 指定方向(altertive,表示播放结束英语 英语 后倒退播放)

  3. 甚至animation还可不都还可以 通过百分比指定每一阶段的细节变化,其他点transition就做这麼 了

本文完

知乎主页和专栏

知乎主页:https://www.zhihu.com/people/peng-hu-wan-56/activities

知乎专栏:  https://zhuanlan.zhihu.com/c_135367198

猜你喜欢

TechWeb.com.cn

先是7nm产能供不应求,5nm产能也被预定了,现在就连前两代的工艺也面临缺货了,16/12nm产能的交付期也延长了。针对6家会员退出Libra(天秤币)学精,美国财政部长史蒂芬

2019-10-14

Alphabet旗下Sidewalk与多伦多建智慧城市 耗资将超10亿美元

【TechWeb报道】10月18日消息,据国外媒体报道,谷歌母公司Alphabet旗下的智慧教育城市子公司SidewalkLabs,日前回应了将与加拿大城市多伦多一块儿打造一片

2019-10-14

D. Meadowcroft数据,D. Meadowcroft新闻,D. Meadowcroft视频,D. Meadowcroft身价

首页新闻视频直播数据APP懂球号广告企业媒体合作D.MeadowcroftD.Meadowcroft俱乐部:维克诺域治国籍:英格兰身高:193CM位置:后卫年龄:34岁体重:7

2019-10-14

M. Assoumani数据,M. Assoumani新闻,M. Assoumani视频,M. Assoumani身价

首页新闻视频直播数据APP懂球号广告媒体合作M.AssoumaniM.Assoumani俱乐部:尼斯B队国籍:法国身高:CM位置:中场年龄:体重:KG号码:号生日:惯用脚:比赛

2019-10-14

王者荣耀2018年度评选活动之王者最会玩投票地址

王者荣耀2018年度评选活动现在日后开启了投票活动,玩家可不须要为当时人最喜欢的精彩瞬间进行投票了,下面我们都都我们都都来看下这次活动的投票地址吧。本次的活动一共有六个奖项评选

2019-10-14