css3常用动效以及总结

时间: 2019-02-17阅读: 641标签: css3

CSS3 文本效果:

box-shadow:盒子阴影,可以给卡片添加提高美化效果。可广泛应用于内容展示页面。

<div>
  <div>
    <h1>7</h1>
  </div>

  <div>
    <p>January 7, 2017</p>
  </div>
</div>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

效果如下:
技术图片


<div>
  <img src="rock600x400.jpg" alt="Norway">
  <div>
    <p>Hardanger, Norway</p>
  </div>
</div>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}

效果如下:
技术图片


css3 过渡:

最简单的过渡是一个div,给它加上如下代码,便可以从宽度100px华丽的过渡到宽度为300px。

div
{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}

div:hover
{
    width:300px;
}

那么再来点高级的,我们经常在页面上看到炫酷的动效,其实仔细分析,你会发现它并不难做,好多华丽的效果甚至都用不到js就能实现,比如下面这个例子。

<div>
        <div>css3</div>
        <div>过渡</div>
    </div> 
.box {
    width: 100px;
    height: 60px;
    background: #BCEE68;
    color:white;
    font-weight:bold;
    -webkit-transition: width 1s, height 1s,font-size 1s, color 1s,-webkit-transform 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s, height 1s, color 1s,font-size 1s, transform 1s;
}

.box:hover {
    width: 150px;
    height: 90px;
    background:#9B30FF;
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    font-size:20px;
}
.describe{
    text-align:center;
}

效果非常炫酷,不是静态所以就不上图了,有兴趣的自己试下。可以用作展示页,也可以用作一行导航菜单,会反转变样式的一组菜单很时尚的嘿嘿。

来自:https://www.cnblogs.com/ym7583306/p/10390236.html


链接: http://www.fly63.com/article/detial/2044

理解 CSS3中 object-fit

在检查网站的时候发现图片给于固定宽的时候,会压缩变形,要保证,img元素不变形,宽高比不变。从别人那里了解到object-fit,以前从未用过,所以就总结给自己看看,理解一下。

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

用CSS3实现无限循环的无缝滚动

使在页面中循环展示信息的功能之前一般是用js来实现的,那么用CSS3该如何实现实现呢;使用CSS来进行动画的展示,会让页面显得更加流畅。如果能用CSS实现,可以尝试尽量用CSS实现下

css3中计数器的使用

css3里有个很强大的功能,就是计算器,使用它可以很方便对页面中的任意元素进行计数,实现类似于有序列表的功能。与有序列表相比,突出特性在于可以对任意元素计数,同时实现个性化计数。

css3特效_CSS3弹跳Loading加载动画特效的实现

今天给大家分享一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分不错。尤其在移动端中使用,基本代替了图片来实现加载的效果。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全