CSS3 动画
关注
分享
扫一扫
文章平均质量分 95
福州司马懿
大家如果觉得文章有帮助，给我个关注。谢谢大家 (+_+)，失业了球介绍工作
展开
-
CSS3 霓虹灯文字
transform对行内元素无效，可以使用变换（transform）的元素必须是块级元素或者原子内联级元素。单纯的内联元素是不能应用变换的，因此必须把span转成行内块。<!DOCTYPE html><html><head><meta charset="utf8"><style>body { /** 利用flex布局，让...原创 2019-08-29 20:25:32 · 1472 阅读 · 4 评论 -
CSS3 文本溶解效果
背景颜色为白色的效果背景颜色设为灰时的效果<!DOCTYPE html><html><head><meta charset="utf8"><title>文本溶解效果</title><style>#container{ margin: 3rem; /** contrast指的是图像的对比度...原创 2019-08-29 15:33:12 · 1967 阅读 · 0 评论 -
CSS3 花屏文字
原理图想要看原理图的话，仅需要加上如下样式.scanline { background-color: red;}.blurtext:before { background-color: green;}.blurtext:after { background-color: blue;}可以看出扫码线基本都在文字下方，然后瞬间弹跳两次，最终又回到文字下方偏移的蓝色矩形也...原创 2019-08-27 14:08:02 · 1197 阅读 · 0 评论 -
CSS3 骨折文字
<!DOCTYPE html><html><head><title>Fracture Text</title><meta charset="utf8"><style>body { background: WhiteSmoke;}#fractureText { color: black; ...原创 2019-08-26 16:05:20 · 1049 阅读 · 0 评论 -
CSS3 常见切换动画 & 零宽断言匹配
&amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;html lang=&amp;amp;amp;amp;quot;en&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;head&am原创 2018-11-14 10:47:10 · 2330 阅读 · 0 评论 -
CSS3 流动边框（仿王者荣耀等待效果）的三种实现方式
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;&amp;gt;&amp;lt;style&amp;gt;:root { --b原创 2018-11-06 18:36:28 · 14052 阅读 · 4 评论 -
CSS3 倒计时 / 技能冷却
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;&amp;gt;&amp;lt;style&amp;gt;:root { --c原创 2018-11-06 18:30:47 · 2641 阅读 · 0 评论 -
CSS3 图片扫光/辉光
<!DOCTYPE html><html><head><meta charset="utf8"><title>流光/扫光效果</title><style>:root { --stream-effect-width: 25em; --stream-effect-he原创 2018-11-02 15:25:17 · 2981 阅读 · 0 评论 -
CSS3 波纹定位
SVG的定位图标可以使用 “在线SVG编辑器”并从常用图形中选取也可以从http://www.bootcss.com/p/font-awesome/design.html ，通过文字库的方式使用。&lt;html&gt;&lt;head&gt;&lt;style&gt;:root { --ripper-width: 3em; --ripper-height: 3em;原创 2018-11-01 18:50:54 · 1179 阅读 · 0 评论 -
CSS3&JavaScript 电池充电
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;meta charset="utf-8"&gt;&lt;head&gt;&lt;style&gt;body { padding: 1em;}/* 这是原创 2018-10-29 16:23:33 · 3400 阅读 · 0 评论 -
CSS3 帧动画（Sprite，直译叫雪碧图）
CSS雪碧CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。原理CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你原创 2017-02-22 17:20:48 · 12990 阅读 · 0 评论 -
CSS3 弹簧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style> body{原创 2017-01-30 20:27:04 · 1555 阅读 · 0 评论