CSS3教程
CSS3不倒翁动态效果代码
HTML代码<div class="santa"><div class="santa-body"><div class="santa-head"><div class="santa-ear"></div><div class="santa-ear"></div><div class="santa-hat&qu...
CSS3旋转动画效果分享
定义 dom，容器中包含 9 个元素：<div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span&...
CSS3实现苹果灵动岛效果
主要利用了CSS3-animation + JS实现效果，只是提供思路，具体细节可以参考<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>灵动岛</title>...
CSS3旋转/放大/移动动画效果代码
效果一：360°旋转 修改rotate(旋转度数).img1 {transition: All 0.4s ease-in-out;-webkit-transition: All 0.4s ease-in-out;-moz-transition: All 0.4s ease-in-out;-o-transition: All 0.4s ease-in-out;}.img1:hover {transform: rotate(360deg)...
css3海浪波浪动态效果代码
HTML代码建立一个div，id为wavesDIV，之后使用svg绘制一个图形出来，此时这个图形还是不会懂的，我们需要使用animation来让他动起来<div id="wavesDIV" style="display: block;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlin...
CSS3修改浏览器滚动条样式
首先我们写一个简单的小实例来说明下，设置一个长框为300的div，设置下溢出滚动。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&q...
CSS3+JS页面loading过度跳转效果
CSS3+JS页面loading过度跳转效果，字母跳动效果，具体效果如下图CSS3+JS页面loading过度跳转效果代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF...
css3背景渐变语法
css3背景渐变语法background: linear-gradient(0deg, #fff 0%,#000 100%);语义说明background：背景linear-gradient：渐变0deg：渐变方向，比如从左到右，从右到左，从上到下等等#fff：渐变起始颜色#000：渐变结束颜色0%，100%：透明度...
CSS3高光划过效果代码教程
我们常常看到的高光划过效果，其实用CSS就能实现，CSS3高光划过效果代码教程方法CSS3高光划过效果代码.logo-wrapper { position: relative; font-size:2em; font-weight:700; line-height:39px; overflow:hidden; margin:0;}.logo-wr...
CSS3做一个手机端左右滑动菜单
手机端因为布局很窄，如果刚好菜单很多的情况下，我们就可以把菜单左侧左右滑动的效果，来节省空间，大致效果如下图具体效果可以参考今日头条，菜单可以左右滑动。有些花里胡哨的代码会用上JS，其实这种只需要CSS就能搞定，下面看代码。HTML代码<div><a href="htt...