CSS动效集锦,视觉魔法的碰撞与融合(二)
引言
CSS有他难以做到的事情,我们帮他用lottie解决
CSS有他可以做到的事情,我们用我们的头脑帮他解决
本文实现的CSS效果一览
标题吸顶
手写箭头
文字背景
圆形天坑
按钮波澜
动态方形
加载骨架
多行省略
标题吸顶

.sticky { z-index:; width: 500px; height: 20px; background: red; position:sticky; position: -webkit-sticky; top:0px; } <div class="sticky" style="margin:30px;"> </div>
手写箭头
先画一个div,border设置成箭头的颜色,同时呢,把div左边和下边的border变透明
再然后呢,把这个div右转45度:transform:rotate(45deg),这样就可以得到右边的箭头了

.arrow { width: 50px; height: 50px; border:10px solid blue; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); } <div class="arrow" style="margin:30px"></div>
文字背景
A:CSS文字背景怎么实现?
B:我知道我知道!text-background
A: 你的猜测非常合理!但如果我们真有这个CSS属性就好了
body { background: #fff; } .text-bg { width: 800px; font-size: 70px; font-weight: bold; background: url(../demoImage/sea.jpg); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } <div class="text-bg" style="margin:30px"> <p class="text">我叫彭湖湾,请叫我胖湾</p> </div>

圆形天坑

.hole-wrapper { overflow: hidden; position: relative; width: 300px; height: 70px; background: white; } .hole { border-radius: 50%; background: blue; position: absolute; bottom:; left:50%; margin-left: -200px; width: 400px; height:400px; } <div class="hole-wrapper" style="margin:30px"> <div class="hole"> </div> </div>


按钮波澜
波澜的轮廓是一个不断扩大的圆,我们联想到可以通过变化的transform:scale()控制大小的变化
圆随着扩大越来颜色越淡直到消失,我们可以给他设置白色background,并且通过变化的opacity控制透明度的变化
通过animation来控制每个阶段,圆的具体的大小和颜色浓淡变化

@keyframes wave{ 20% { transform: scale(0.2); opacity: 0.8; } 40% { transform: scale(0.4); opacity: 0.6; } 60% { transform: scale(0.6); opacity: 0.4; } 80% { transform: scale(0.8); opacity: 0.2; } 100% { transform: scale(1); opacity:; } } .button { overflow: hidden; position: relative; border:2px solid #fff; background:#2894FF; border-radius: 10px; width: 200px; height: 50px; } .wave { border-radius: 50%; position: absolute; top:50%; margin-top: -200px; left: 50%; margin-left: -200px; background: #fff; width: 400px; height: 400px; transform: scale(0.01); opacity:; } /* 悬浮替代点击 */ .button:hover .wave{ animation: wave linear 1s; } <div class="button" style="margin:30px"> <div class="wave"></div> </div>
动态方形
A:你实现一个高度和宽度一样的正方形!
B:太简单了!不要耍我!我会width:20px;height:20px;
A:但是,我的要求是要随外部div的长度变化,而变化的正方形
B:还是太简单了,我会width:20%;height:20% 。。。。。(被打断)
A:但是!这个外部包裹的div可能是一个变化的长方形!而你还是要在里面实现一个宽高成比例变化的正方形!
B:喵喵喵???

/* 不知道是哪个大猪蹄子想出来的运行不了的方法 */ div { width: 20%; height:calc(width) }
我们的思路
.square-wrapper { display: flex; justify-content: center; align-items: center; border: 2px solid blue; width: 300px; height: 200px; } .square-wrapper:hover { transition:width 2s,height 2s; width: 400px; height: 300px; } .square { background: red; width: 25%; padding-top:25%; } <div class="square-wrapper" style="margin:30px"> <div class="square"></div> </div>
加载条


.content { width: 200px; height: 20px; background:red ; } .content:empty{ background: grey } <div class="skeleton" style="margin:30px"> <div class="content">我有文本内容呢</div> <div class="content"></div> </div>
怎么让加载条动起来
单/多行省略

<div style='width:400px; height:70px; border:1px solid red;'> <p style='display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden;'> 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 </p> </div>
【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
总结和感悟
个人介绍
大家好! 我叫彭湖湾,CSS职业选手,18年中韩前端大师邀请赛垫底最后一名,JavaScript排位赛中国区广东分区前1600强,我擅长使用的英雄是React和Vue,快速响应从而给短时间内敌人造成大量伤害! 我喜欢使用的武器是Node.js,但是武艺不精经常误伤自己,我的口号是:“我是IE守护者,痛击我的队友,保护我的敌人! ” 9102年9月1日,我将在知乎前端职业联赛ZPL (Zhihu Pro League)上送上我的精彩表现,敬请期待!
CSS动效集锦,视觉魔法的碰撞与融合(二)的更多相关文章
- CSS特效集锦:视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- CSS动效集锦,视觉魔法的碰撞与融合(一)
前言 在本文中我讲述了7种CSS的动效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
- CSS动效集锦,视觉魔法的碰撞与融合(三)
本文讲述的原理和相关demo 扇形DIV的使用——实现雷达扫描图 DIV环形布局—实现loading圈 动画的向量合成—实现抛物线动画 无限滚动动画—实现跑马灯效果 perspective和trans ...
- js+css 动效+1的效果
点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- 前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 【总结】前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 前端读者 | 前端用户体验-UI动效设计
本文来自互联网 @羯瑞 整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...
- CSS揭秘—打字动效(四)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但 ...
随机推荐
- 整理用Java实现数字转化成字符串左边自动补零方法
Java 中给数字左边补0 (1)方法一 import java.text.NumberFormat; public class NumberFormatTest { public static vo ...
- swift 分享share页面封装(功能按钮不同)
关于分享功能的页面应该有很多,写这篇swift版本的分享页面,根据不同模块可能分享的功能按钮不一样,引言: 想必大家都使用微博右上角更多按钮,会弹出如下的界面: 在开发中,可能针对同一个app的不同按 ...
- byte数组和正数BigInteger之间的相互转换
旧代码 public static void main(String[] args) { SecureRandom random = new SecureRandom(); byte[] key = ...
- python自动化运维技术读书笔记
import psutilprint(psutil.cpu_times(percpu=True)) #使用cpu_times方法获取CPU完整信息需要显示所有逻辑CPU信息 import psutil ...
- pycharm的安装配置及思维导图
1.1 计算机基础知识 主板:人的骨架,用于扩展设备的 cpu:人的大脑,用于计算和逻辑处理的 硬盘:存储数据(永久存储) 电源:人的心脏 内存:存储数据(临时存储) 断电即消失 操作系统 xp wi ...
- pythonday03数据类型(一)
今日内容 1.整型 2.布尔型 3.字符串 4.补充 5.作业讲解 6,pycharm自动生成头文件 1.整型(int) py2 int/long 32位电脑:-2147483648-21474836 ...
- mysql的引擎问题,主键和外键的创建问题,以及创建外键不成功,却创建了一个索引
mysql的引擎问题: 需要知道的三个引擎:InnoDB--是一个事务处理引擎,不支持全文检索,支持事务操作,即DML操作: Memory--是一个数据存储在内存,速度很快,功能上等同于MyIsam, ...
- 对平底锅和垃圾的O奖论文的整理和学习[2](2018-02-08发布于知乎)
其实这篇论文看了一段时间,愣是没看出来这个模型怎么建立的.虽然看不懂,但是有一些部分还是很喜欢. 首先是摘要: 摘要分为八段 第一段:背景引入,太空垃圾的问题日益严重. 第二段:本文工作,包括基本的i ...
- 详解慢查询日志的相关设置及mysqldumpslow工具
概述 mysql慢查询日志是mysql提供的一种日志记录,它是用来记录在mysql中相应时间超过阈值的语句,就是指运行时间超过long_query_time值的sql,会被记录在慢查询日志中.long ...
- spring-boot-plus详细配置(五)
spring-boot-plus详细配置 公共配置 application.yml