css3小代码
1.三角
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>sanjiao</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.sanjiao{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
.sanjiao:hover{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
transition: 5s all;
}
.arr_down_a{
width: 0;
height: 0;
border-color:pink;
display: block;
border-left: 50px solid blue;
border-right: 50px solid red;
border-bottom: 100px solid yellow;
border-top: 50px solid grey;
} .test_a{
width: 0;
height: 0;
display: block;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: none;
border-top: 50px solid grey;
} .triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
} .trans-scroll{
width: 0;
height: 0;
display: block;
margin-top: 60px;
border-top: 6px solid #969696;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 1px solid transparent;
}
.trans-scroll:hover{
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: 500ms all;
}
</style>
</head>
<body>
<div class="sanjiao"></div>
<div class='arr_down_a'></div>
<div class='test_a' ></div>
<div class='triangle-bottomright' ></div>
<span class="trans-scroll"></span>
</body>
</html>
2.css兼容符号：
background:#ffc; /* 对firefox有效*/
*background:#ccc; /* 对ie7有效 */
_background:#000; /* 只对ie6有效 */
3.商品hover-animate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hover-animate</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<style type="text/css">
a{
color: blueviolet;
}
.div-demo-box{
padding: 20px;
}
.a-box{
width: 290px;
height: 250px;
background-color: pink;
}
.a-box>img{
display: block;
}
/*hover-animate 放大*/
.hover-box{
display: block;
overflow: hidden;
}
.hover-box:hover .hover-animation {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: transform 1s ease;
-moz-transition: transform 1s ease;
-o-transition: transform 1s ease;
-ms-transition: transform 1s ease;
transition: transform 1s ease;
} .hover-animation {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: transform 1s ease;
-moz-transition: transform 1s ease;
-o-transition: transform 1s ease;
-ms-transition: transform 1s ease;
transition: transform 1s ease;
}
/*hover-animate-shadow*/
.hover-shadow {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 6px;
border-bottom: #e3e2e2 solid 1px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background-color: pink;
}
.hover-shadow:after {
clear: both;
content: '';
display: table;
}
/*@media only screen and (min-width: 320) {*/
.hover-shadow {
width: 286px;
padding: 60px 10px 45px;
margin-right: 10px;
border-bottom: none;
box-shadow: none;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
transition: transform 0.3s ease;
}
.hover-shadow:hover {
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -2px, 0);
-moz-transform: translate3d(0, -2px, 0);
-o-transform: translate3d(0, -2px, 0);
-ms-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
-webkit-transition: transform 0.3s ease;
-moz-transition: transform 0.3s ease;
-o-transition: transform 0.3s ease;
-ms-transition: transform 0.3s ease;
transition: transform 0.3s ease;
} /*商品题目+简介布局 */
.brick-img{
width: 100%;
padding:0 40px;
*width: 236px; /*IE7*/
*margin: 0 auto;
*padding: 0;
display: block;
box-sizing: border-box;
}
.brick-title {
text-align: center;
color: #141414;
font-size: 1.6rem;
margin-top: 12px;
line-height: 20px;
/*control text 1 line ...*/
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
height: 1.8rem;
}
.brick-desc {
text-align: center;
color: #a0a0a0;
font-size: 12px;
font-size: 0.75rem;
line-height: 18px;
margin-top: 4px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: center;
height: 2.8rem;
} </style>
</head>
<body>
<div class="div-demo-box">
<h2>hover-animate
</h2>
<a href="javascript:void(0)" class="a-box hover-box">
<img src="data:images/cris_ban_01.jpg" alt="" class="hover-animation" />
</a>
<!-- pc商品 -->
<div class="brick-box hover-shadow margin-top20">
<a href="javascript:void(0)" class="display-block">
<img src="data:images/cris_ban_01.jpg" alt="" class="brick-img" />
<h3 class="brick-title">题目题目</h3>
<p class="brick-desc">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</p>
</a>
</div>
</div> </body>
</html>
css3小代码的更多相关文章
- 【processing】小代码
今天无意间发现的processing 很有兴趣 实现很简洁 void setup(){ } void draw(){ background(); && mouseY > heig ...
- 小代码编写神器：LINQPad 使用入门
原文:小代码编写神器:LINQPad 使用入门 一:概述 1:想查看程序运行结果,又不想启动 VS 怎么办? 2:想测试下自己的 C# 能力,不使用 VS 的智能感知,怎么办? 那么,我们有一个选择, ...
- 几个常用的CSS3样式代码以及不兼容的解决办法
原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radiu ...
- Python小代码_2_格式化输出
Python小代码_2_格式化输出 name = input("name:") age = input("age:") job = input("jo ...
- Python小代码_1_九九乘法表
Python小代码_1_九九乘法表 max_num = 9 row = 1 while row <= max_num: col = 1 while col <= row: print(st ...
- 简单的Java逻辑小代码(打擂台，冒泡排序，水仙花数，回文数，递归)
1.打擂台 简单的小代码,打擂台.纪念下过去,祝福下新人. public static void main(String[] args){ int[] ld = {1,4,2,10,8,9,5}; i ...
- python的mysql小代码
我因为懒,就想写个批量insert数据的小代码 这里是代码 # _*_ encoding:utf-8 _*_ import os import MySQLdb import numpy as np d ...
- 一段小代码秒懂C++右值引用和RVO(返回值优化)的误区
关于C++右值引用的参考文档里面有明确提到,右值引用可以延长临时变量的周期.如: std::string&& r3 = s1 + s1; // okay: rvalue referen ...
- css3 小图标提示特效
最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...
随机推荐
- Linux--NiaoGe-Service-08（路由）
路由 Linux系统下的路由表是由小到大排列的,即C类地址-->B类地址-->A类地址-->0.0.0.0(默认路由). Linux系统中使用route命令查看路由表 [root@w ...
- (转)Unity中使用C#实现Zip包的压缩与解压
使用SharpZipLib库,下载地址为:http://icsharpcode.github.io/SharpZipLib/ /************************************ ...
- Mysql优化配置
Mysql配置优化 一.环境介绍 Mysql版本:5.5.27 二.优化内容 字段 介绍 推荐值 skip-locking 避免MySQL的外部锁定,减少出错几率增强稳定性 back_log MySQ ...
- Super Mario（线段树离线区间k值）
以前见过这题,没做出来,知道是离线处理,这次仔细想了下, 首先把出现的高度都map离散化一下,以离散化出来的数目g建树,把每个位置都开俩个vector,一个存以这个位置为L的询问,一个存以这个位置为R ...
- Java编程基础-异常
一.异常 1.什么是异常 在java中,程序在运行时出现的不正常情况称为异常,以异常类的形式对这些非正常情况进行封装,通过异常处理机制对程序运行时发生的各种问题进行处理.其实就是java对不正常情况进 ...
- （转载）最近总是遇到各种 IEbug，mark一下，学习到了，转载出处：http://www.cnblogs.com/ruomeng/p/5332814.html
本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...
- WebService学习之旅（三）JAX-WS与Spring整合发布WebService
Spring本身就提供了对JAX-WS的支持,有兴趣的读者可以研究下Spring的Spring-WS项目,项目地址: http://docs.spring.io/spring-ws/sites/1.5 ...
- Java类的静态块の一
类的静态块在类加载时候执行,执行早于构造函数,并且只执行一次. 下面这个例子可以帮助理解: package untility; public class A { // 静态块 static { A c ...
- Android笔记--Bitmap(三) 针对不用Android版本的位图管理
Bitmap(三) | Android不同版本的相应操作 在不同的Android版本中.位图的存储方式是不同的. 1.小于等于 Android 2.2 (API level 8) 垃圾收集器回收内存时 ...
- 面向阿里云专家的 Azure 云服务介绍
本文是面向阿里云专家的 Azure 云服务介绍,参考本文可以帮助大家“按图索骥”在 Azure 的平台上找到能满足自己需求的服务. 在公有云计算蓬勃发展的同时,中国也出现了越来越多的本土公有云平台.针 ...