AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

原来 css 也能这么炫酷(一)

  • 2020-01-07
  • 本文字数:1239 字

    阅读完需:约 4 分钟

原来css也能这么炫酷(一)

在网页开发中,为了有更好地用户体验,我们常常会对一些交互元素添加动画效果来达到这个目的,我们知道 css3 有过渡动画和关键帧动画可以实现一些简单的动画效果,例如元素位置改变就可以通过提前定义好的动画使我们可以完整的看到整个元素移动的过程。好了,话不多说,直接上干货。


在开发中,按钮 button 想必大家都十分常用吧,但是你有没有想过怎么去做一个炫酷的按钮呢?某天,在写 css 时,突发奇想,玩出来了个’幽灵’按钮,哈哈,名字不重要,我们先看看按钮效果。



接下来,直接上代码:


(温馨提示:左右/上下滑动可查看全部代码)


<html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">   <style type="text/css">       body {           background: #000;       }       .btn-st{               font-size:20px;               width:40px;               height:40px;               color:#fff;               border:0;               outline: 0;               position: fixed;               left: 50%;               background:rgba(0,0,0,0.3);               top:70px; ;z-index: 110;               transition-property: left,background;               transition-duration: 1s;               transition-timing-function: ease-in-out;       }       .line{               display:block;               box-sizing: border-box;               position:absolute;               background:#fff;               transition: all .2s ease-out         }       .line-top,.line-bottom{width: 0px;height:1px;}       .line-left,.line-right{width: 1px;height:0px;}       button:hover{box-shadow: 0 0 20px yellow;}
.line-top{top:-1px;left:-50px;} button:hover>.line-top{width:41px;left:-1px;}
.line-left{top:80px;left:-1px} button:hover>.line-left{height:41px;top:-1px;}
.line-right{right:-1px; bottom:80px;} button:hover>.line-right{height:42px; bottom:-1px;}
.line-bottom{bottom:-1px;right:-50px;} button:hover>.line-bottom{width:42px;right:-1px;} </style>
</head><body> <button type="button" id="btn" class="btn-st"> <span class="glyphicon glyphicon-menu-hamburger"></span> <span class="line line-top"></span> <span class="line line-right"></span> <span class="line line-bottom"></span> <span class="line line-left"></span> </button></body></html>
复制代码


很简单吧,其实就是通过对 4 个元素的定位偏移量做一个过渡动画,就可以实现了,有没有很炫呢?


好了,先上个小菜,接下来我们玩个大的,结合 js,来做一个特别酷炫的轮播切图,老规矩,上效果:



本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA


2020-01-07 15:38704

评论

发布
暂无评论
发现更多内容

B2B 产品市场中「价值营销」的 8 个关键词

To B Park

告别交通拥堵和数据孤岛,区块链成智慧交通发展新基石

CECBC

交通

智汇华云 | ArcherOS Stack共享存储虚拟化技术剖析

华云数据

Serverless 时代 DevOps 的最佳打开方式

阿里巴巴云原生

Serverless DevOps 微服务 运维 云原生

前端工程化之H5性能优化篇

百度Geek说

百度 大前端 H5

【LeetCode】翻转链表Java题解

Albert

算法 LeetCode 28天写作 3月日更

BI掌柜系统开发案例详情丨BI掌柜开发源码功能

系统开发咨询1357O98O718

阿里P8大牛手把手教你!这是一份面向Android开发者的复习指南,快来收藏!

欢喜学安卓

android 程序员 面试 移动开发

2021年技术预测:从云计算到边缘以及两者之间的一切

云计算 边缘计算

智慧物流迎利好,当代电商倒逼传统产业链变革升级

一只数据鲸鱼

物联网 数据可视化 供应链 智慧城市 智慧物流

《Redis 核心技术与实战》学习笔记 03

escray

redis 学习 28天写作 3月日更 Redis 核心技术与实战

php in_array的低性能

架构精进之路

php 3月日更

编译android源码!2021年Android面试心得,学习路线+知识点梳理

欢喜学安卓

android 程序员 面试 移动开发

网络编程及通信三要素

五分钟学大数据

大数据 网络编程 28天写作 3月日更

霸榜Git!2021年阿里巴巴Java面试权威指南(泰山版)

Java架构追梦

Java 架构 面试 泰山版

【实战问题】-- 高并发架构设计以及超领现象解决?

秦怀杂货店

Java 架构 高并发

《Out of Tar Pit》总结

陈皓07

JDBC—配置SQLyog

打工人!

MySQL JDBC SQLyog

孤寡程序猿找女朋友的方法论

不脱发的程序猿

程序员 找对象 28天写作 3月日更 脱单

java String长度有限制吗?

ddww

登顶GLUE榜单的文心又开课了,一站式教学搞懂信息抽取

百度大脑

百度大脑 GLUE 信息抽取 EasyDL

化蛹成蝶,华为云DevCloud助力互联网+转型,重构钢铁产业链

华为云开发者联盟

Scrum 代码 华为云 devcloud 敏捷管理

Linkis 1.0.0-RC1 版本发布

康月牙

算法喜刷刷之1021删除最外层的括号

Kylin

算法 28天写作 3月日更 21天挑战

Github上2021最新最全面的面试题库(Java岗)程序员不容错过

比伯

Java 编程 程序员 架构 面试

万象:百度的海量多媒体信息处理系统

百度Geek说

大数据 搜索引擎 百度 后端 #富媒体#

StarRocks在中移物联网PGW实时会话业务领域的应用

StarRocks

大数据 数据分析 物联网 IoT OLAP

JDBC—连接数据库工具类(JDBC_Utils)

打工人!

Java JDBC java工具类 操作数据库

告别交通拥堵和数据孤岛,区块链成智慧交通发展新基石

旺链科技

区块链应用 智慧交通

JDBC—对数据库的通用增删改查

打工人!

Java 数据库事务 MySQ JDBC crud

315曝光的侵犯个人信息行为可以用区块链来规范吗?

CECBC

区块链

原来css也能这么炫酷(一)_语言 & 开发_Think体验设计_InfoQ精选文章