Loading 动画 - 01
- @keyframes bouncing-loader {
- from {
- opacity: 1;
- transform: translateY(0);
- }
- to {
- opacity: 0.1;
- transform: translateY(-1rem);
- }
- }
- .bouncing-loader {
- display: flex;
- justify-content: center;
- }
- .bouncing-loader > div {
- width: 1rem;
- height: 1rem;
- margin: 3rem 0.2rem;
- background: #8385aa;
- border-radius: 50%;
- animation: bouncing-loader 0.6s infinite alternate;
- }
- .bouncing-loader > div:nth-of-type(2) {
- animation-delay: 0.2s;
- }
- .bouncing-loader > div:nth-of-type(3) {
- animation-delay: 0.4s;
- }
- <div class="bouncing-loader">
- <div></div>
- <div></div>
- <div></div>
- </div>
loading 效果图 1
Loading 动画 - 02
- @keyframes donut-spin {
- 0% {
- transform: rotate(0deg);
- }
- 100% {
- transform: rotate(360deg);
- }
- }
- .donut {
- display: inline-block;
- border: 4px solid rgba(0, 0, 0, 0.1);
- border-left-color: #7983ff;
- border-radius: 50%;
- width: 30px;
- height: 30px;
- animation: donut-spin 1.2s linear infinite;
- }
- <div class="donut"></div>
loading 效果图 2
蚀刻文本
- .etched-text {
- text-shadow: 0 2px white;
- font-size: 1.5rem;
- font-weight: bold;
- color: #b8bec5;
- }
- <p class="etched-text">I appear etched into the background.</p>
蚀刻文本效果图
渐变字
- .gradient-text {
- background: -webkit-linear-gradient(skyblue, cornflowerblue);
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- }
- <p class="gradient-text">Gradient text</p>
image.png
悬停下划线动画
- .hover-underline-animation {
- display: inline-block;
- position: relative;
- color: #0087ca;
- }
- .hover-underline-animation::after {
- content: '';
- position: absolute;
- width: 100%;
- transform: scaleX(0);
- height: 2px;
- bottom: 0;
- left: 0;
- background-color: #0087ca;
- transform-origin: bottom right;
- transition: transform 0.25s ease-out;
- }
- .hover-underline-animation:hover::after {
- transform: scaleX(1);
- transform-origin: bottom left;
- }
- <p class="hover-underline-animation">Hover this text to see the effect!</p>
效果图
鼠标光标梯度跟踪
- .mouse-cursor-gradient-tracking {
- position: relative;
- background: #7983ff;
- padding: 0.5rem 1rem;
- font-size: 1.2rem;
- border: none;
- color: white;
- cursor: pointer;
- outline: none;
- overflow: hidden;
- }
- .mouse-cursor-gradient-tracking span {
- position: relative;
- }
- .mouse-cursor-gradient-tracking::before {
- --size: 0;
- content: '';
- position: absolute;
- left: var(--x);
- top: var(--y);
- width: var(--size);
- height: var(--size);
- background: radial-gradient(circle closest-side, pink, transparent);
- transform: translate(-50%, -50%);
- transition: width 0.2s ease, height 0.2s ease;
- }
- .mouse-cursor-gradient-tracking:hover::before {
- --size: 200px;
- }
- <button class="mouse-cursor-gradient-tracking">
- <span>Hover me</span>
- </button>
- var btn = document.querySelector('.mouse-cursor-gradient-tracking')
- btn.onmousemove = function(e) {
- var x = e.pageX - btn.offsetLeft
- var y = e.pageY - btn.offsetTop
- btn.style.setProperty('--x', x + 'px')
- btn.style.setProperty('--y', y + 'px')
- }
鼠标跟随动画
溢出滚动渐变
- .overflow-scroll-gradient {
- position: relative;
- }
- .overflow-scroll-gradient::after {
- content: '';
- position: absolute;
- bottom: 0;
- width: 240px;
- height: 25px;
- background: linear-gradient(
- rgba(255, 255, 255, 0.001),
- white
- ); /* transparent keyword is broken in Safari */
- pointer-events: none;
- }
- .overflow-scroll-gradient__scroller {
- overflow-y: scroll;
- background: white;
- width: 240px;
- height: 200px;
- padding: 15px 0;
- line-height: 1.2;
- text-align: center;
- }
- <div class="overflow-scroll-gradient">
- <div class="overflow-scroll-gradient__scroller">
- Content to be scrolled
- </div>
- </div>
溢出滚动渐变
漂亮的文字下划线
- .pretty - text - underline {
- font - family: Arial,
- sans - serif;
- display: inline;
- font - size: 18px;
- text - shadow: 1px 1px 0#f5f6f9,
- -1px 1px 0#f5f6f9,
- -1px - 1px 0#f5f6f9,
- 1px - 1px 0#f5f6f9;
- background - image: linear - gradient(90deg, currentColor 100 % , transparent 100 % );
- background - position: 0 0.98em;
- background - repeat: repeat - x;
- background - size: 1px 1px;
- }.pretty - text - underline: :-moz - selection {
- background - color: rgba(0, 150, 255, 0.3);
- text - shadow: none;
- }.pretty - text - underline: :selection {
- background - color: rgba(0, 150, 255, 0.3);
- text - shadow: none;
- } < p class = "pretty-text-underline" > Pretty text underline without clipping descending letters. < /p>/
文字下划线效果图
简单的导航栏特效
- span {
- padding: 0 1rem;
- transition: opacity 0.2s;
- }
- .sibling-fade:hover span:not(:hover) {
- opacity: 0.5;
- }
- <div class="sibling-fade">
- <span>Item 1</span>
- <span>Item 2</span>
- <span>Item 3</span>
- <span>Item 4</span>
- <span>Item 5</span>
- <span>Item 6</span>
- </div>
简单的导航栏特效
后序
本文中所有的动态图都是自己制作的, 整理出来供大家学习和参考, 喜欢的朋友麻烦给个星~ 谢谢
参考文献: 30 Seconds of CSS
来源: http://www.jianshu.com/p/9cae70cec921