CSS3
ChauncyWu
爱IT,爱这里
展开
-
CSS3 循环跳跃起伏的竖线(类似于语音助手动画)
根据CSS3 写一个类似于语音助手动画的 ,那种上下不停起伏的效果源码如下 语音助手 @keyframes yuying1{ 0%{ height: 0%; } 20%{ height: 50%; } 50%{ height: 100%; } 80%{ h原创 2017-01-25 19:52:40 · 6575 阅读 · 0 评论 -
CSS3 鼠标悬停显示另一面
根据CSS3中的3D特性,当鼠标放上去,反转显示另一面,源码如下:(代码没考虑浏览器兼容性问题,本代码以Chrome谷歌浏览器测试) .container{ width:200px; height:200px; box-shadow: 2px 2px 1px #999;原创 2017-01-25 20:15:35 · 1296 阅读 · 0 评论 -
CSS 彩虹字 动态彩虹字
1. 静态彩虹字// html<div class="this-div">Elegant and Beautiful</div>// css.this-div{ margin: 20px; width: 200px; background: linear-gradient(90deg, red, blue); -webkit-text-fill-c...原创 2019-05-14 17:58:17 · 5807 阅读 · 1 评论 -
CSS3 砖头墙面效果
转载至https://codepen.io/krischan77/pen/VOmJzO// HTML<div class="brick"></div>// CSS.brick { width: 300px; height: 300px; margin: 10px auto; background: linear-gradient(135deg, #...转载 2019-05-16 10:37:22 · 427 阅读 · 0 评论 -
CSS3 变色背景 动态边框
动态边框样式参考:https://juejin.im/post/5cdbc938f265da034d2a38c1#heading-2// cssbody { width: 100wh; height: 90vh; color: #fff; background: linear-gradient(-45deg, #EE7752, #E73C7E,...原创 2019-05-16 11:08:58 · 915 阅读 · 0 评论 -
CSS Vue 切换背景颜色
原文演示及链接:https://codepen.io/richardtallent/pen/yvpERW/<template> <div class="theme" :style="bgProps"> <div class="btn"> <input type="color" v-...原创 2019-05-18 14:31:11 · 3057 阅读 · 0 评论 -
js 吸顶 vue 吸顶
页面吸顶的效果, 实现有两种, 最快的一种是用position: sticky方法, 不过该方法尚存在兼容性问题, 使用的时候需加入兼容方法。使用方法跟position: fixed类似。 只要设定好吸顶时候的位置就行了。<div class="title title_sticky"> Title </div><style>.title { ...原创 2019-06-03 23:02:38 · 733 阅读 · 0 评论