CSS3 的动画应用

目的

需要强调一些文字
如果是每次一个提示框或者加粗加大的字体,用户不觉得框新鲜后,自然就会忽略掉

思路

以下代码都是在 chrome 中调试的

利用 CSS3 的动画
红底蓝字?蓝底红字?既然要追求刺激闪瞎狗眼,那就贯彻到底咯

demo1

先来个简单的红底蓝字/蓝底红字切换

  .text {font-size: 10rem;animation: shine 0.1s infinite;}@keyframes shine {from {background-color: #f00;color: #00f;}to {color: #f00;background-color: #00f;}}

8行了,要瞎了

demo2

弄点人间的颜色

  .text {font-size: 10rem;background-image: -webkit-linear-gradient(45deg, #39c5bb, #bdbf78);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: shine 3s infinite;}@keyframes shine {from {-webkit-filter: hue-rotate(0deg);}to {-webkit-filter: hue-rotate(-360deg);}}

CSS3 的动画应用相关推荐

8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
css3的动画特效--元素旋转（transition，animation）
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画鼠标悬停 div容器凸起放大显示.鼠标悬停div容器凸起放大显示效果代码结构 1. HTML代码 what? If you want to sell s ...
php人物行走,非常震撼的纯CSS3人物行走动画
今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真.其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多 ...

CSS3 的动画应用

目的

思路

demo1

demo2

CSS3 的动画应用相关推荐

最新文章

热门文章